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

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

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

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

![Webhookのテスト.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/19bd91fd-abd9-a96f-ff25-04de113ebdda.jpeg)

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

![TeamsでWebhook1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/34c97b82-fe96-7c63-8e9c-9a6a768668d5.jpeg)

そこで、Incoming Webhook が上の画像のように表示されたので、それを選択した後の画面が以下となります。この画面で「チームに追加」を押します。
![TeamsでWebhook2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/47e55c08-a143-ed98-7822-b70630ce5cba.jpeg)

その後、以下の画面でチャンネルの指定を行うことができました。今回、Webhook をテストするためのチャンネルを作っていたので、以下の画面でそのチャンネルを指定しました。
![TeamsでWebhook3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8a651df3-f3f3-4803-b9d6-b629a78a8e6a.jpeg)

チャンネルが指定された状態で、画面右下にある「コネクタを設定」を選びます。
![TeamsでWebhook4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c312d786-a0c2-ae4b-5334-8c978dc38889.jpeg)

その後の画面では、名前の指定と画像変更が行えるようですが、今回は名前のみを指定しました。
![TeamsでWebhook5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c42fe2e8-d3d7-6858-af3b-0b748e38f60e.jpeg)

画面の下のほうへ進むと Webhook用の URL が表示されているので、これをメモしておきます。そして、「完了」と書かれたボタンを押します。
![TeamsでWebhook6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/420fa3ab-21c2-1fc4-f9c2-616da53c5235.jpeg)

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

### 送信側で cURL を使う

以下のドキュメントの「[cURL を使用してメッセージを Webhook に投稿する](https://docs.microsoft.com/ja-jp/microsoftteams/platform/webhooks-and-connectors/how-to/connectors-using#post-a-message-to-the-webhook-using-curl)」という部分に 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

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

```bash
// 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アプリのチャンネルを見てみると、以下の内容が投稿されているのを確認できました。

![TeamsでWebhook7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/13ba1922-0058-0946-2c11-1e3c1ead281d.jpeg)

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

作成したフローは以下のとおりです。
![Node-REDのフロー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b2edd95e-7cd7-ff21-ae15-e8994dfa4f66.jpeg)

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

#### Injectノード
ここでは、`msg.payload` に Webhook で送る JSON を指定しています。
![Node-REDのノードの設定01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1cb1aa10-1613-698f-ef54-1e520be45fcd.jpeg)

#### HTTPリクエストノード
こちらでは、メソッド・URL・出力形式の指定を行っています。
![Node-REDのノードの設定02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1e97a11f-1c15-3c9e-0f17-ecc569a45ebb.jpeg)

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

そして、上記のフローを動作させることで、以下のように Teams にメッセージを送ることができました。
![Node-REDから受信したメッセージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/37b87a36-7f3b-7405-0a24-3a879db56c12.jpeg)

## まとめ
以上のように、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

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

```javascript
<!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>

```