はじめに
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アカウント作成
- Zapierのサイトにアクセスし、「Sign Up」をクリック。
- 必要事項を記入して「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」(自動取得の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自体もいろいろと使い方の可能性が広がりそうです。
実際に体験してみました。本当に簡単ですね!
hishiguro様
フィードバックをありがとうございます。励みになります。
ぜひこの簡単さを周りの方にも広めていただけましたら幸いです。今後ともよろしくお願いいたします。
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
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などのッールを挟むと、ノンプログラミングで他サービスと簡単に連携可能になったので、
このような記事を公開させていただいたという経緯があります。
記事公開の経緯がわかると、より理解しやすいのではないかなと思い、書かせていただきました。
よろしくお願いいたします。
cybozu developer network 運営事務局様
早速のご回答、並び丁寧なご説明ありがとうございました!
経緯がわかりましたので、[webhook 機能] を使って、Slackとの連携を実装したいとおもいます。
また、なにかありましたらよろしくお願いいたします。
お世話になっております。
以下、ご教示いただけますと幸いです。
①Kintoneのサブテーブルの内容を、メールに記載することは可能でしょうか?
②メールを送信する条件を指定することはできないでしょうか?
例えば、新規登録(編集)された際に、あるフィールドの値が○○の時に、メール送信する
よろしくお願いいたします。
k.kawahara 様
お世話になっております。
cybozu developer network事務局です。
いただいたご質問について以下に返答させていただきます。
>①Kintoneのサブテーブルの内容を、メールに記載することは可能でしょうか?
サブテーブルの場合、ノンプログラミングでの設定はできません。
ただ、zapierで設定の際に「Trigger」と「Action」の間にある 「+」ボタン→「Action」をクリックし、「Code」を追加して、PythonまたはJavaScriptを利用し、ご自身でプログラミングを組んでいただくと利用可能かと思います。
>②メールを送信する条件を指定することはできないでしょうか?
例えば、新規登録(編集)された際に、あるフィールドの値が○○の時に、メール送信する
条件指定することは可能です。zapierで設定の際に「Trigger」と「Action」の間にある「+」ボタンをクリック →「Filter」をクリックすると設定が可能です。
よろしくお願い致します。
cybozu developer network 運営事務局さま
お世話になっております。
変更履歴の「この前のバージョンに戻す」を実行した場合も通知を送信することはできますか。
marron 様
お世話になっております。
cybozu developer network 事務局です。
はい、「この前のバージョンに戻す」を実行した場合も通知を送信できます。
編集操作として発火するので、本記事にある「Zapierとkintoneの設定手順 7. 」の部分で以下を行ってください。
よろしくお願いいたします。
cybozu developer network 運営事務局さま
お世話になります。
kintoneアプリが更新された通知を別のkintoneアプリで受け取ることは可能でしょうか。
可能であれば、Zapier等は必要でしょうか。
どのように実装すればよいでしょうか。
知識0の状態でやっておりますので、詳しくお教えいただけると幸いです。
okka 様
お世話になっております。
cybozu developer network 事務局でございます。
申し訳ありませんが、こちらのコメント欄は記事に対するフィードバックのみを受け付けております。
記事シナリオに関係のない技術的なご質問に関しましてはコミュニティをご活用ください。
有志からの回答を得られる場となっております。
kintoneアプリの設定で、「カスタマイズ/サービス連携」にWebhookが表示されていないのですが、
どうすれば表示されるのでしょうか?
TI様
Webhookの機能はの利用には以下の注意点がございます。
(kintone ヘルプより引用 https://jp.cybozu.help/k/ja/user/app_settings/set_webhook/webhook.html)
Webhookの機能をお試しになりたい場合は、開発者ライセンス https://developer.cybozu.io/hc/ja/articles/200720464 も提供しておりますのでご検討ください。
よろしくお願いいたします。
cybozu developer network 運営事務局様
kintoneアプリの設定で、「カスタマイズ/サービス連携」にWebhookが表示されるようになりました。
どうもありがとうございました。
さらに質問です。
この機能でGmailに通知できるようになったのですが、メール送信先を
作成したkintoneアプリ内のユーザー選択したメンバーに設定することはできないでしょうか?
(特定のメンバーのEmailアドレスを直接書き込んで設定することはできましたが、
直接アドレスを書き込むのではなく、ユーザー選択で自由に選択したメンバーにメールが送信されるようにしたいです。)
以上、よろしくお願いいたします。
TI様
お世話になっております。
cybozu developer network 事務局でございます。
>作成したkintoneアプリ内のユーザー選択したメンバーに設定することはできないでしょうか?
kintone側のカスタマイズが必要になりますが、実現可能だと思います。
方法の一例ですが、kintoneユーザーのログイン名をメールアドレスに設定した場合、
メールアドレスを格納するフィールド「mail」を用意していただき、
ユーザー選択でメンバーが選択された際に、
そのメンバーのログイン名であるメールアドレスが自動的に「mail」フィールドに保存される処理を追加すれば、
zapier側で「mail」フィールドを宛先に選択する、というやり方で実現できると思います。
また、こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。
よろしくお願いいたします。
お世話になります。
zapierを利用してkintoneにレコード追加したら、slackに通知することはできましたが、
本記事のように、slack通知メッセージにも対象kintoneレコードのURLリンクを通知することは可能でしょうか?
hejianmei 様
お世話になっております。
cybozu developer network 事務局でございます。
「Make a Zap! ~アクション設定編~」でSlackを選べばSlackに通知を送信することができると思います。
こちらの記事は参考になるかと思います。
通知メッセージの設定内容はZapの設定画面をご確認ください。
またこちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います。