カテゴリー内の他の記事

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

フォローする

はじめに

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

kintone-Zapier-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 FOR FREE」をクリック。

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

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. サインアップ後の画面で、「Make a 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自体もいろいろと使い方の可能性が広がりそうです。

 

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

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

Avatar
hishiguro

実際に体験してみました。本当に簡単ですね!

Avatar
cybozu Development team

hishiguro様

フィードバックをありがとうございます。励みになります。

ぜひこの簡単さを周りの方にも広めていただけましたら幸いです。今後ともよろしくお願いいたします。

Avatar
Miho Kohashi

Gmail を Slack に変更しても対応できるとおもうのでうが、以下に記述されているJava Script の埋め込みとの違いを教えてください。

https://developer.cybozu.io/hc/ja/articles/207419736-kintone%E3%81%8B%E3%82%89Slack%E3%81%AB%E9%80%9A%E7%9F%A5%E3%82%92%E9%80%81%E3%82%8B%E6%96%B9%E6%B3%95

Avatar
cybozu Developer team

Miho Kohashi 様

お世話になっております。
cybozu developer network運営事務局です。

おしゃる通り、こちらの記事のGmailをSlackに変更すると対応可能です。
※関連記事:【REST API × Webhook】お客様が来場した時、Slackに通知を送ってみよう!

そのように設定することと、貼っていただいた「kintoneからSlackに通知を送る方法」の記事の違いは以下の2点になるかと思います。

 1) プログラミングを組む必要があるか、ないかの違い
  こちらの記事はノンプログラミングでkintoneとGmail (Slack)が連携できて、 
  「kintoneからSlackに通知を送る方法」はプログラミングを組むことで、
  kintoneとslackの連携が可能になります。

 2) 中間ツールの利用
  こちらの記事ではプログラミングを組む記事とは違い、第3のサービス「zapier」を利用しています。
  このツールとkintoneのwebhook機能を利用することによって、
  kintoneと様々なサービスをノンプログラミングで連携することが可能になります。

また、すでにご存知かもしれませんが、追加情報として、
「kintoneからSlackに通知を送る方法」の記事はkintoneのwebhook機能が実装される前の記事のため、
この記事が公開された当時はプログラミングなしで、kintoneとSlackを連携することはできませんでした。

それが、webhook機能の実装により、zapierなどのッールを挟むと、ノンプログラミングで他サービスと簡単に連携可能になったので、
このような記事を公開させていただいたという経緯があります。

記事公開の経緯がわかると、より理解しやすいのではないかなと思い、書かせていただきました。

よろしくお願いいたします。

Avatar
Miho Kohashi

cybozu developer network 運営事務局様

早速のご回答、並び丁寧なご説明ありがとうございました!

経緯がわかりましたので、[webhook 機能] を使って、Slackとの連携を実装したいとおもいます。

また、なにかありましたらよろしくお願いいたします。

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