Zoomのチャット機能を活用！「Incoming Webhook」を使ってみた

# Zoom Team Chat で通知を受けよう
Zoom アプリには、無料で利用できる Team Chat というサービスがあります。アプリを起動したときに上部のタブに表示されているコレです。
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/dd09c4f8-c6e8-c1dc-b973-014765553d97.png)
このチャットでは、他のチャットサービスでも一般的に利用されている Webhook サービスを利用して、外部からの通知をチャットに流すことができます。
この記事では、この画像のように外部サービスからの通知が受けられるようにしてみたいと思います。
![Screen Shot 2022-12-01 at 10.59.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/7f4ac9d1-fc83-fff5-b806-eea9d0b19d39.png)

## Zoom Team Chat とは
Zoom Team Chat では、一般的なチャットサービスで利用できる機能が揃っている他にも、Zoom Meeting 中やZoom Phone での通話中だったり、あるいはPCを閉じてモバイルで通知を受け取っている状況など、細かなステータスアップデートが**自動的に**行われるといった便利な特徴があります。

## Incoming Webhook を使ってみよう
ご存知の通り、Incoming Webhook とは外部ソースからのメッセージを受け取る仕組みです。例えばですが、毎日決まった時間にRSSフィードを取得してチャットにニュースを流したり、特定の人からのメールが届いたらチームメンバー全員がいるチャンネルに自動で共有したりといったシステムを構築することができます。
今回は、Google Form の入力を受け取って、都度技術本部チャンネルに投稿するという仕組みを書いてみようと思います。

## Zoom 側の設定（ Incoming Webhook の有効化）

### Marketplace で Incoming Webhook の追加

