こんにちは。CData Software Japan リードエンジニアの杉本です。

今日はノーコードアプリケーション開発プラットフォームの Bubble と CData Connectを組み合わせて、Kintoneのデータにアクセスする方法を紹介したいと思います。

ちなみにこの記事は CData Software Advent Calendar 2020、1日目の記事です。

qiita.com

CData Connect とは？

CData Connect は、SaaS ベースで提供されるデータハブサービスです。Salesforce、NetSuite、Dynamics、Marketo、kintone など多様なSaaS、ElasticsearchやMongoDBなどのNoSQL・データストアに対してBI、アナリティクス、iPaaS、ノーコード開発プラットフォームからアクセスするための仮想エンドポイントです。

連携方法が異なるSaaS や NoSQL をMySQL、SQL Server、OData の3種類のインターフェースに仮想化することで、データ連携をシンプルに実現します。

"SQL as a Service" といっていいかもしれません。

www.cdata.com

Bubble への SaaS データ連携

Bubble は、Plugin という形式で Salesforce や Asana などいろいろなデータの連携をサポートしています。

とはいえ、今回取り上げるような Kintone や Sansan といった国産SaaSなど、対応していないデータソースも数多く存在します。

この不足をCData Connect を活用してカバーすることが可能です。

完成イメージ

この記事では以下のような kintone のアプリに登録されているデータをシームレスにBubbleで表示するUIを構成します。

以下のように Bubble 上で簡単にデータを呼び出せます。

CData Connect でkintone をOData エンドポイントを構成

CData Connect （旧CloudHub） のアカウントを取得します。CData Connect はSaaS ですので、アカウントを取得したらインストールやホスティングなどなく、ブラウザからログインすることですぐに使用開始です。

早速ブラウザからCData Connect にログインします。「DATABASE」タブから仮想データベースを設定していきます。まずは接続するデータソースのアイコンをクリックします。

データソース接続画面が開くので、データソース毎の認証情報を入力します。kintone の場合はURL、User、Password を入力することでkintone データにアクセスすることができます。

次に「ENDPOINTS」タブで、このデータをどのインターフェースのエンドポイントして公開するかを選択します。デフォルトで、OData、MySQL wire protocol、TDS(SQL Server) wire Protocol がすべて有効になっています。

必要があればアクセスを許可する信頼されたIP アドレスを指定することも可能です。

今回はOData エンドポイントとしてkintone データを公開しますので、「ODATA」 タブから公開するデータを選択します。先ほど接続時に作成したKintone2 を公開するので、データベースとして選択します。

kintone のアプリが一覧で表示されますので、利用するアプリにチェックを入れて選択します。

テーブル（アプリ）を選択したら、次はテーブルに含まれるカラム（フィールド）をどこまで公開するかをチェックします。またOData でアクセスできる処理をGET、POST、PUT、DELETE にチェックを入れることで指定します。

「API」タブでOData エンドポイントが生成されていることを確認します。CData Connect がOData エンドポイントのドキュメントを自動生成してくれます。

最後に公開したデータにアクセスできるユーザーとトークンを作成します。「USERS」タブからユーザーを作成するとトークンが生成されます。

このようにノーコードでkintone をOData エンドポイントとして公開できました。

Bubble API Connector の構成

それでは Bubble側でCData Connectに連携するための API Connector を構成します。

まず、Bubble の Pluginsタブに移動して「Add Pluings」をクリックします。

一覧の中から「API Connector」を検索し、インストールしてください。

インストール後、連携設定の画面が出てくるので、任意の名称を入力し、Header情報に「x-cdata-authtoken」と予め取得したCData Connect のTokenを設定します。

続いて、Kintoneのエンドポイントを呼び出す定義を追加します。

「GET」リクエストで、CData Connectで定義したAPIエンドポイントのURLを入力してください。

最後に「Initialize call」を行い、データ項目の型情報を調整します。

特に変更がなければデフォルトのままでOKです。

以上で Bubble から CData Connectへの連携設定は完了です。

UIを構成する

それではBubble でKintone のデータを呼び出してみましょう。

今回はExcel Likeなテーブルを表示できるUIコンポーネントでデータを呼び出してみます。

Add Pluingsで「Excel-like HandsonTable」を追加します。

あとは、このUIコンポーネントを配置して、CData ConnectをバインドするだけでOKです。

以下のGIFアニメにやり方をまとめてみました。

このような形で各種APIの認証やJSONのフォーマット、リクエスト方法に詳しくなくても、それぞれのツールから呼び出しやすい形でデータを扱えるのがCData Connectの特徴です。

今回はKintone のデータを呼び出しましたが、SalesforceでもDynamics 365でもHubSpotでもこのアプローチは変わりません。

CData Connect の利用記事

CData Connect は、他にもSAP Analytics Cloud、Amazon QuickSight、Google Data Studio など多くのNoCode サービス、クラウドBI、iPaaS から利用が可能です。是非、お試しください。

www.cdatablog.jp

www.cdatablog.jp

www.cdatablog.jp

www.cdatablog.jp

https://jp.cdata.com/blog/2020-10-14-215935

www.cdatablog.jp

www.cdatablog.jp

www.cdatablog.jp