どうも、まさとらん（@0310lan）です！
今回は、さまざまなWebサービスやデータベースと連携して、独自のWebアプリなどを手軽に開発できるサービスをご紹介します！
データソースの連携や画面デザインなどはドラッグ＆ドロップの操作で簡単に構築が可能で、ロジックやイベント処理などもわずかなJavaScriptを利用するだけで開発できるのが特徴です。
オープンソースで開発が進められており、セルフホストすることで大きな制限もなく活用できるのでご興味ある方はぜひ参考にしてください。
【 ToolJet 】
■「ToolJet」の使い方
それでは、「ToolJet」をどのように使えばいいのか詳しく見ていきましょう！
まずはメールアドレスを入力したら【Create an account】ボタンをクリックして無料のユーザー登録を済ませておきます。
メールアドレス宛にユーザー登録用のリンクが送付されるのでクリックしてください。
ユーザー登録画面が表示されたら必要事項を入力しましょう。
以下のような管理画面が表示されたら準備完了です！
この画面から新規プロジェクトの作成・管理ができるようになります。
また、多彩なテンプレートから素早くプロジェクトを作成したり、共同編集者やグループの管理なども行えます。
■暗号通貨ダッシュボードを作ってみよう！
「ToolJet」を使うと、さまざまなデータと連携したWebアプリや社内ツールなどを手軽に構築できます。そこで、今回は簡単なサンプルデモとして暗号通貨の価格情報を表示できるダッシュボードを作りながら、どのように開発を進めていくのかを解説していきます。
公式ブログにも手順が公開されているので、こちらも参考にしながら詳しく見ていきましょう。
まずは管理画面から新規プロジェクトを作成します。
プロジェクトのバージョンを設定して【Create】ボタンをクリックしてください。
専用の開発エディタが表示されます。
このエディタを利用して、誰でも簡単に多彩なWebアプリを構築できます。
今回は暗号通貨の価格情報を取得するために、「CoinStats」が提供するAPIを利用してみます。
そこでまずはエディタ下部にある【Create query】ボタンをクリックして、新しいクエリを作成しましょう。
次に、データソースとして【REST API】を選択します。
これでAPIを利用するための準備が整いました。
「CoinStats」が提供するAPIのエンドポイントは以下のとおりです。
https://api.coinstats.app/public/v1/coins?currency=USD
こちらを実行すると、暗号通貨の価格情報をJSON形式で取得できます（APIの仕様についてはこちらを参照）。
それでは「①入力ボックス」にエンドポイントを設定したら、「②Preview」ボタンをクリックしてください。
画面下部に取得したJSONデータを閲覧できるようになります。
およそ100件の暗号通貨情報を取得しており、各データごとに「id」「name」「price」のプロパティがあることを確認しておいてください。あとで、この情報を画面に表示できるようにしていきます。
作成したクエリの名前を「coinlist」に変更したら【Create】ボタンをクリックして保存しましょう。
ついでに【Advanced】タブに切替えて、ページがロードされるたびにクエリを実行して最新データが取得できるように設定しておくと便利です。
ここで「ToolJet」の便利な機能を1つご紹介しておきます。
クエリを作成したら実行ボタンが表示されるのでクリックしてみましょう。
左メニューにある【Inspector】を選択すると、取得したJSONデータをいつでも確認できるようになります。
データの構造が分からなくなったときに便利なので覚えておくといいでしょう（ピン留めして常に表示させておくことも可能）。
それでは、暗号通貨の情報を取得できるようになったので、今度はそのデータを画面に表示していきます。
エディタ右側にある【Table】アイコンをドラッグ＆ドロップしてみましょう！
さまざまな情報を表示できるテーブルが配置されました。
このテーブルはマウスをドラッグしてサイズの変更や移動などもできます。
テーブルを選択している状態だと、画面右側にデフォルトのデータソースが表示されます。今回はこのデータを使わないので {{ }} の中身を削除してください。
代わりに、このテーブルへ表示させたいのは暗号通貨の情報なので、「Inspector」からデータの構造をもう一度確認しておきましょう。
データにアクセスするには「queries.coinlist.data.coins」を参照すればいいことが分かります。
そこで、先ほどのデータソースを以下のように置き換えればOKです！
なお、デフォルトのテーブルには「email」という項目が設定されていますが、暗号通貨のデータには存在しないので代わりに「price」と設定しておきましょう。
これで最新の暗号通貨データが表示されるようになります！
もちろん項目を変更すれば他のデータを表示できますし、列を追加して表示する情報を増やすことも可能です。
■チャートを利用したデータの可視化
せっかくなので取得したデータをチャートで可視化して、直感的に分かりやすい画面を作ってみましょう。
そこで、まずは新しいクエリをもう1つ作ります。
「CoinStats」のAPIには、可視化に最適なデータを取得できるエンドポイントも以下のように提供されています。
https://api.coinstats.app/public/v1/charts?period=1m&coinId=bitcoin
こちらを実行すると、チャート用のビットコインデータ（1か月分）を取得できます。ちなみに、パラメータの部分は次のような意味があります（詳細はこちら）。
- period：データの期間(1w, 1m, 6m, 1yなど)
- coinId：暗号通貨の種類(bitcoin, ethereumなど)
このエンドポイントを「①入力ボックス」に設定し、クエリの名称を「②chartdata」に変更してから「③Create」ボタンをクリックしましょう。
作成したchartdataクエリの「①実行ボタン」をクリックしてから、Inspectorを開いて「②データ」が取得できているかを確認します。
次に、エディタ右側の「Chart」アイコンをドラッグ＆ドロップして画面に配置します。
デフォルトで設定されているデータソースを見ると、X座標に時間軸とY座標にデータが設定されています。
つまり、このデータ形式と同じように、取得した暗号通貨のデータも整形する必要があるわけです。
Inspectorを見るとデータ自体は「queries.chartdata.data.chart」を参照すれば取得できるのが分かります。
そして各データ配列の1番目の要素に暗号通貨の価格が格納されていることも分かりますね。
そこで、JavaScriptのmap()を利用して、X座標に日付とY座標に価格が格納されるようにオブジェクトを以下のように作ればいいわけです。
{{queries.chartdata.data.chart.map( (price,day) => ({"x": day, "y": price[1]}) )}}
このように「ToolJet」では、ほとんどの入力要素に一般的なJavaScriptを埋め込むことができるので覚えておきましょう。
上記をデフォルトのデータソースと置き換えれば、1か月分のビットコイン価格推移が可視化されます。
ただし、このままだとビットコインのチャートしか表示されません。そこで、すでに作成したテーブル表から任意の行をクリックすると、その暗号通貨のチャートが表示されるようにしてみましょう。
実はテーブルの行をクリックすると、「selectedRowId」というプロパティに何行目がクリックされたかの数値データが格納されます（Inspectorを開いて確認できます）。
例えば、「selectedRowId」の値が1の場合だと、1行目がクリックされたという意味になります。そのため、「selectedRowId.id」を参照すれば1行目の「ID列」にある「ethereum」の文字列が取得できるわけです。
つまり、この仕組を使ってエンドポイントの「coinId」パラメータを以下のように変更すれば、任意の暗号通貨データをチャートに表示できるわけです。
coinId={{components.table1.selectedRow.id}}
あとは、テーブルの行をクリックしたときに、このクエリを実行できるように設定するだけです。
テーブルを選択した状態で、画面右側にある【Events】の項目から新規作成のリンクをクリックします。
【Action】に「Run Query」を設定し、【Query】の部分に先ほど作成した「chartdata」を設定しましょう。
これで完成です！
テーブルの好きな行をクリックすると、選択された暗号通貨のチャートが表示されるようになります。
■アプリを公開してみよう！
「ToolJet」で作成したWebアプリなどは、簡単な手順でネット上へ公開できるので合わせてご紹介しておきます。
使うのはエディタ上部にある「Release」ボタンと「Share」ボタンだけです。
「Release」ボタンをクリックすると、最初に設定したアプリのバージョンを確定できます。
次に「Share」ボタンをクリックすると、公開用のURLが自動生成されて表示されます。
「Make application public?」の項目をONにしておくだけでアプリが公開されます。
あとは表示されているURLをコピーして友人・知人にシェアするだけです。ちなみにURLの末尾は好きな英数字に変更可能です。
URLをブラウザで開くと、作成した暗号通貨のダッシュボードがWebページとして表示されます。
ちなみに、今回のサンプルデモはAPIを利用しましたが、利用できるデータソースとしてさまざまなWebサービスと連携可能です。
MySQL, MongoDB, Redis, OracleDB…などのデータベースをはじめ、Airtable, Googleスプレッドシート, Slack, Stripe…などの人気Webサービスのデータも活用できます。
これらのデータソースを活用したチュートリアルも、公式ブログで紹介されているのでいくつかピックアップして下記に掲載しておきます。
＜ToolJetのチュートリアル例＞
■「ToolJet」をセルフホストしよう！
本記事では「ToolJet」が提供するクラウド版を利用してWebアプリを構築しましたが、自分でサーバーを用意（セルフホスト）して使う方法も用意されています。
クラウド版の無料プランは作成できるアプリの数に制限がありますが、セルフホストすれば制限なく自由に活用できるようになります。
方法としては、DockerやAWSなどいくつか「ToolJet」をインストールできる手順が提供されています。今回は、簡単に試せるHerokuを使ってみましょう。
Herokuにログインした状態で、「ToolJet」の公式ガイドにあるボタンをクリックしてください。
【 Deploying ToolJet on Heroku】
Herokuの設定画面が表示されるので、公式ガイドに掲載されいている通りに必要事項を入力していきます。
デプロイが完了したら【View】ボタンをクリックしましょう。
初期設定のログイン画面が表示されます。
デフォルトユーザーのメールアドレスは「dev@tooljet.io」、パスワードは「password」になります。
ログイン後にユーザー情報を変更したら、あとは自分の好きなWebアプリやツールを開発していきましょう。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
このたび人気の「Python入門編」が全編無料となりました。他にもいろいろな動画レッスンを無料公開しておりますので、エンジニア・非エンジニアにかかわらず、プログラミングを学びたい方はぜひごらんください。
paizaラーニングについて詳しくはこちら
■まとめ
今回は、誰でも手軽にWebアプリや社内ツールなどを開発できるオープンソースのWebサービスをご紹介しました。
本記事でご紹介した内容は「ToolJet」が提供する機能のほんの一部であり、アイデア次第でどんなWebアプリでも開発できる万能性があります。また、セルフホストでアプリを独自に管理できる利便性の高さも魅力でしょう。
ぜひみなさんもユニークなWebアプリを開発して、友人・知人とシェアしてみてはいかがでしょうか。
＜参考リンク＞
・「ToolJet」公式サイト
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
