コーディングなしで超簡単！kintoneのWebhookでGmailに通知する

はじめに

kintoneの2017年2月版の新機能であるWebhook機能を使って、Gmailと連携する具体例をご紹介します。

なぜ、kintone Webhookがすごいのか

kintone導入検討中のお客様とお話ししていると、通知を見るときは必ずkintoneにログインしないといけないの？ メールに送ったりできないの？ という質問がよくあります。

これまでは、方法はあるのですが、プログラミングによるカスタマイズが必要です。と言うと、半分以上は急激にテンションが下がっていく反応を感じていました。

しかし、後述の手順を踏めば、プログラミングの知識がなくても、製品のWebhookという機能で、カスタマイズするのと同等のことが簡単に低コストで実現できるようになります。（注：スタンダードコースの契約が必要です。）

Webhook機能の概要

Webhook とは、Webアプリケーション同士が連携するときの考え方の一つで、 Webアプリケーションでイベントが実行された際、外部サービスにHTTP で通知する仕組みです。

kintoneがWebhook機能に対応することで、アプリのレコード追加、編集、ステータスの更新を外部サービスに通知することができるようになります。

どんなメールが届くの？

kintoneのレコード追加を、今回は下記メールのイメージで通知します。

静止画は現状送ることができませんが、youtubeの動画のURLを添付すると、上のように自動的にサムネイルが表示されるようになっていました。（GmailのPC版のみ）

準備

kintoneとGmailだけの場合では完全なノーコーディングの実現が難しいため、中継にZapierというサービスを使います。Zapierを使うことで、kintoneから送るJSON形式データを連携先サービスに合わせて変換する考慮が不要になります。

用意するもの

• Gmailアカウント ：送信元に使います。
• kintoneアプリ   　：レコードを追加して通知したいアプリを用意します。フィールドは、最低限、メールのタイトルに表示したい項目と、本文に表示したい項目の文字列やドロップダウンフィールドなどを2つ以上をご用意ください。後でZapierでプレビューを確認しながら選択できるため、フィールドコードを厳密に決めたり暗記したりする必要はありません。
• Zapierアカウント：Zap（後述）を作るのに使います。数に制限はありますが無料プランのアカウントでもZapは作れます。

Zapとは？

• Zapierにおけるサービス間連携のレシピのようなものです。名前をつけて保存ができます。
• トリガーとアクションからできています。
• 今回は、「kintoneにレコードが追加されたら」をトリガー、「Gmailに通知を飛ばす」をアクションとして設定します。

Zapierアカウント作成

1. Zapierのサイトにアクセスし、「Sign Up」をクリック。
2. 必要事項を記入して「Get Started Free」をクリック。

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

Zapierとkintoneの設定手順

概要

Zapを作る設定（Make a Zap）の概要は以下のとおりです。

1. [TRIGGER]Set up this step - トリガーの設定 
• Choose App - 連携元アプリを選びます。
• Choose Trigger - 連携を起こすためのトリガーを選びます。
• Test this Step - トリガーをテストします。
2. [ACTION]Set up this step - アクションの設定

• Choose App - 連携先アプリを選びます。
• Choose Action - どんなアクションをするかを選びます。
• Set up Template - 送るデータを成形します。
• Test this Step - トリガーとアクションをテストします。

では早速レッツ Make a Zap!

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

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

Make a Zap! ～トリガー設定編～

1.「Name your Zap...」と「Add a note」に、適当なタイトルとメモを記入します。

2. 「Choose App」で下の方にある「Webhooks」を選択し、「Save + Continue」をクリックします。（注：kintoneを選択しないでください） 

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

 4. 「Set Up Options」では空欄で「Continue」をクリックします。

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

 6. kintoneに移動します。アプリの設定で、「Webhook」をクリックします。

7. Webhookの追加画面で「＋」をクリックしてStep5でコピーしたURLをペーストします。「通知を送信する条件」に「レコードの追加」をチェックして、「保存」をクリックします。
  ※ 貼り付けたURL の「https://」部分は不要のため削除してください。

8. 設定を保存し、kintoneのアプリを更新します。

9. Zapier側でいったんテストフックを受け取るため、トリガーに設定したことをテストします。今回はレコード追加です。新規レコードを入力し保存します。

10. すぐにZapierのEdit Step画面に戻り、「OK, I did this」をクリックします。

11. テストフックの受け取りが成功すると、以下のような表示になります。（タイミングによりテストが成功しない場合は、何度か試してみてください。これでトリガー側（kintone側）の設定はおわりです。

Make a Zap! ～アクション設定編～

1. アクションの設定で、「Gmail」を選択します。

2. 「Choose Action」で「Send Email」を選択して「Save + Continue」を選択します。

3. 「Choose Account」でGmailアカウントを指定します。「Connect a New Account」をクリックします。

4.  GoogleのWindowが開きます。Gmailにログインして「許可」をクリックします。

5. Zapierに戻り、「Test」を成功すると以下の画面になります。「Save + Continue」をクリックします。

6. メールテンプレートの設定画面です。宛先メールアドレス、Subject欄（メールタイトル）、Body欄（本文）を自由にカスタマイズしていきます。宛先は複数指定することが可能です。（Zapを作成後に修正するときは、またこの画面で編集ができます。）

 メールタイトル、本文等では、右上の「＋」をクリックして、kintoneのフィールドを指定できます。

今回は、以下のフィールドを利用してメールテンプレートを作成しました。

• メールタイトル：レコードのフィールドコード「Question」のValue（値）
• メール本文　　：レコードの「URL」（自動取得のURL値）と、レコードのフィールドコード「文字列__複数行__1」のValue（値）

設定が終わったら「Continue」をクリックします。

7. 最後に「Test this Step」で確認画面が出て、「Create & Continue」をクリックします。

8. 宛先のGmailにメールが届いたことを確認し、「YOUR ZAP IS」を「OFF」から「ON」に設定します。設定完了です！

おわりに

kintone Webhookを簡単に試す方法をご紹介させていただきました。2月12日のアップデート以降、ぜひ試して体感ください。

ZapierでGmail以外のサービスもkintoneと簡単に連携できることが確認できているため、kintone-他サービス連携の定番として、Zapier自体もいろいろと使い方の可能性が広がりそうです。