ノーコード開発 AppSheet と kintone を Integromat で連携して見た

Googleのノーコード開発サービス AppSheet と ローコードサービスの kintone を、ノーコードサービスの Integormatで連携して見ました。

はじめに

ノーコード・ローコード開発の勉強会「Play (No) Codes! #6」で紹介されていた「AppSheetで検温アプリを作る」ハンズオン資料を元にkintoneと繋げて見ました。
kintone連携には、AppSheetのWebhookとIntegromatを利用しています。

対象

• ノーコード・ローコードに興味がある
• プログラム(は書けるけど)書かない
• REST API とか、JSONとか、HTTPとか、Webhookとか一応どんなものか理解していて自分で使ったことがある

概要

1. AppSheetで検温アプリを作成
2. kintoneで検温アプリのデータを保存するアプリを作成
3. AppSheetでWebhookを設定
4. IntegromatでWebhookを受けてkintoneにレコード追加・変更の設定をする

1. AppSheetで検温アプリを作成

こちらのハンズオンを参考に、AppSheetで検温アプリを作成します。

kintoneと連携する為のキーカラムを追加します。
今回は、カラム名：IDを追加して、IDにはAppSheetの内部キーの [_RowNumber]をセットします。

2. kintoneで検温アプリのデータを保存するアプリを作成

日時・体温のフィールドとデータの更新用のキーフィールドとして、[sheetRowNumber]フィールドを追加しています。

3. AppSheetでWebhookを設定

はじめに、Integormatで Webhook URLを払い出します。下記拙稿をご覧ください。
ChatworkのWebhook API を使って kintone にレコードを登録する方法

Integormatから払い出された(サーバー側)Webhook URLをAppSheetの(クライアント側)Webhookに設定します。

AppSheetのWebhook設定は、Behavior → Workflowタブにあります。(2020-08-15現在)
この辺りのメニューは変更される可能性がありますので、ご注意ください。
スクリーンショットを貼っておきますが、下記の記事も参考にしてください。
Invoking the AppSheet API from a Webhook

AppSheetのWebhookクライアントの設定

1. Behavior → Workflowタブ 選択
2. Add New Workflow Rule 押下
3. Reaction から Webhook 押下
4. Rule name は適当でOK
5. WHEN THIS HAPPENS 押下
6. Update event から、今回は新規作成と更新時にWebhookイベントを通知したいので、[ADDS_AND_UPDATES]を選択(図6)
7. DO THIS 押下(図7)
8. WEBHOOK 押下
9. Preset → Custom 選択
10. URLにIntegromatから払い出されたサーバー側のURLを入力
11. HTTP Verb → Post 選択
12. HTTP Content Type → JSON 選択

図6

(図7)

右上のSAVEを押下して設定を保存します。

4. IntegromatでWebhookを受けてkintoneにレコード追加・変更の設定をする

下記拙稿をご覧ください。
ChatworkのWebhook API を使って kintone にレコードを登録する方法

今回はIntegromatの WebhookとHTTPモジュールの間に、Routerを入れて新規追加と更新を AppSheetのJSONレコードの UpdateModeの値で振り分けています。(下記のスクリーンショットを参照)

新規追加のRouter設定

更新のRouter設定

HTTPモジュールの設定

HTTPモジュールの設定は下記の通り

新規追加

更新

更新のキーにはAppSheetの内部キー[_RowNumber]をセットしたIDカラムを利用ます。

AppSheetからデータ登録

AppSheetの検温アプリからデータを登録して見ます。

AppSheetからデータ登録

IntegromatでRun onceを押下 → Process existingを押下

Integromatの実行

Integromatが実行されます

Integromatの実行の確認

HTTPモジュールのログを確認

kintoneの検温アプリでデータを確認

IntegromatのHTTPモジュールから、kintoneにレコードが登録されます。

AppSheetのデータを更新

先程登録した体温のデータを修正して、データを更新します。

AppSheetのデータを修正

AppSheetの修正画面から36.33を、

36.28に変更してSAVE

36.28に変更されました

Integromatを開いて、Run once → Process existing を押下

Integromatの実行

Integromatが実行されます

Integromatの実行結果の確認

HTTPモジュールのログを確認

kintoneの検温アプリでデータの更新確認

IntegromatのHTTPモジュールから、kintoneのレコードが更新されます。

まとめ

AppSheetとkintoneのアプリ間をIntegromatを使って繋げて見ました。

Integromatは繋げたい対象サービスのテンプレートが無い場合は、モジュールをカスタマイズすることで、だいたいのサービスと繋げられるのではと感じています。

今回使ったIntegromatのRouterを調べると、他にもいろいろ出来ることがありそうなので、どこかで使いたいなと思います。

参考

AppSheet

• AppSheet製品 https://www.appsheet.com/
• AppSheetヘルプ https://help.appsheet.com/en/

kintone

• サイボウズ開発 https://developer.cybozu.io/hc/ja
• レコードの登録 https://developer.cybozu.io/hc/ja/articles/202166160#step1
• レコードの更新 https://developer.cybozu.io/hc/ja/articles/201941784#step1

Integromat

• Integromat製品 https://www.integromat.com/
• Integromatヘルプ https://support.integromat.com/hc/en-us
• Integromat Webhooks https://support.integromat.com/hc/en-us/articles/360006249313-Webhooks
• Integromat HTTPモジュール https://support.integromat.com/hc/en-us/articles/360006248533-HTTP
• Integromat Router https://support.integromat.com/hc/en-us/articles/360001988754-Router