API連携 (ノーコード開発ツール ToolJet)

Owned by Kohei Nishikawa
Last updated: Jul 13, 2023
3 min read

Ubuntu 20.04 の環境を使って確認しています。Server版とGUIありのDesktop版、どちらでも構いません。Ubuntu専用の物理マシン、もしくは仮想マシンを用意してください。仮想マシンではなく、ホストマシンで使いたい場合は、ホストマシン（Windows / Mac）に、Docker Desktop をインストールしてください。

Ubuntu 20.04 を操作するユーザー名を、user1 とします。各自で読みかえてください。

目次

概要

ノーコード開発ツールの「ToolJet」をdockerを使って、手軽に起動し、パブリッククラウドのSheetDBで公開されているREST API に接続し、SheetDBからREST API で取得したデータを表示するアプリケーションを作ります。

「ToolJet」は、内部向けのアプリケーションに向いているノーコード開発ツールです。

なお、自分で日本語化ファイルを作り、日本語対応にすることも可能です。https://docs.tooljet.com/docs/contributing-guide/l10n/ << 英語で表示されるソフトウェアを日本語化してクラウドでサブスクで提供するビジネスは、昔からある定番の１つ。

ToolJetにできることの例

https://docs.tooljet.com/docs/#what-can-i-do-with-tooljet
できることが公開されいてる場合は、見本にすることで、アプリケーションを作りやすくなります。例えば、WhatAppをLINEに置き換えて考えるなど。その場合、WhatAppとLINEの仕組みの差を埋める方法を自分で考える必要があります。

注意事項

自分が実行しているコマンドの意味を知らないと失敗します。

Docker環境の準備

Ubuntu環境にSSH接続して作業します。

Docker(Docker Engine) / Docker Composeのインストール

Dockerをインストール済みの場合はとばしてください。

DockerをインストールするサーバーにSSH接続を行い、以下のコマンドを実行する。Macの場合は、ターミナルアプリでSSH接続を行う。Windowsの場合は、TeraTermがSSH接続によく使われる。下記は、Ubuntu 20.04 / 22.04 を使用した場合。

次のコマンドを実行します。

curl -fsSL https://get.docker.com -o get-docker.sh && sudo sh get-docker.sh

sudoなしで実行できるように、作業用ユーザーをDockerグループに所属させます。

sudo groupadd docker sudo usermod -aG docker $USER

一度ログアウトし、再度ログインします。

exit

再度SSH接続を行います。

なお、GUIを使っている場合は、Linux環境を再起動しましょう。

ToolJetの起動

ToolJetのコンテナイメージを取得し、docker run コマンドを実行して、ノーコード開発ツール「ToolJet」を起動します。

次のコマンドを実行します。

実行結果

GUIありのデスクトップ画面があるUbuntuの場合は、Firefoxを起動し、http://localhost にアクセスします。もしくは仮想マシンに割り当てているホストオンリーアダプタのIPアドレスを使い、http://仮想マシンのホストオンリーアダプタのIPアドレス にアクセスします。例 http://192.168.127.10
マルチキャストDNS対応を実施している場合は、http://仮想マシンのホスト名.local でアクセスしても構いません。

ToolJetの初期設定

「Set up ToolJet」と表示されるので、「Set up ToolJet」をクリックします。

管理者ユーザー情報を登録します。日本語ではなく、英数字を使いましょう。入力後、「Continue」をクリックします。

作業スペース名を入力します。部署名などでも良いですね。こちらも日本語ではなく、英数字です。入力後、「Continue」をクリックします。

管理者が所属している会社名を入力します。こちらも日本語ではなく、英数字です。入力後、「Continue」をクリックします。

あなたの役職、従業員数などが続けて聞かれます。面倒な場合は「Skip」をクリックしましょう。

下記のように「Welcome to ToolJet!」が表示されます。これで、ToolJetで作業する準備が整いました。

ToolJetにおける最初のアプリケーションの作成

「Welcome to ToolJet!」の画面で、「Create new application」をクリックします。画面説明が始まります。「Done」と表示されるまで、繰り返し「Next」をクリックし、説明を読みます。「Done」が表示されたら「Done」をクリックします。

アプリケーション開発画面が表示されます。

画面左上の「Untitled app」をクリックすることで、アプリケーション名を変更することができます。

 

画面左上のToolJetのアイコンをクリックすることで、アプリの開発画面から、トップ画面に遷移します。

他のアプリに切り替えたり、作業中のアプリを削除するといったことができます。

ToolJetアプリとREST APIの連携

データソースとして、REST APIを追加

画面下の「Select Datasource」から、「REST API」をクリックします。もし、他のAPIと連携させたい場合は、「Add new global databasource」をクリックしましょう。

SheetDBのAPIを呼び出します。SheetDBのドキュメントに記載されているサンプルを呼び出してみましょう。
下図のように入力します。Base URL は、SheetDBのサンプルである、https://sheetdb.io/api/v1/58f61be4dda40 を使っています。入力後、「Preview」および「Create」をクリックします。「Queries」に「restapi1」として保存されます。

画面下の「Run this query on applications load ?」のトグルボタンをオンにします。その後、「>_ Run」をクリックします。

REST API を読み込んで表示する表の追加

「Table」をドラッグ&ドロップします。

表示されている「Table」の端にカーソルを合わせて、ドラッグ&ドロップで左右に動かすことで、表の幅を調整します。

画面右側の「table1」のプロパティで、「Table data」の中身を、{{queries.restapi1.data}} に書き換えます。これで、restapi1 と画面内に表示されているREST API 接続を読み込みます。

ToolJetで作ったアプリケーションの公開

画面上部のバージョン名をクリックし、「Create new version」をクリックします。

新しいバージョン名を入力し、「Create new version」をクリックします。

画面右上の「Release」をクリックします。「Release」をクリックすることで、開発状態から本番状態に移行します。

画面右上の「Share」をクリックします。

「Make application public ?」のトグルボタンをクリックします。

２つある「Copy」ボタンのうち、上の方をクリックします。「Get Shareable link for this application」と注意書きがるように、アプリケーションを利用するためのURLをコピーするという意味です。

「Copy」ボタンをクリック後、Webブラウザで新しくタブもしくは画面を開き、コピーしたURLを貼り付け、ToolJetで作ったWebアプリケーションにアクセスできるか確認しましょう。WindowsやMacから仮想マシン上のToolJetにアクセスしている場合は、localhostの部分を、仮想マシンに割り当てているホストオンリーアダプタのIPアドレスに書き換えてからアクセスしましょう。

なお、表示される表形式の部分で、下向きの矢印をクリックすると、表示されているデータをCSVファイルとしてダウンロードすることができます。ToolJetのように１つの画面に様々なAPIやデータベースの値が表示されたり、編集することができれば、DX（デジタルトランスフォーメーション）において、コマンドライン操作に不慣れな人にとっては、データの参照や取得が行いやすくなります。

SheetDB以外にも、他のREST API や もともとToolJetがデータソースとして接続対象としているクラウドサービスは多々ありますので、ToolJetのドキュメントを参考に、様々な接続を試してみても良いでしょう。

参考資料