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 に通知を送ってみました。
今回紹介したような少し複雑そうに見えるしくみも、コーディングなしで実現できるようになってきたので、みなさんもぜひ試してみてはいかがでしょうか。