ノーコードアプリ開発プラットフォーム Bubble の 連携先サービスを CData Connect で拡張:kintone 編

f:id:sugimomoto:20201201104339p:plain

こんにちは。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" といっていいかもしれません。

f:id:kuwazzy:20201106112232p:plain

www.cdata.com

Bubble への SaaS データ連携

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

f:id:sugimomoto:20201201104431p:plain

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

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

完成イメージ

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

f:id:sugimomoto:20201201105049p:plain

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

https://cdatajbuilds.s3-ap-northeast-1.amazonaws.com/CDataBlog/bubble.gif

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

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

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

f:id:cdatasoftware:20201014212512p:plain

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

f:id:cdatasoftware:20201014212847p:plain

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

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

f:id:cdatasoftware:20201014212922p:plain

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

f:id:cdatasoftware:20201014213255p:plain

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

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

f:id:cdatasoftware:20201102170220p:plain

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

f:id:cdatasoftware:20201102170708p:plain

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

f:id:cdatasoftware:20201014212650p:plain

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

Bubble API Connector の構成

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

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

f:id:sugimomoto:20201201104513p:plain

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

f:id:sugimomoto:20201201104521p:plain

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

f:id:sugimomoto:20201201104529p:plain

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

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

f:id:sugimomoto:20201201104536p:plain

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

f:id:sugimomoto:20201201104544p:plain

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

f:id:sugimomoto:20201201104550p:plain

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

UIを構成する

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

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

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

f:id:sugimomoto:20201201104555p:plain

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

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

https://cdatajbuilds.s3-ap-northeast-1.amazonaws.com/CDataBlog/bubble.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://www.cdata.com/jp/blog/2020-10-14-215935

www.cdatablog.jp

www.cdatablog.jp

www.cdatablog.jp

トライアル・お問い合わせ

関連コンテンツ