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

フォローする

(著者:サイボウズ 李 智恩)

Index

はじめに

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

完成イメージ

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

Webhook_D_.png

連携イメージ

_12.png

事前準備

・Monaca×kintone 来場者管理モバイルアプリ(作成方法はこちら)

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

・Zapier アカウント

・Slack Channel(ここでは「test」という名称)

Zapierのアカウント作成

1. Zapierのサイトにアクセスし、「SIGN UP FOR FREE」をクリックします。

zap.png

2. 必要事項を記入して「SIGN UP」をクリックします。
zap2.png

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

Zapierとkintoneの設定手順

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

・Zapierで「kintoneのWebhookをキャッチ」するための設定 (トリガーの設定) 

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

・「Slackに通知を送る」ための設定 (アクションの設定)

では早速、設定をしてみましょう!

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

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

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

zap4.png

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

zap7.png

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

zap5.png

4.「Choose App」で、下の方にある「Webhooks」をクリックします。
zap3.png

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

zap2.png

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

zap1.png

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

zap1-3.png

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

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

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

webhook2.png

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

webhook4.png

3. Webhookの追加画面で「+」をクリックして先ほどコピーしたURLをペーストします。

webhook13png.png

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

webhook3.png

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

webhook4.png

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

app2.png

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

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

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

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

action.png

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

action2.png

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

action8.png

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

action9.png


完成イメージがこちら▼

zapier.png

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

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

zapier2.png

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

action12.png

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

・PC版

da077afced8ec3d02ec93a4bb5586777.png

・スマホ版

slack.png

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

おわりに

いかがだったでしょうか。

今回は2017年6月のアップデートで搭載される「REST APIによる操作で、Webhookを発動する」機能を利用して、Slackに通知を送ってみました。

今回紹介したような少し複雑そうに見える仕組みも、コーディングなしで実現できるようになってきたので、みなさんもぜひ試してみたらいかがでしょうか。

 

 

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk