Teams の Incoming Webhook を利用する（cURL、Node-RED と組み合わせる）

11328 ワード
incoming-webhook Webhook Teams node-red Webhook テキストリンク

Teams で Webhook を試そうとして以下のやり方でできなかったので、メモをかねて記事を書きました。

●受信 Webhook を使用して外部リクエストを Microsoft Teams に投稿する - Teams | Microsoft Docs
　https://docs.microsoft.com/ja-jp/microsoftteams/platform/webhooks-and-connectors/how-to/add-incoming-webhook

チャンネルのメニューを見てみる

冒頭で書いたドキュメントの記載通りだと以下のメニューにコネクタという項目が出るはずですが、何かアカウントの関係などがあるのか表示がされませんでした。

アプリで Incoming Webhook を追加する

そこで、アプリの追加等を行うところで Incoming Webhook を検索してみました。

そこで、Incoming Webhook が上の画像のように表示されたので、それを選択した後の画面が以下となります。この画面で「チームに追加」を押します。

その後、以下の画面でチャンネルの指定を行うことができました。今回、Webhook をテストするためのチャンネルを作っていたので、以下の画面でそのチャンネルを指定しました。

チャンネルが指定された状態で、画面右下にある「コネクタを設定」を選びます。

その後の画面では、名前の指定と画像変更が行えるようですが、今回は名前のみを指定しました。

画面の下のほうへ進むと Webhook用の URL が表示されているので、これをメモしておきます。そして、「完了」と書かれたボタンを押します。

Webhook でメッセージを送る

設定はできたようなので、メッセージを送る方法を見てみます。

送信側で cURL を使う

以下のドキュメントの「cURL を使用してメッセージを Webhook に投稿する」という部分に cURL を使う場合のコマンドが書かれていました。

●コネクタと Webhook にメッセージを送信する - Teams | Microsoft Docs
　https://docs.microsoft.com/ja-jp/microsoftteams/platform/webhooks-and-connectors/how-to/connectors-using#post-a-message-to-the-webhook-using-curl

具体的には以下のとおりです。

// on Windows
curl.exe -H "Content-Type:application/json" -d "{'text':'Hello World'}" <YOUR WEBHOOK URL>

// on macOS or Linux
curl -H 'Content-Type: application/json' -d '{"text": "Hello World"}' <YOUR WEBHOOK URL>

上記のコマンドの「<YOUR WEBHOOK URL>」の部分は、先ほどメモしていた Webhook用の URL に置きかえます。そして、コマンドを実行した後に Teamsアプリのチャンネルを見てみると、以下の内容が投稿されているのを確認できました。

送信側で Node-RED を使う

今度は、Node-RED を送信側で利用してみます。

作成したフローは以下のとおりです。

また、各フローの設定は以下のようにしています。

Injectノード

ここでは、msg.payload に Webhook で送る JSON を指定しています。

HTTPリクエストノード

こちらでは、メソッド・URL・出力形式の指定を行っています。

上記の設定ができたら、デプロイを忘れずに行ってください。

そして、上記のフローを動作させることで、以下のように Teams にメッセージを送ることができました。

まとめ

以上のように、Teams で外部からのメッセージ送信を行うことができました。

今後、単純なテキスト送信以外でできそうなことを試してみようと思います。

【追記】 UIFlow との組み合わせ

M5Stackシリーズのビジュアルプログラミング環境である UIFlow と組み合わせも試して記事にしてみました。

●Teams の Incoming Webhook と UIFlow を組み合わせる - Qiita
　https://qiita.com/youtoy/items/9a71fa0b71e825c45106

【余談】 Fetch API を試した話

過去に以下の記事でも使った Fetch API も試してみました。結果は CORS に関するエラーがでて失敗でした（Discord だと OK だったものの）。

●Discordサーバー上のテキストチャンネルへのメッセージングを UIFlow や Fetch API を使って行う（ #GWアドベントカレンダー 4/29 ） - Qiita
　https://qiita.com/youtoy/items/c77106a23b60b364b9a0

ちなみに、作成したソースコードは以下のとおりです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Teams の Incoming Webhook を試す</title>
  </head>
  <body>
    <button onclick="send()">メッセージを送る</button>
    <script>
      const url = "【上記で設定した Teams の Webhook用URL】";
      const message = { text: "ブラウザからメッセージ送信" };

      function send() {
        postData(url, message)
          .then((data) => console.log(data))
          .catch((error) => console.error(error));

        function postData(url = ``, data = {}) {
          return fetch(url, {
            method: "POST",
            mode: "cors",
            headers: {
              "Content-type": "application/json",
            },
            body: JSON.stringify(data),
          }).then((response) => response.text());
        }
      }
    </script>
  </body>
</html>