Jasmine Teaとクエリアで「ローコードUI」を構築　限られたリソースで効率的な管理ツールを開発

Jasmine Teaの技術スタックとアーキテクチャ

及川卓也氏（以下、及川）：ちょっとJasmine Teaの話ばかりしていても仕方ないので、ササっと管理画面の話に急いでいきます。その前に実際にこれがどうできているかというところを簡単に、どんなコンポーネントや技術スタックを使っているかというのを田中さんお願いします。

田中洋一郎氏（以下、田中）：はい。Webアプリケーションなので一番左にあるFrontendというところがWebブラウザで動くTypeScriptで書いているんですけど。実行時にはJavaScriptでゴリゴリに書かれたJasmine Teaの実際に動くものがWebブラウザ上で実行されます。なので先ほど簡単にJasmine Tea上でプログラムを書いたんですけど、それを拝借して命令として実行して、実行画面に結果を反映してというようなものも全部Webブラウザ上で動いています。

JavaScriptとかHTMLとかは、「Firebase Hosting」からWebブラウザに配信されていきます。裏側のデータベースについては、Firebaseの「Firestore」に全部格納してあります。Firestoreのデータベースを操作するためにFrontendから「Firebase Functions」、これを一部使ってDBとのやり取りをしています。

なのでエンドユーザーが実際に触るものについては、左のサービスコンポーネントで書かれたWebブラウザ上で動くJavaScriptと、Firebaseサービス群。これらでエンドユーザーの機能が賄われています。裏側はどんな感じになっているかというと、まずユーザーの動向ですとか利用状況を把握するために、FirestoreのDBの一部を「BigQuery」にリアルタイムでエクスポートしています。

BigQueryに格納されたデータを問い合わせを使って「LookerStudio」でビジュアル表示して、ユーザーが増えた減ったみたいなことを我々運営側が見ているという感じになります。あと、例えば新しい機能をリリースする時にデータベースを一部一気に変えたいとかというバッチ処理がどうしてもたまに発生するんですけど。それはGoで書かれたスクリプトを動かしてFirestoreに対してリクエストを投げています。

このあとデモでお見せする、我々運営側がエンドユーザーに対して何か情報を提供したりだとか、データベースをいじったりという運営のための機能をクエリアで画面を作って、Firestoreと接続して、日々運用に活かしているというような構成になっています。

Jasmine Teaのビジネスモデルと管理ツールの必要性

及川：今Jasmine Teaというのは個人ユーザーを中心に考えていたというところがピボット中で、実際に我々が教える側に立ってということで、教育現場に入り込んで教えています。気をつけていることとしては、重いものをいきなり作らないようにし、できるだけ検証できるレベルにして検証を重ねていくというやり方を取っています。

こういうふうにピボットをする中、教える側の機能、要は教育機関の人。このあと登場人物の説明をしますけれども、その人向けの機能が必要になってきます。とはいえ最初は我々が教える側でもあると。なので登場人物としては我々Tablyがシステム提供をし、カリキュラムも一部提供し、それで教育機関の中に例えば教師や講師、生徒の登録、クラス登録をするような管理者がいて、実際に教える人がいて、生徒がいるというような、こんな登場人物になるわけです。

ただし、今はここのほぼすべてを我々だけでやっている。教育機関の場は借りているけども、管理、あとは実際に教えるのも我々および我々のスタッフが行っているというかたちに一時的になっているというのが、今の状況になっています。

なので言葉で書くとこんなかたちになっていて、プロダクト提供者、教育機関、この3つが今全部Tablyで生徒だけがユーザーというかたちです。

ですが、一部この教育機関側の教師や管理者の方に、独自に「ユーザー登録等をしていきたい」という要望も出てきていて、その部分を管理ツールとして、今後外出しをしていくだろうというような候補として出てきているという感じです。

