12
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-02

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

アプリで Incoming Webhook を追加する

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

TeamsでWebhook1.jpg

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

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

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

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

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

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

TeamsでWebhook7.jpg

送信側で Node-RED を使う

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

作成したフローは以下のとおりです。
Node-REDのフロー.jpg

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

Injectノード

ここでは、msg.payload に Webhook で送る JSON を指定しています。
Node-REDのノードの設定01.jpg

HTTPリクエストノード

こちらでは、メソッド・URL・出力形式の指定を行っています。
Node-REDのノードの設定02.jpg

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

そして、上記のフローを動作させることで、以下のように Teams にメッセージを送ることができました。
Node-REDから受信したメッセージ.jpg

まとめ

以上のように、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>

12
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?