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

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

# はじめに

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

![スクリーンショット 2020-08-15 6.45.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/585a2c0e-6c67-508f-ba1c-3908f52ab8f9.png)


# 対象

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

# 概要

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


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

こちらの[ハンズオン](https://qiita.com/Gerbera/items/c8f0409a9b335061d03b)を参考に、AppSheetで検温アプリを作成します。

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

![スクリーンショット 2020-08-14 23.16.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/ea6182e1-ce4a-965b-e777-0ed2d29eff73.png)

![スクリーンショット 2020-08-14 23.17.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/925d3886-ea14-ae53-0dad-9eb5abf0f9b7.png)



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

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

![スクリーンショット 2020-08-15 6.43.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/741cfe77-a147-d866-2c5f-e2e1cea64204.png)


# 3. AppSheetでWebhookを設定

はじめに、Integormatで Webhook URLを払い出します。下記拙稿をご覧ください。
[ChatworkのWebhook API を使って kintone にレコードを登録する方法](https://qiita.com/sy250f/items/31d3591c4d0e180bcc7f#webhooks)

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

AppSheetのWebhook設定は、Behavior → Workflowタブにあります。(2020-08-15現在)
この辺りのメニューは変更される可能性がありますので、ご注意ください。
スクリーンショットを貼っておきますが、下記の記事も参考にしてください。
[Invoking the AppSheet API from a Webhook](https://help.appsheet.com/en/articles/3463654-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
![スクリーンショット 2020-08-15 7.41.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/ba013989-ec3e-8932-137f-d68a720ee441.png)

(図7)
![スクリーンショット 2020-08-15 7.44.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/1a63db3b-e0b7-702a-4da5-c529122ac124.png)

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

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

下記拙稿をご覧ください。
[ChatworkのWebhook API を使って kintone にレコードを登録する方法](https://qiita.com/sy250f/items/31d3591c4d0e180bcc7f#kintone%E3%81%AB%E3%83%87%E3%83%BC%E3%82%BF%E7%99%BB%E9%8C%B2)

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

## 新規追加のRouter設定

![スクリーンショット 2020-08-15 8.37.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/28e49136-ee13-d8be-276c-603e51d72f5b.png)


## 更新のRouter設定

![スクリーンショット 2020-08-15 8.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/1fd38069-dcdf-1bb8-71d6-5fc933f73a32.png)

## HTTPモジュールの設定

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

### 新規追加
![スクリーンショット 2020-08-15 8.45.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/052a7348-c9ef-dbdc-77d1-b9096d4a42f5.png)

![スクリーンショット 2020-08-15 8.46.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/2f5e86ee-f7b4-a582-5a9f-0feead38824a.png)

### 更新
![スクリーンショット 2020-08-15 8.48.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/a58352fe-902a-be49-2901-6bf38c99bb13.png)


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

![スクリーンショット 2020-08-15 8.48.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/be176986-b5c7-d26c-6ed3-853672063a7c.png)

# AppSheetからデータ登録

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

## AppSheetからデータ登録
![スクリーンショット 2020-08-15 6.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/88b5f5a6-f5ad-2eac-6fe4-525fa4f415ca.png)

## IntegromatでRun onceを押下 → Process existingを押下
![スクリーンショット 2020-08-15 6.51.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/58a02568-32ea-f8be-c909-708a1b928b9a.png)

## Integromatの実行

Integromatが実行されます
![スクリーンショット 2020-08-15 6.51.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/887ee813-59da-e1a7-d5fe-d6c604f5de2d.png)

## Integromatの実行の確認

HTTPモジュールのログを確認
![スクリーンショット 2020-08-15 6.51.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/4c8bfa4f-970b-e1f9-a974-1d9937d0e534.png)
![スクリーンショット 2020-08-15 6.52.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/a3973809-7c07-a0eb-acc4-a764811ffcbb.png)

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

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

![スクリーンショット 2020-08-15 6.53.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/dca672bc-1795-7de6-49da-2869b6903703.png)

# AppSheetのデータを更新

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

## AppSheetのデータを修正

AppSheetの修正画面から36.33を、
![スクリーンショット 2020-08-15 6.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/dd1aa2c6-efaf-3d9b-b759-78a0b871f427.png)

36.28に変更してSAVE
![スクリーンショット 2020-08-15 6.55.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/854def55-71f5-80f1-56c6-39d788fcb9e0.png)

36.28に変更されました
![スクリーンショット 2020-08-15 6.55.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/9961731f-3fc5-ca0c-ec8d-8246dedf7966.png)

## Integromatを開いて、Run once → Process existing を押下
![スクリーンショット 2020-08-15 6.56.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/e1853253-9828-4725-fb8f-200a347329fb.png)

## Integromatの実行

Integromatが実行されます
![スクリーンショット 2020-08-15 6.56.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/bd5e90c7-6e59-5302-581b-0742887dbe97.png)

## Integromatの実行結果の確認

HTTPモジュールのログを確認
![スクリーンショット 2020-08-15 6.56.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/d2796096-f16d-c87b-0229-b9bcea8ee9bb.png)

![スクリーンショット 2020-08-15 6.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/18437306-e7b5-e2d6-09b1-9d7d4ae704ac.png)

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

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

![スクリーンショット 2020-08-15 6.59.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/d974bf63-99f5-69a6-7431-75e028830c34.png)

## まとめ

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