この管理ツールの考え方は我々のを例にしてお話しますけれども、基本的に社内で使うだけで外に見せるものではない。なので、基本はあまりセキュリティとかということを考えなくていい。性善説ですね。悪い人が悪い操作をしないという前提で社内ツールはできるものです。UIをやたら凝らなくてもいいけれども使いにくいのは論外だという、微妙なUIに対する期待値になります。

でもやはりエンジニアリソースが限られている。我々は特にそうですけれども、多くの会社でもそうだと思います。となると、ユーザーに直接価値を与えるものではないので、できるだけコストをかけたくないということがあります。社外の管理者が使うツールは先ほども言いましたように、当面は我々なんですけれども、今後は外部公開をするのでこれはプロダクトの一部として開発していくというものになっていく。

こんな管理ツールの2つに分かれるかなと。特に上のほうの純粋な社内ツールというところが、楽したいけれどもあまり酷いものにはしたくないというような需要があるところになります。ここで我々はクエリアを使っているんですけれども、ちょっとクエリアがどんなものかというのを、吉田さんに説明いただいてから先ほどのJasmine Teaがどういうふうにクエリアを使っているかというのを見ていただければなと思います。

クエリアの概要と特徴

吉田暁氏（以下、吉田）：ありがとうございます。それではクエリアの紹介を簡単にさせていただければなと思います。クエリアというのはですね、社内向けの管理画面であったりとか、業務アプリケーションというのをローコードで簡単に構築できるようなプラットフォームになっています。同じように、さまざまな業務にですね、最適な管理画面をローコードで素早く・簡単に構築ができるSaaS型のオンラインで完結する業務アプリビルダーとなっています。

クエリアの特徴としましては、まず1つ目がですね、画面をドラッグアンドドロップで構築できるという点ですね。一切開発が必要なく、GUIのみでドラッグアンドドロップでページを構築することができるというのが1つの特徴となっています。2つ目がですね、さまざまなデータベース。例えば、MySQLとか、PostgreSQLであるとか、あとは社内のAPIですね。REST API、GraphQL。

あとはGoogleのスプレッドシートなどですね。さまざまなデータソースと簡単に接続ができて、リクエストを送ることができるというのが特徴になっています。最後にですね、Webで完結するSaaS型のクラウドサービスなので準備が不要で、コードの管理も一切不要ですぐに始められるというのが特徴となっています。

クエリアのデモンストレーション

吉田：ではちょっとここでですね、画面の共有をいただいて実際のプロダクトのデモをさせていただければなと思います。こちらがですね、クエリアの構築画面になります。今回は簡単にMySQLからユーザーの一覧を取得してテーブルに表示するというようなデモをしていこうと思います。まずですね、データフローを作成すると、このようにSQLを書くことができます。

まずはユーザーのリストを取得する。このようにですね、実際のデータベースからデータを取得することができます。

次にUIを作っていくんですが、まずラベルとして「ユーザー一覧」などとして今回はテーブルコンポーネントにユーザーのデータを表示するので、テーブルコンポーネントを配置します。現在はダミーのデータが入っているんですが、先ほど作ったデータフローを、参照していきます。

データのところにdataflow1.dataというふうにするとですね、先ほど取得したユーザーの一覧がテーブルに表示されるようなイメージになります。

例えばここにportraitというカラムがあるんですけど、こちらは、画像のURLが入っています。こういったところでですね、タイプをimageにすることで簡単に画像の表示ができたり、タイムスタンプのカラムには、Datetimeとすることで実際に日付けがフォーマットされるようなかたちになります。

こんな感じで、簡単にローコードでユーザーの一覧を表示することができました。今回のこのクエリアは、簡単な機能を作りましたが、このようにですね、例えばSQLの中でアップデートをすることもできますし、デリートとか、インサートもすることができますので、データフローでロジックを構築してあげて、それらを、コンポーネント側から参照する。

もしくはコンポーネントをデータフローから参照する。交互に参照し合うことでですね、ローコードで簡単に社内向けのアプリケーションというのを作ることができるようなサービスになっています。いったん、クエリアのデモは以上になります。

Jasmine Teaでのクエリア活用事例

