【Vue.js】Webhookを使ってMicrosoft Teamsにメッセージを送る

【Vue.js】Webhookを使ってMicrosoft Teamsにメッセージを送る

2020年1月22日
Vue.js

Microsoft TeamsのIncoming Webhookを使ってチャンネルにメッセージを飛ばす方法を紹介します。

Microsoft TeamsからIncoming Webhook通知先のURL取得

Teamsからメッセージを送りたいチャンネルを選択し、コネクタを選びます。

 

コネクタを選んだら、検索ボックスから「Incoming Webhook」を入力します。Incoming Webhookが表示されたら「構成」を押します。

 

Webhookの名前と画像(任意)を選択し、作成したら完了です。

作成後、Webhookの通知先のURLが表示されるのでコピーしておきましょう。

 

curlコマンドで投げてメッセージが届くかテストする

作成したWebhookでメッセージが届くか、curlコマンドを使ってテストします。

以下のコマンドを叩くと、先ほど選んだチャンネルに「test」というメッセージが送られます。

↑のようにメッセージが届けば成功です。

 

Vue.jsでトリガーを作成する

Vue.jsでメッセージを飛ばすトリガーを作成します。実際飛ばす処理はCloud Functionsで作成した関数で行います。

今回は例として確定した備品の名前と発注数をVue.jsで取得した前提で、そのデータをTeamsに送る流れで実装してきます。

URLSearchParamsに送りたいデータを追加してきます。URLSearchParamsとはURLのクエリー文字列を操作する時に使用するメソッドです(詳しくは以下の参考URL)。

参考URL:URLSearchParams – Web API

 

paramsにデータが格納されたらaxios(HTTPクライアント)でCloud Functionsで作成した関数のURLにPOSTします。

 

Cloud Functions(Node.js)からメッセージを送る

Vue.jsで送られてきたデータを取得し、Teamsにメッセージを飛ばしていきます。

req.bodyでリクエストデータを取得します。今回はまとめてtextプロパティにメッセージを入れました。詳しいプロパティや説明は以下の参考URLに記載されています。

参考URL:
従来のアクション可能メッセージ カード リファレンス – Outlook Developer

最後にPACKAGE.JSONに外部依存のモジュールを追加しておきましょう。

↑のようにWebhookの送信に成功するとメッセージが届きます。

 

ハマりポイント

FirebaseのSparkプランを使っていると外部へのリクエストを投げられないみたいです。。

よくよく調べてみたらSparkの場合だと「アウトバウンドネットワーキング」がGoogleサービス専用と書いてありました。。。

参考URL:Firebase 料金プラン