（著者：クローバ株式会社 門屋 亮）
はじめに
こんにちは。クローバの門屋です。
クローバではコミュニケーションツールとして、主にSlackを使っています。他のチャットツールと比べてユーザーインターフェイスが秀逸で、ちょっとした操作にも細かい配慮がされていて心地よく使うことができます。
Slack
https://slack.com/
今回は、Slackとkintone の連携について考えてみます。
kintoneからSlackに通知を送る
通知ならkintoneの機能を使えばいいじゃないかと思われるかもしれません。……がSlackを通知サービスとしてみたとき、大きな特徴があります。
- チームのメンバーが一斉に同じ通知を受け取ることができる
- 通知のオン、オフを、ユーザー自身がチャンネルごとに選択できる
- プッシュ通知を受け取れるデスクトップ・モバイルアプリがある
これらの特徴を生かして、たとえばシステムに障害があったときにEメールではなくSlackに通知するなど、不特定の相手に一斉に通知するが、通知の重要度はユーザーに委ねたいようなケースで重宝します。 ここではこのような用途を想定しています。
- 案件管理のステータスが完了になったら案件名といっしょにSlackの特定のチャンネルにメッセージを書き込む。
- メッセージを通知する、しないはユーザーが自由に選択できる。
kintone単体では、通知メールの内容をカスタマイズすることはできないため、ニーズはありそうです。
Slack側の準備
kintoneの通知を受け取るチャンネルを作成します。
Incoming Webhookの作成
SlackのAPIでメッセージを送信する方法は大きくふたつあります。
- Web APIを使う方法
- Incoming Webhookを使う方法
Web APIを使う場合は、任意のユーザーでAPIトークンを取得する必要があります。今回はIncoming Webhookを使うことにします。
Incoming Webhook Integrationのページを開きます。
https://www.slack.com/services/new/incoming-webhook
メッセージを送信したいチャンネルを選択して、「Add Incoming WebHooks Integration」ボタンを押します。 Incoming Webhookが作成されます。
作成後のページに、Incoming WebhookのURLが表示されます。こちらはあとで利用します。ボットの名前や、アイコンのカスタマイズを行うこともできます。 これでSlack側の準備は完了です。
kintoneでJSカスタマイズを行う
続いてkintone 側で通知部分の実装を行います。本記事では簡易的にJSカスタマイズで通知部分の実装を行いますが、プラグインを開発することもできます。 プラグインの開発にはこちらも合わせてご覧下さい。
kintone プラグイン開発
https://cybozudev.zendesk.com/hc/ja/sections/200644024
SendGrid APIを使ってメールを送信するプラグインを作ってみよう
https://cybozudev.zendesk.com/hc/ja/articles/206584633
post2slack.js
まずはじめにapp.record.detail.process.proceedイベントをフックして、プロセス管理のステータス変更時に処理を行えるようにします。ステータスが完了になったら、kintone.proxyでSlackのIncoming WebhookのURLにPOSTリクエストを送信します。
SlackのIncoming Webhookの詳しい使い方は以下のドキュメントに書かれてあります。
https://api.slack.com/incoming-webhooks
終わりに
いかがだったでしょうか。Incoming Webhookを使うことで、手軽にSlackへのメッセージ送信ができることがお分かりいただけたかと思います。通知をSlackに集約することで、複数のサービスの通知を柔軟に管理することができるのは大きな魅力です。また、Outgoing WebhookとkintoneのREST APIを組み合わせることで、Slackでボットのメッセージに返信したら、kintoneのレコードのプロセスを進めるといった双方向の連携も可能になります。
今回ご紹介したように、Slackはさまざまなクラウドサービスと連携することで、単なるチャットツールの枠を超えたコミュニケーション基盤として活用できます。kintoneとの連携もさらに便利な使い方があるかもしれません。ぜひお試しください。
非エンジニアです。
コード通りに対応してみたのですが、プロセス管理のステータスを「完了」にしても通知がうまく飛びません、、、
(function($) {
"use strict";
kintone.events.on("app.record.detail.process.proceed", function(e) {
if (e.nextStatus.value == '完了') {
var thisUrl = "https://**********.cybozu.com/k/" + kintone.app.getId() + "/show#record=" + kintone.app.record.getId();
var webhookUrl = 'https://hooks.slack.com/services/***************************************';
var payload = {
"text": "対応が完了しました！" + thisUrl
};
return new kintone.Promise(function(resolve, reject) {
kintone.proxy(webhookUrl, 'POST', {}, payload, function(body, status, headers) {
console.log(status, body);
resolve(e);
});
});
}
});
})(jQuery);
ya 様
お試しいただきありがとうございます。
書いていただいたコードの下記以外はそのままコピペをして試してみたところ、ステータスを完了にするとslackにPOSTされました。
> var thisUrl = "https://**********.cybozu.com/k/" + kintone.app.getId() + "/show#record=" + kintone.app.record.getId();
> var webhookUrl = 'https://hooks.slack.com/services/***************************************';
ブラウザのデベロッパーツールにエラーなどはでていますでしょうか？
下記の記事を参考にデバッグしていただくと、問題箇所がわかるかもしれませんのでお試し下さい。
・動かない？そんな時はデバッグをしてみよう！入門編
https://developer.cybozu.io/hc/ja/articles/207613916
> ※return以下のコードが勉強不足でよくわかっていません
return以下の部分は下記の記事が参考になると思いますので是非読んでみて下さい。
・kintone.Promiseの書き方・使い方～超入門編～
https://developer.cybozu.io/hc/ja/articles/215029846
cybozu Development team様
ご返信まことにありがとうございます。
postされましたか、、
ちなみにディベロッパーコンソールを見た所添付した画像のエラーが出ていました。
２枚添付します。ググって見たところjQueryが読まれていないのに呼ばれている、、、
などが書いてあったのですが、よくわかりませんでした。
何卒ご教示いただけますと幸いです。
ya様
ご確認いただきありがとうございます。
問題箇所がわかりました。
このサンプルでは、最初と最後に下記のように書いている部分がありますが、こちらはjQueryを呼び出しているコードとなります。
> (function($) {
> ....
> })(jQuery);
jQueryを利用する場合、jQueryを利用できるように公式サイトからファイルをダウンロードして、適用する必要があります。
ya様の環境に、まだそのファイルの設定ができていないため、エラーが発生し、POSTできていないようです。
下記をお試し下さい^^
このdeveloper networkには、jQueryの公式サイトからファイルをダウンロードして適用すよりも、もっと簡単に利用できる方法があります。
2つご紹介しますが、ya様の場合、JSEdit for kintoneプラグインをご利用いただいているので、2つ目の方法がおすすめです！
1つ目：Cybozu CDNを利用して、URLをアプリ設定の「JavaScript / CSSでカスタマイズ」にコピペする
参考）
第12回 jQueryを利用してみよう：https://developer.cybozu.io/hc/ja/articles/204695384
Cybozu CDN：https://developer.cybozu.io/hc/ja/articles/202960194
このCybozy CDN の「jQuery」項目の一番上のURLのコピペすることで利用できます。
2つ目：JSEdit for kintoneプラグインをご利用の場合、「ライブラリ」の「jQuery(2,2,4)」をクリックする
↓下記の部分を選択して、保存をするだけで、「JavaScript / CSSでカスタマイズ」にファイルのURLが設定されます。
上記の設定をしていただくことで、POSTできるようになると思いますので、お試し下さい。
また、この点について記事に記載がないため、わかりにくくなっており、申し訳ありませんでした。
追記させていただきたいと思います。
cybozu Development team様
お世話になります。
詳しいご回答をいただき誠にありがとうございます。
ご教示いただいた「2つ目」で無事postができました！
このたびはありがとうございました！
また不明点などありましたらご連絡させていただきます。
ya様
ご確認いただきありがとうございます。
成功したとのことで、良かったです^^
今後共よろしくお願い致します。
たびたび失礼します。
今回は「レコードの完了」でslackに通知が飛ぶ設定でしたがレコードが新規で追加（作成）された際に
飛ぶ雪堤（コード）はどうのようになるでしょうか。
素人ながら「if (e.nextStatus.value == '完了')」を修正するのかな、、、とも思っているのですが、
可能でしたらご教示いただけますと幸いです。
なお、こちらでの質問はふさわしくない場合は、その旨ご指摘いただけますと幸いです。
以上、何卒よろしくお願い申し上げます。
ya様
こちらの記事ではkintone JavaScript APIのイベントとして「プロセス管理のイベント」を利用しています。
そのため「プロセス管理が進み、ステータスが完了なら通知を飛ばす」といった動きになっています。
レコードが新規で追加された際に通知を飛ばしたいのであれば、イベントを変更する必要があります。
こちらではコードの書き方等の説明はできかねますので、ぜひコミュニティをご活用ください。
▼ JavaScript developer向けフォーラム
https://developer.cybozu.io/hc/ja/community/topics/200034345
よろしくお願いいたします。
cybozu Development team様
お世話になります。
ご連絡ありがとうございました。本件につきましてはコミュニティを活用させていただきます。
HK様
お世話になっております。cybozu developer network 運営局です。
こちらは記事に対するフィードバック欄になっております。
記事の内容に手を加えたときなどの質問については、コミュニティをご活用ください。
コミュニティは、多くのメンバーが閲覧しているため記事のコメントよりも回答が得られやすいかと思われます。
また、その際には、「うまくいかない」と書かれるよりも、https://developer.cybozu.io/hc/ja/articles/207613916 などを参考に開発者ツールでコンソールログでエラーが出ていないか確認し、
エラーが出ていた場合はそのエラーメッセージも投稿に含めると、回答が得られやすいかと思います。
よろしくお願いいたします。
早速ありがとうございます。間違えて投稿したメッセージを削除してしまいました。
コミュニティー活用させていただきます。
cybozu Development team様
お世話になっております。
Slackへの通知処理、大変参考になりました。
1点、教えていただきたいのですが、メッセージに「@here」のメンションを付けることは可能でしょうか。
以下のようにtextの先頭に「@here」を付けてもSlackではメンションにならず困っております。
ご教示いただけますと大変助かります。
OHC 様
お世話になっております。cybozu developer network 運営局です。
こちらは記事に対するフィードバック欄になっております。
恐れ入りますが、記事から発展した内容に関するご質問についてはコミュニティをご活用ください。
https://developer.cybozu.io/hc/ja/community/topics
お手数をおかけいたしますが、どうぞよろしくお願いいたします。