まず、Zoom App Marketplace で Incoming Webhook を追加します。Zoom App Marketplace とは、Zoom に連携ができるさまざまなアプリケーションのマーケットプレイスで、いわば Zoom 版の AppStore といったところです。
どこにあるの？というかたは、こちら→ [Zoom App Marketplace](https://marketplace.zoom.us/) をクリックしてみてください。2022 年 11 月現在で 2000 以上のアプリや連携機能が登録されています。

:::note info
ちなみに Zoom の管理者の方なら、Zoom の Web ポータル画面からも遷移できます。左メニュー Admin > Advanced > App Marketplace をクリック。
:::


ここで、検索窓に ```incoming webhook``` と入力します。すると、
![Screen Shot 2022-11-26 at 6.50.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/c8645a44-0748-0f0f-96f5-9a3abd7cf89b.png)
こんな感じで出てきますので、クリックしてみましょう。
![Screen Shot 2022-11-26 at 6.53.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/005fc14d-4ab9-a94b-2920-bcef9b4c0ce0.png)
するとこのような形で ```Request to Add``` と出てきます。クリックすると、管理者へのメッセージがつけられますので、理由を添えて追加のリクエストを行いましょう。
![Screen Shot 2022-11-26 at 6.53.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/8e3dce94-132e-c5b5-f2a9-fc3d3ab2d12d.png)

:::note info
もしあなたが管理者の場合は、このような画面になります。
![Screen Shot 2022-11-26 at 6.50.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/4288e23a-f3c1-9527-ee07-b6d1d7b9e004.png)
追加をする場合、特定のユーザーにのみ利用を許可するか、アカウント全体に対して許可するかなどを選択することができます。
![Screen Shot 2022-11-26 at 6.51.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/a5778af7-8516-08c5-36b1-e38ef653310e.png)
:::

ユーザーから Incoming Webhook の利用を申請された管理者はこのような画面を確認できます。
![Screen Shot 2022-11-26 at 6.54.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/e1eccf95-9cc2-8556-8baa-8da6cb7ba2bb.png)
クリックして内容を確認し、問題がなければ許可＆追加をします。
![Screen Shot 2022-11-26 at 6.54.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/284f3071-73ad-f506-d24a-d52f8b4ef9d4.png)
アプリによるアカウントへのアクセス圏の情報を確認した上で、許可をすることで最終的にアカウントに対して Incoming Webhook の利用が許可されます。
![Screen Shot 2022-11-26 at 6.54.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/6c8d0d91-3b32-56c0-03cc-9be84ad28d50.png)
追加に成功すると、この画面が出ます。
![Screen Shot 2022-11-26 at 6.54.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/4a4f49aa-c300-3e05-4e35-3e805902baa9.png)

そのタイミングで、チャット画面にも Incoming Webhook さんからのメッセージが届いているはずです。
![Screen Shot 2022-11-26 at 6.56.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/29eda453-98c9-2120-803b-2444aba856a7.png)
おめでとうございます！これで Incoming Webhook の追加は完了です。

### Webhook URL の発行
次に、実際に Webhook でチャットに投稿できるよう、Webhook URL を発行します。投稿したいチャンネルのメッセージ入力欄に、 ```/inc connect {{webhook名}}``` と入力し Enter します。

![Screen Shot 2022-11-29 at 14.48.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/e846d78c-53ae-af5e-cd05-0b1e1bd73ff3.png)
成功すると Webhook URL が発行され、Incoming Webhook さんからメッセージが届きます。
![Screen Shot 2022-11-29 at 20.04.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/28d6d931-08e4-22dc-e21a-56a5f8ae1e9d.png)
メッセージに記載されている通り、curl コマンドでチャンネルへの投稿を試すことも可能です。

こんな感じで

```
curl 'https://WEBHOOK_URL?format=fields' -X POST -H 'Authorization: YOUR_TOKEN' -H 'Content-Type: application/json' -d '{"明日の天気":"晴れ","降水確率":"10%"}'
```
みたいにして叩いてみますと、
![Screen Shot 2022-11-29 at 20.24.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/fef53d32-44da-2556-51bb-d7e13bdcc0e4.png)
こんな感じでチャンネルに投稿されました！

## Google Form で出欠回答をチャットに流す
ここからは実際のユースケースの参考になりますが、例として Google Form で投稿された内容を Zoom Team Chat に流してみましょう。
![Screen Shot 2022-11-29 at 22.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/1e341d67-3be8-d755-f5db-fac9ae9e446d.png)
こんな形でフォームを作成後、フォーム画面右上の三点リーダーからスクリプトエディタを選択し、開きます。
```javascript
function sendToZoom(message) {
  var url = "https://WEBHOOKURL?format=fields";
  // 先ほど取得したWebhookURL
  var payload = JSON.stringify(message);
  var options = {
    "method" : "POST",
    "payload" : payload ,
    "headers" : {
      "Content-Type" : "application/json",
      "Authorization" : "XXXXXXXXXX" 
      //先ほど取得したトークン
    },
    "muteHttpExceptions" : false
  };
  var response = UrlFetchApp.fetch(url, options);
}

function onFormSubmit(e){
  var responseData = e.response.getItemResponses();

  for (var i = 0; i < responseData.length; i++){    
    var data = responseData[i];
    var title = data.getItem().getTitle();
    var response = data.getResponse();

    switch (title) {
      case "参加されますか？":
        var res = response;
        break;
      case "参加者のお名前をご記入ください。":
        var name = response;
        break;
      case "参加者のメールアドレスをご記入ください。":
        var mail = response;
      default:
        break;
    }
  }
  var message = {"出欠":res,"名前":name,"メールアドレス":mail};
  sendToZoom(message);
}
```
いわゆる「コンテナバインドスクリプト」ですが、その内容はこんな感じ。内容としては
1. フォーム送信時に `onFormSubmit` を発火させます
1. 入力されたデータのそれぞれの質問に対する回答を message オブジェクトに `res` 、`name`、`mail` というパラメータで格納
1. `sendToZoom` メソッド内で `message` オブジェクトを JSON データに変換
1. 先に Incoming Webhook さんから教えてもらった URL とトークンを利用して Zoom Team Chat に送信

と言う流れになっています。

:::note warn
ここで言う「トークン」とは、Zoom Team Chat 連携アプリの一つである Incoming Webhook で、 `/inc connect` コマンドでの Connection 発行時に返される `Verification Token` を指します。GAS からのリクエスト送信時に `Authorization` ヘッダにて使用します。
:::

## フォームを送信してみよう
実際にフォームを送信すると、このようにチャンネルに投稿されます。
![Screen Shot 2022-11-29 at 22.11.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442226/01ed9c0d-cc8a-7146-d69b-b3ba7c3b3412.png)
最初に一度アカウントへの Incoming Webhook を設定してしまえば、あとは Zoom Team Chat の bot トーク画面で `/inc connect` のスラッシュコマンドで Webhook 通知を追加していくことができます。
詳しい使い方は以下のリファレンスや `/inc help` でコマンド詳細が確認できますので、参考にしてみてください。

## 参考資料
- [Using Zoom's Incoming Webhook Chatbot](https://support.zoom.us/hc/en-us/articles/4418193782029)
- [Incoming Webhook](https://marketplace.zoom.us/apps/eH_dLuquRd-VYcOsNGy-hQ)