ローコードツールのappsmith を使って、JSON データと連携したアプリを作る

こんにちは！プロダクトスペシャリストの菅原です。

appsmith は、社内ツールの作成に特化したオープンソースのローコードツールです。ドラッグアンドドロップや簡単なコーディングを組み合わせてアプリを作成できます。さらにCData Connect Server と組み合わせることで、JSON を含む150種類以上のデータソースをアプリに統合できます。

JSON データの仮想データベースを作成する

CData Connect Server は、シンプルなポイントアンドクリックインターフェースを使用してデータソースに接続し、データを取得します。まずは、右側のサイドバーのリンクからConnect Server をインストールしてください。

1. Connect Server にログインし、「CONNECTIONS」をクリックします。
2. 一覧から「JSON」を選択します。
3. JSON に接続するために必要な認証プロパティを入力します。

   データソースへの認証については、ヘルプドキュメントの「はじめに」を参照してください。CData 製品は、JSON API を双方向データベーステーブルとして、JSON ファイルを読み取り専用ビュー（ローカル ファイル、一般的なクラウドサービスに保存されているファイル、FTP サーバー）としてモデル化します。HTTP Basic、Digest、NTLM、OAuth、FTP などの主要な認証スキームがサポートされています。詳細はヘルプドキュメントの「はじめに」を参照してください。

   URI を設定して認証値を入力したら、DataModel を設定してデータ表現とデータ構造をより厳密に一致させます。

   DataModel プロパティは、データをどのようにテーブルに表現するかを制御するプロパティで、次の基本設定を切り替えます。

   • Document（デフォルト）：JSON データのトップレベルのドキュメントビューをモデル化します。CData 製品 は、ネストされたオブジェクト配列を集約されたJSON オブジェクトとして返します。
   • FlattenedDocuments：ネストされた配列オブジェクトと親オブジェクトを、単一テーブルに暗黙的に結合します。
   • Relational：階層データから個々の関連テーブルを返します。テーブルには、親ドキュメントにリンクする主キーと外部キーが含まれています。

   リレーショナル表現の設定についての詳細は、ヘルプドキュメントの「JSON データのモデリング」を参照してください。また、以下の例で使用されているサンプルデータも確認できます。データには人や所有する車、それらの車に行われたさまざまなメンテナンスサービスのエントリが含まれています。

   Amazon S3 内のJSON への接続

   URI をバケット内のJSON ドキュメントに設定します。さらに、次のプロパティを設定して認証します。

   • AWSAccessKey：AWS アクセスキー（username）に設定。
   • AWSSecretKey：AWS シークレットキーに設定。

   Box 内のJSON への接続

   URI をJSON ファイルへのパスに設定します。Box へ認証するには、OAuth 認証標準を使います。 認証方法については、Box への接続 を参照してください。

   Dropbox 内のJSON への接続

   URI をJSON ファイルへのパスに設定します。Dropbox へ認証するには、OAuth 認証標準を使います。 認証方法については、Dropbox への接続 を参照してください。ユーザーアカウントまたはサービスアカウントで認証できます。ユーザーアカウントフローでは、以下の接続文字列で示すように、ユーザー資格情報の接続プロパティを設定する必要はありません。 URI=dropbox://folder1/file.json; InitiateOAuth=GETANDREFRESH; OAuthClientId=oauthclientid1; OAuthClientSecret=oauthcliensecret1; CallbackUrl=http://localhost:12345;

   SharePoint Online SOAP 内のJSON への接続

   URI をJSON ファイルを含むドキュメントライブラリに設定します。認証するには、User、Password、およびStorageBaseURL を設定します。

   SharePoint Online REST 内のJSON への接続

   URI をJSON ファイルを含むドキュメントライブラリに設定します。StorageBaseURL は任意です。指定しない場合、ドライバーはルートドライブで動作します。 認証するには、OAuth 認証標準を使用します。

   FTP 内のJSON への接続

   URI をJSON ファイルへのパスが付いたサーバーのアドレスに設定します。認証するには、User およびPassword を設定します。

   Google Drive 内のJSON への接続

   デスクトップアプリケーションからのGoogle への認証には、InitiateOAuth をGETANDREFRESH に設定して、接続してください。詳細はドキュメントの「Google Drive への接続」を参照してください。

4. 「 Test Connection」をクリックします。
5. 「Permission」->「 Add」とクリックし、適切な権限を持つ新しいユーザー(または既存のユーザー) を追加します。

仮想データベースが作成されたら、appsmith を含むお好みのクライアントからJSON に接続できるようになります。

接続の設定が完了したら、appsmith からJSON データに接続できるようになります。

appsmith でのデータソース設定

それではappsmith の画面で、CData Connect Server の接続設定をしていきましょう。

1. 画面の左側にある「Datasources」の「+」をクリックします。
2. appsmith から接続できるデータソースが表示されるので、「Microsoft SQL Server」を選択します。
3. CData Connect Server のTDS エンドポイント、接続ユーザー、パスワードを設定して、「TEST」をクリックして接続確認を行います。正常に接続できたら「SAVE」をクリックして保存します。
• Host Address：CONNECT_SERVER_URL
• Port：1433
• Database Name：Connect Servere で設定したデータソース名（Salesforce1 など）
• Username：Connect Server のユーザー名
• Password：Connect Server のパスワード

appsmith でのクエリ実行

以上でデータソースへの接続設定が完了しました。次に、SQL クエリを追加して実際にデータソースからデータを取得してみましょう。

1. 作成したデータソースの画面で、「NEW QUERY」をクリックします。
2. 今回はデータを取得したいので、「SELECT」を選択します。
3. SQL を指定する際には、CData Connect Server の機能である「Data Explorer」を使用することで、事前に取得したいデータを確認できます。必要に応じて利用してみてください。
4. 発行するクエリを作成したら、appsmith 画面に戻り、クエリを入力して「RUN」をクリックします。
5. 無事にデータが取得できたら、あとはデータを使用したい「Page」に取得した「Table」を表示させるよう設定します。
6. これで、appsmith からCData Connect Server と連携して、JSON のデータを取得することができました！いつも利用している業務データを使って、簡単にアプリが作れちゃいますね。

おわりに

この記事ではローコードツールのappsmith からCData Connect Server に接続して、JSON のデータを取得しました。CData Connect Server では、JSON 以外の150種類以上のデータソースに同様の方法で連携可能です。30日間無償トライアル を利用して、appsmith からSaaS、ビッグデータ、NoSQL データソースへのSQL アクセスをお試しください！