Tips

コーディングなしで超簡単！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 for free」をクリック

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

Zapierとkintoneの設定手順

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

概要

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

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

  • Trigger

    • Setup
      • App：連携元アプリを選択する。
      • Trigger event：連携を起こすためのトリガーを選択する。
    • Configure：データを成形する。
    • Test：トリガーをテストする。

  • Action

    • Setup
      • App：連携先アプリを選択する。
      • Action event：どんなアクションをするかを選択する。
      • Account：連携先アプリにログインする。
    • Configure：データを成形する。
    • Test：トリガーとアクションをテストする。

ではさっそくレッツMake a Zap!

手順

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

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

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

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

  1. 「Trigger > Webhooks」の順にクリックします。

  2. 「Trigger event > Catch Hook」を選択し、「Continue」をクリックします。

  3. 「Pick off a Child Key」は空欄で「Continue」をクリックします。

  4. 「Your webhook URL」で、Zapierに送る先のURLが生成されるため、「Copy」をクリックしクリップボードにコピーします。

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

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

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

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

  9. Zapierの画面に戻り、「Test trigger」をクリックします。

  10. テストフックを受け取り、「request A」をクリックして次のような表示になれば成功です。
    タイミングによりテストが成功しない場合は何度か試してみてください。
    これでトリガーとなるkintoneの設定はおわりです。

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

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

  1. 「Action > Gmail」の順にクリックします。

  2. 「Action event」欄で「Send Email」を選択し、「Account」欄の「Sign in」をクリックします。

  3. Googleへのログイン画面が開き、Googleアカウントへのアクセスを求められます。
    次の2項目にチェックを付けて「続行」をクリックします。

    • 下書きの管理とメールの送信です。
    • Gmailアカウントのメールの閲覧、作成、送信です。

  4. Zapierに戻り、「Continue」をクリックします。

  5. 「Configure」でメールテンプレートを設定します。
    To欄（宛先メールアドレス）、Subject欄（件名）、Body欄（本文）等を自由にカスタマイズしていきます。
    宛先は複数指定できます。Zapを作成後に修正するときは、この画面で再度編集できます。
    SubjectやBody欄等では、「＋」をクリックして、kintoneのフィールドを指定できます。

    今回は、kintoneのフィールドを利用しながら、次のメールテンプレートを作成しました。

    項目 設定内容
    To 宛先メールアドレス
    Subject Record Title Value
    Body kintone からレコードが追加されました
    次の内容を確認してください
    ---------------------------
    内容：Record Text Value

    リンク：Url

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

  6. 最後に「Test Step」をクリックします。

  7. 宛先のGmailにメールが届いたことを確認し、「Publish」をクリックします。

おわりに

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

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