及川：はい。では、いったん画面をもらいますが、実は1枚だけなので画面をもらわなくてもいいぐらいなんですけれども。このあと先ほどのJasmine Teaをどういうふうに使っているかという、ちょっとリアルな実例を見ていただきたいなと思います。

ちょっと一言言うと吉田さんが、サクッと紹介してデモしていただきましたけれども、あまり褒め過ぎると宣伝くさくなりすぎちゃうかもしれないんですが。我々のエンジニアに使ってみてもらったら「簡単過ぎて感動しました」というような声が出ているぐらいなので、本当に簡単にできるというところが少しは見ていただけたかなと思います。じゃあ田中さん、実際にJasmine Teaのほうの管理画面でどういうふうにクエリアを使っているかを見せてください。

田中：はい。先ほどJasmine Teaで実際にプログラミングをするユーザーと、あとはプログラミングを教える教育機関という2つの言葉が出てきたんですが、教育機関側の人たちが使うであろう機能を今はクエリアで我々が作っているというふうに思っていただいて大丈夫です。まず教育機関管理というページを作っていまして、ここでいわゆる学校とか塾、プログラミング塾とかの登録をするページになっています。

すでに「Querierデモンストレーション学校」みたいな感じの教育機関登録をしてあります。教育機関を登録したあとは、そこに所属しているユーザーを登録していきます。まず教育機関を選択します。先ほど作った「Querierデモンストレーション学校」を選択して、ここに僕のメールアドレスを入力して、「僕はQuerierデモンストレーション学校の生徒ですよ」という感じで、ユーザー登録をします。

この状態で、もうすでにFirestoreにデータが格納された状態です。Jasmine Teaでログインをしてみます。そうするとJasmine Teaはどこかの教育機関に所属しているユーザーであれば、一番下に学校名が表示されるんですね。「Querierデモンストレーション」と。これで「Querierデモンストレーション学校向けのJasmine Teaの環境に入れました」という状況になりました。

クエリアを使った課題提出システムのデモ

田中：実際にプログラミングの授業をしていく中で、今回ちょっとデモとしてやってみたいのは、生徒が作ったプログラムを課題として「じゃあ、課題提出をしてください」というシーンを想像していただければいいかなと思います。課題提出についてアンケート機能を使って、「生徒が作ったプロジェクトを課題として提出してください」というシナリオをやってみたいと思います。

アンケート管理というクエリアのページが作ってあって、ここでまず学校名を選択します。先ほど作ったんですけど、「課題提出　5月30日　Aクラス　1時間目」の課題を作成したプロジェクトを選択して、提出してくださいというアンケートを登録してみました。アンケートの質問についてはJSON形式で、ここで打ち込んであるかたちです。これを生徒に今、配信したいと思います。

回答期限は明日までで、回答必須にします。アンケートに答えてほしい人はAクラス。僕のアカウントをAクラス所属にしておいたので、「Aクラスの人たちに答えてください」として、アンケートを配信します。

そうするとこのようにJasmine Tea上でアンケートが自動的に表示されます。ここで課題を提出してくださいということなので、先ほど作ったプロジェクト、「1から10までの和」を求めるプログラムですね、これに回答します。

こうすると課題提出ができた感じになります。ちなみにこのプログラムはfor文で1から10までグルグル回して、そのグルグル回っている間にその値を足し込んでいく。すると、1＋2＋3＋4＋5＋6＋7＋8＋9＋10は55、という簡単なプログラムになります。

この課題提出ができたので、あとはGoogle（スプレッド）シートの中でアンケートの結果を取れるように仕込んでありまして、田中くんが課題を送ってきましたと。

それでこのURLを開くと、先ほどのプロジェクトが出てきて先生が添削することができるという感じになっています。このように先生が課題提出用にアンケートを作って生徒に送るとか、そういったことが画面ポチポチでできるようにクエリアでUIを作って、僕らは今運用しているという感じになります。デモンストレーションは以上です。

（次回へつづく）