Tips

【REST API × Webhook】お客様が来場した時、Slackに通知を送ってみよう！

著者名：李 智恩（サイボウズ株式会社）

目次

はじめに

固定リンクがコピーされました

今回は、REST APIにより自動で追加されたレコードをきっかけにWebhookを発動させて、Slackに通知を送ってみたいと思います。
kintoneとMonacaを連携してみよう (来場者管理アプリ編) で作成した「来場者管理アプリ」を活用します。
ポイントは2017年6月版アップデートで新しく搭載される「REST APIにより追加されたレコードで、Webhookを飛ばす機能」を利用するところです。
ここに注意しながら、設定を進めてみましょう。

完成イメージ

固定リンクがコピーされました

お客様がお持ちのQRコードをMonacaの「来場者管理アプリ」で読み込むだけで、kintoneには自動的にレコードが追加されて、さらに、そのタイミングでSlackにはお客様のご来場をお知らせする通知が届きます。

連携イメージ

固定リンクがコピーされました

下準備

固定リンクがコピーされました

  • Monaca × kintone来場者管理モバイルアプリ
    作成方法は kintoneとMonacaを連携してみよう (来場者管理アプリ編) を参照してください。

  • Monaca × kintone来場者管理モバイルアプリと連動しているkintoneアプリ

  • Zapierアカウント

  • Slack Channel
    今回は「test」というChannelに通知を送信します。

Zapierのアカウント作成

固定リンクがコピーされました

  1. Zapierの公式サイト (External link) にアクセスし、「Sign UP」をクリックします。
  2. 必要事項を記入して「Get Started Free」をクリックします。

ZapierからWelcomeメールが送られてきて、無料アカウント作成完了です。

Zapierとkintoneの設定手順

固定リンクがコピーされました

Zapierのアカウント作成が完了したら、kintoneにレコードが追加された時、Slackへ通知を送るよう設定します。
必要な設定は大きく3つです。

  • Zapierで「kintoneのWebhookをキャッチ」するための設定（トリガーの設定）
  • kintoneアプリの設定画面でSlackに通知を送る「タイミング」の設定（kintone Webhookの設定）
  • 「Slackに通知を送る」ための設定（アクションの設定）

ではさっそく、設定をしてみましょう！

Zapierでkintoneの「Webhookをキャッチ」するための設定手順

固定リンクがコピーされました

まず最初にZapierでkintoneの「Webhookをキャッチ」するためにトリガーを設定します。

  1. サインアップ後の画面で、「Create Zap」をクリックします。

  2. Dashboardの画面が表示されます。

  3. 「Name your Zap」にタイトルを入力します。

  4. 「Choose App」で、画面下部の「Webhooks」をクリックします。

  5. 「Choose Trigger」で「Catch Hook」を選択し、「Save + Continue」をクリックします。

  6. 「Set Up Options」では何も入力せずに「Continue」をクリックして次に進みます。

  7. 「Test this Step」で、Zapierに送る先のURLが生成されるため、それを「Copy to clipboard」でコピーします。

kintoneアプリの設定画面でSlackに通知を送る「タイミング」の設定

固定リンクがコピーされました

Zapierで送る先のURLをコピーしたら、ここからはkintoneアプリのWebhookの設定に移動して、Slackに通知を送る「タイミング」を設定します。

  1. Monaca × kintone来場者管理モバイルアプリの作成時に作った「kintoneの来場者管理アプリ」で、「アプリの設定」に入り、「Webhook」を選択します。

  2. その後表示された画面で、「＋」ボタンをクリックします。

  3. Webhookの追加画面で先ほどコピーしたURLをペーストします。

  4. 同じ画面で「通知を送信する条件」>「レコードの追加」にチェックをし、「保存」をクリックします。
    今回はREST APIによりレコードが自動で追加されたタイミングで、Slackに通知を送りたいので、上記のとおり設定します。

  5. 「保存」を押した後表示された画面で、「アプリの設定に戻る」をクリックします。

  6. 「アプリを更新」をクリックし、アプリを更新します。

  7. アプリを更新して一覧画面に遷移したら、Zapier側がkintoneにレコード登録されたタイミングでちゃんとWebhookをキャッチしているかを確認したいので、試しにレコードをひとつ追加します。

「Slackに通知を送る」ための設定

固定リンクがコピーされました

kintoneのアプリでWebhookの設定が完了したら、先ほど作成中だった、Zapierの方に戻ります。
ここからはSlackに通知を送るためのアクションの設定を進めます。

  1. Zapierのアクションの設定「2. Set up this step」で、「Choose App」>「Slack」を選択します。

  2. 今回はtestというChannelに通知を送りたいので、「Choose Action」で「Send Channel Message」を選択して、右下の「Continue」をクリックします。

  3. 「Choose Account」で「Connect a New Account」をクリックするとポップアップ画面が表示されます。
    「your-team-url」にSlackのteam URLを入力して、Slackのアカウントを登録します。
    登録が完了したら、「Save + Continue」をクリックします。

  4. 「Set Up Template」で通知を送るSlackの「Channel」を選択、または入力して、次の「Message Text」に通知で送る内容を入力します。
    このとき、「Message Text」の入力欄の右側にある「＋」ボタンをクリックすると、通知の内容にkintoneアプリのフィールドの値を追加できます。

    「Set Up Template」設定の完成イメージは次のとおりです。

    入力が完了したら、右下の「Continue」をクリックします。

  5. 「Test this Step」で設定内容を確認します。
    間違いがなければ、「Create & Continue」をクリックします。

    testが完了したら、次のような画面が表示されます。

  6. Zapierの画面を開いたまま、Slackを開いて先ほどZapierのアクションで設定した内容と同じ内容の通知が届いたら、成功です！

    PC版

    スマホ版

  7. 動作確認が完了したら、先ほどのZapierの画面で「finish」をクリックします。
    その後、表示された画面でこの設定を利用し続けるために、「YOUR ZAP IS」を「OFF」から「ON」に設定を変更すると、すべての設定完了です。

おわりに

固定リンクがコピーされました

いかがだったでしょうか。
今回は2017年6月のアップデートで搭載される「REST APIによる操作で、Webhookを発動する」機能を利用して、Slackに通知を送ってみました。
今回紹介したような少し複雑そうに見えるしくみも、コーディングなしで実現できるようになってきたので、みなさんもぜひ試してみてはいかがでしょうか。