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

目次

はじめに

kintone の Webhook 機能を使って、Gmail と連携する具体例を紹介します。

なぜ kintone Webhook がすごいのか

kintone 導入検討中のお客様から「通知を見るときは必ず kintone にログインしないといけないの?」や「メールに送れないの?」という質問をよくもらいます。
そして、プログラミングによるカスタマイズが必要なことをお伝えすると、急激にテンションが下がっていく様子でした。

しかし、kintone の Webhook 機能を使用すればプログラミングの知識がなくてもカスタマイズと同等のことが簡単に低コストで実現できます。
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のサイト (External link) にアクセスし、「Sign Up」をクリック
  2. 必要事項を記入して「Get Started Free」をクリック

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

Zapier と kintone の設定手順

概要

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

  • [TRIGGER]Set up this step - トリガーの設定

    • Choose App - 連携元アプリを選びます。
    • Choose Trigger - 連携を起こすためのトリガーを選びます。
    • Test this Step - トリガーをテストします。
  • [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 の Value と 文字列__複数行__1 の Value

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

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

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

おわりに

kintone Webhook を簡単に試す方法を紹介しました。ぜひ試してみてください。
Zapier で Gmail 以外のサービスも kintone と簡単に連携できるため、kintone と他サービス連携の定番として Zapier 自体も使い方の可能性が広がりそうです。