Microsoft TeamsのIncoming Webhookを使ってチャンネルにメッセージを飛ばす方法を紹介します。
目次
Microsoft TeamsからIncoming Webhook通知先のURL取得
Teamsからメッセージを送りたいチャンネルを選択し、コネクタを選びます。
コネクタを選んだら、検索ボックスから「Incoming Webhook」を入力します。Incoming Webhookが表示されたら「構成」を押します。
Webhookの名前と画像(任意)を選択し、作成したら完了です。
作成後、Webhookの通知先のURLが表示されるのでコピーしておきましょう。
curlコマンドで投げてメッセージが届くかテストする
作成したWebhookでメッセージが届くか、curlコマンドを使ってテストします。
以下のコマンドを叩くと、先ほど選んだチャンネルに「test」というメッセージが送られます。
1 | $ echo '{"text": "test"}' | curl -H 'Content-type: application/json' -d @- <先ほどコピーしたWebhook URL> |
↑のようにメッセージが届けば成功です。
Vue.jsでトリガーを作成する
Vue.jsでメッセージを飛ばすトリガーを作成します。実際飛ばす処理はCloud Functionsで作成した関数で行います。
今回は例として確定した備品の名前と発注数をVue.jsで取得した前提で、そのデータをTeamsに送る流れで実装してきます。
URLSearchParamsに送りたいデータを追加してきます。URLSearchParamsとはURLのクエリー文字列を操作する時に使用するメソッドです(詳しくは以下の参考URL)。
参考URL：URLSearchParams – Web API
paramsにデータが格納されたらaxios(HTTPクライアント)でCloud Functionsで作成した関数のURLにPOSTします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <script> import axios from 'axios' export default { data () { return { names: [], numbers: [] } }, methods: { submitMessage() { var params = new URLSearchParams() this.names.forEach(name => { params.append('names', name) }) this.numbers.forEach(number => { params.append('numbers', number) }) axios.post(`< Cloud Functionsで作成した関数のHTTP URL >`, params).then(() => { alert('成功') }) .catch((err) => { console.log(err) }) } } } </script> |
Cloud Functions(Node.js)からメッセージを送る
Vue.jsで送られてきたデータを取得し、Teamsにメッセージを飛ばしていきます。
req.bodyでリクエストデータを取得します。今回はまとめてtextプロパティにメッセージを入れました。詳しいプロパティや説明は以下の参考URLに記載されています。
参考URL:
従来のアクション可能メッセージ カード リファレンス – Outlook Developer
最後にPACKAGE.JSONに外部依存のモジュールを追加しておきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | const https = require('https'); const functions = require('firebase-functions'); /** * Responds to any HTTP request. * * @param {!express:Request} req HTTP request context. * @param {!express:Response} res HTTP response context. */ exports.send_message_to_teams = functions.https.onRequest((req, res) => { var webhook_text = '下記備品を発注依頼いたします。よろしくお願いします。<br><br>'; req.body.names.forEach(function(name, index) { webhook_text += name; webhook_text += ' : '; webhook_text += req.body.numbers[index]; webhook_text += '(発注個数)'; webhook_text += '<br>'; }); var data = JSON.stringify({"text": webhook_text, "title": "発注備品"}); //オプション情報設定 var options = { hostname: 'outlook.office.com', port: 443, path: '< Webhook Path >', method: 'POST', headers: { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(data) } }; https_request = https.request(options); //データ送信 https_request.write(data); https_request.end(); }); |
↑のようにWebhookの送信に成功するとメッセージが届きます。
ハマりポイント
FirebaseのSparkプランを使っていると外部へのリクエストを投げられないみたいです。。
よくよく調べてみたらSparkの場合だと「アウトバウンドネットワーキング」がGoogleサービス専用と書いてありました。。。
参考URL：Firebase 料金プラン