ChatworkのWebhook API を使って kintone にレコードを登録する方法

kintone は APIが公開されていることで、外部のクラウドサービスと連携することが可能です。
今回は Chatwork の特定のチャットルームにメッセージを書き込んだ時に kintone のアプリにレコードを登録する方法についてまとめたいと思います。

# 前提条件
コードは書きませんが、REST API の知識がある事が前提です。もちろんJSONとか。

* kintoneアプリ作成の知識がある方
* kintone REST API についての知識がある方
* kintone のアプリ作成権限があること
* Chatworkを利用されている方
* [Chatwork API](https://developer.chatwork.com/ja/) についての知識がある方
* ChatworkのAPI設定の権限がある方


# Chatworkのメッセージを kintone にレコード登録する方法 
いくつかのパターンをまとめます。

1. ChatworkのWebhookを利用して外部のサーバーを経由してkintoneにレコード登録する方法
2. Chatworkのbotからメッセージの書き込みをトリガーにkintoneにレコード登録する方法
3. Chatworkとkintoneの連携プラグインを利用する方法
4. IFTTT,Zapier等の自動化サービスを利用する方法

1.〜3.についてはたくさんの事例がありますので、各自調べていただくとして今回は4.の自動化ツールに [Integromat](https://www.integromat.com/) を使う方法を説明したいと思います。

データの流れのイメージは、
[Chatworkのルームを表示] → [Chatworkにメッセージ登録] → [Chatwork Webhook（トリガー）発火] → 
 [Integromat Webhookでメッセージデータ受信] → [Integromat HTTP でkintoneレコード登録のAPIを叩く] → [kintoneレコード登録]
です。

# 準備
事前準備です。

* Chatworkを開いておきます
* kintoneにログインしておきます

## Chatworkの設定

### チャットルームの作成

Chatworkにテスト用のルームを作成することにします。
ルーム名は何でもOKです。Webhookの登録にルームIDが必要となりますのでメモっておきます。
もちろん既存のルームでもOKです。

赤の囲み部分がルームIDです。
<img width="761" alt="スクリーンショット 2020-04-14 21.30.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/04cb6010-be33-1175-5429-1179241775d6.png">

### Webhookの設定
ChatworkにはWebhookが実装されていて、チャットルームへのメッセージ投稿をトリガーに処理を行うという事が出来ます。

設定画面です。
<img width="1040" alt="webhookスクリーンショット 2020-04-14 21.30.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/b6f615df-3174-6e6c-17b2-58422fe2777b.png">

赤囲みにチャットルームのルームIDをセットします。
[Webhook URL]には Webhookを処理するサーバーのURLをセットします。
こちらは後ほど説明する Integromat の Webhook の情報をセットします。
今回のWebhookイベントは、メッセージ作成時に設定しておきます。

---
# Integromat でシナリオの作成

Integromat で処理するフローはシナリオと言います。
今回は、[Webhook]→[HTTP]の流れでシナリオを作成します。

完成するとこんな感じです。
<img width="1047" alt="シナリオスクリーンショット 2020-04-14 22.37.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/77c42ac4-1e27-f623-4791-7a80dbabfddd.png">

## Webhooks
Integormatには、Chatwork用のサービスが登録されてないので、カスタムWebhookを使って設定していきます。
ちょっと長くなりますが、スクリーンショット多めでいきます。

新規シナリオ→サービスから Webhooks を選んで次へ
<img width="1171" alt="スクリーンショット 2020-04-17 9.18.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/f3692a3a-e85e-1c54-c747-620994f7d824.png">

シナリオのスタートを決めます。？マークをクリック
<img width="1072" alt="01 スクリーンショット 2020-04-18 8.56.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/0adeaa72-3bb5-ab28-4ca2-a2b8bbf4307c.png">

Webhooksを選んで、今回はトリガーにCustom webhookを選択
<img width="677" alt="03 スクリーンショット 2020-04-18 8.57.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/192655be-7927-5689-de8e-4c2041ebad0c.png">

Addボタン押下→Webhook nameは何でも良いので、名前をつけてやりましょう。
Saveを忘れずに。
<img width="849" alt="06 スクリーンショット 2020-04-18 8.57.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/00e65ebb-e563-50b9-5012-67918625bd59.png">

Webhooksに戻ると、IntegromatからURLが払い出されるので、Copy address to clipboardを押します。
<img width="667" alt="09 スクリーンショット 2020-04-18 8.58.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/27390eaa-0424-bc87-60c9-c33bcbb0fae0.png">

ここで、ChatworkのWebhookの設定に戻って、Webhook URLに貼り付けます。
<img width="998" alt="14 スクリーンショット 2020-04-18 9.01.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/7be1d8f0-5906-42c2-b778-10f775afc220.png">

## ここまでの確認

ここまででどうなってるかを確認しましょう。

1. Chatworkのルームを作成しました。
2. ChatworkにWebhookを設定しました。
3. Integromatにシナリオを作成しました。
4. シナリオにカスタムWebhookを追加しました。
5. カスタムWebhookから払い出されたURLをChatworkのWebhookに設定しました。

流れでいうと、1.〜4.まで設定できました。
[1.Chatworkのルームを表示] → [2.Chatworkにメッセージ登録] → [3.Chatwork Webhook（トリガー）発火] → 
 [4.Integromat Webhookでメッセージデータ受信] → [5.Integormat HTTP でkintoneレコード登録のAPIを叩く] → [6.kintoneレコード登録]

## Chatwork投稿 → Integromat Webhookデータ受信テスト
ここまでをテストしてみます。
問題無ければIntegromatのカスタムWebhookログで投稿内容が確認できると思います。

作成したIntegromatのシナリオの左下[Run once]をクリック
<img width="536" alt="25スクリーンショット 2020-04-18 12.15.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/dfb774d3-8ea5-3c61-0f42-88f62884ada6.png">

作成したChatworkのルームで適当に書き込んでみます。
<img width="655" alt="27スクリーンショット 2020-04-18 12.17.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/c10e7ed9-77dd-9dc4-12e1-a61b20f28eb4.png">

IntegromatのWebhookを確認します。
[The scenario run was completed.]が出てたらOK。
<img width="636" alt="26スクリーンショット 2020-04-18 12.16.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/820cad1a-d698-e325-41e9-725bae619491.png">

リクエストを確認します。
<img width="967" alt="29 スクリーンショット 2020-04-18 12.20.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/d53a4954-f6bc-d259-c145-763b512f71b5.png">

## Chatwork API
Chatwork APIのWebhookリクエスト情報とIntegromatのWebhookで受け取った情報を確認してみます。
[Chatwork APIのWebhookリクエスト情報](https://developer.chatwork.com/ja/webhook.html)

IntegromatのWebhookの受信情報
ChatworkのWebhookのリクエストボディのサンプルと比較すると良いかと思います。
<img width="412" alt="30 スクリーンショット 2020-04-18 12.24.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/dac2f6bf-7fda-4d61-3f79-2a2842458f84.png">

# kintoneにデータ登録

いくつかやり方はありますが、今回はノーコードらしくOAuthでkintoneに認証してレコードを登録していきます。

## kintone接続までの流れ

1. kintoneアプリ作成
2. kintoneにIntegromatのOAuthクラインアント情報を登録
3. IntegromatにHTTPのモジュールを追加
4. IntegromatのHTTPモジュールにOAuthを設定
5. Integromatにkintoneレコード登録の設定

## 1. kintoneアプリ作成
下記のように設定しています。

<img width="874" alt="31 スクリーンショット 2020-04-18 13.47.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/66dcd6c9-61aa-f113-86f1-c29fa219f01b.png">

## 2. kintoneにIntegromatのOAuthクラインアント情報を登録
下記を参考に設定して下さい。

* [OAuthクライアントの使用](https://developer.cybozu.io/hc/ja/articles/360015955171)
* [How to connect Integromat to any web service that uses OAuth2 authorization](https://support.integromat.com/hc/en-us/articles/115003864294)


## 3. IntegromatにHTTPのモジュールを追加

<img width="726" alt="20 スクリーンショット 2020-04-18 9.03.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/bce3815e-01ea-f3e9-0b8a-66dec5b1a3aa.png">


## 4. IntegromatのHTTPモジュールにOAuthを設定
[Make a OAuth 2.0 request]を選択します。

<img width="701" alt="22 スクリーンショット 2020-04-18 9.04.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/118848a4-29c9-fd9c-6318-c1c75e92a97c.png">

[Add]を選択してOAuthの接続設定をします。
設定は下記を参照。
[OAuthクライアントの使用](https://developer.cybozu.io/hc/ja/articles/360015955171)
[kintoneに登録するモジュールの設定](https://qiita.com/sy250f/items/780cd855870ade176449#kintone%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%AE%E8%A8%AD%E5%AE%9A)

## 5. Integromatにkintoneレコード登録の設定
kintoneにレコードを登録する設定をします。

下記を参考に設定します。
* https://support.integromat.com/hc/en-us/articles/360006249313-Webhooks
* https://developer.cybozu.io/hc/ja/articles/202166160#step1
* https://developer.cybozu.io/hc/ja/articles/201941754

この辺りは kintone REST API の知識があれば問題なく設定できるかと思います。

<img width="548" alt="33 スクリーンショット 2020-04-18 23.31.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/c5931c1a-014c-91da-a225-d5d969f26886.png">

[Run once]を押してから、Chatworkのルームにメッセージを入力します。

Integromatへのリクエスト情報と戻り値を確認。
<img width="666" alt="34 スクリーンショット 2020-04-18 23.39.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/243c06cc-7b8f-5d74-f44d-26c735361a4c.png">

kintoneにレコードが登録されていることを確認します。
<img width="677" alt="35 スクリーンショット 2020-04-18 23.43.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/e1a7bf0f-ffc8-7602-9873-153ae19342b8.png">

後は、Integormatの設定でスケジュールを設定することで、Chatworkのメッセージ入力都度kintoneにレコード登録することが出来ます。

---

# 参考

* https://developer.chatwork.com/ja/
* https://developer.chatwork.com/ja/webhook.html
* https://developer.cybozu.io/hc/ja/articles/202166160#step1
* https://developer.cybozu.io/hc/ja/articles/360015955171
* https://support.integromat.com/hc/en-us/articles/360006249313-Webhooks
* https://developer.cybozu.io/hc/ja/articles/201941754


# その他サービス連携

* https://go.chatwork.com/ja/integrate/ifttt.html
* https://help.chatwork.com/hc/ja/articles/215843117--Chatwork%E3%83%96%E3%83%AD%E3%82%B0-Zapier%E9%80%A3%E6%90%BA%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%93%E3%81%A8
* https://blog-ja.chatwork.com/2015/09/8zapier.html

---
# あとがき

カスタムWebhook最強。設定を理解すれば他にも色々なサービスと繋げられると思います。
後、Qiitaへの投稿が99本まで来ました。意外と時間が掛かった。

# 追記
2021-05-20

## Chatworkの日時データの変換

ChatworkのWebhookで送信されるWebhookイベントオブジェクトにある、例えば"send_time"（メッセージの送信時刻（エポック秒））のような日時情報を取り扱う方法は2つあります。

* Chatwork APIで利用される日時データ形式は、エポック秒（UNIXタイム）になっています。

### 1 Integromatで変換する

parceDate関数やformatDate関数を利用してUNIXタイムを変換することができます。

```
{
    "app": "67",
    "record": {
        "title": {
            "value": "{{1.webhook_event.room_id}} {{formatDate(parseDate(1.webhook_event.send_time; "X"); "YYYY-MM-DD HH:mm:ss"; "Japan")}}"
        },
        "subject": {
            "value": "{{1.webhook_event.body}}"
        },
        "send_time": {
            "value": {{1.webhook_event.send_time}}
        }
    }
}
```


https://support.integromat.com/hc/en-us/articles/360005771793-Date-Time-Functions


### 2 kintoneで変換する

kintone側では数値フィールドで受け取って、計算フィールドを使って変換します。
計算式のフォーマットに日時を設定したり、DATE_FORMAT関数を使ってよしなに表示すると良いでしょう。

![スクリーンショット 2021-05-20 7.32.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214523/87633d28-9ca5-6e2d-6c7a-9305a162024e.png)

https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc/autocalc_format.html

https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc/date_format.html