GAS: コピペで Webex bot とチャットを楽しもう！

この記事はシスコの有志による Cisco Systems Japan Advent Calendar 2023 の 4 日目として投稿しています。
2023 年版: https://qiita.com/advent-calendar/2023/cisco

# はじめに
ここでは GAS (Google Apps Script) で Webex bot を作る手順をまとめます。下記のような感じの Bot を作ります。

![Screenshot 2023-11-27 at 16.52.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156216/5b04cdce-06f9-566b-d1e9-b49abd8d820c.png)


# GAS を使うメリット
Webex bot をラボで作成するには ngrok などのツールが必要になります。しかしこうしたツールの社内利用は禁止されていることも多く、また Web とのやりとりで遅延も発生します。GAS は Google により Web 上で提供されているため、ngrok などのツールが不要で遅延も少なく、また無料で使えるところが大きなメリットになります。

# Webex bot の準備
まず下記の手順で Webex bot を作成します（既に Bot がある場合は読み飛ばしてください）。

1. https://developer.webex.com/ にログイン
1. 右上アイコンをクリックし My Webex Apps をクリック
1. Create a New App > Create a Bot を選択
1. Bot name, Bot username, アイコンを選び、適当な Description を入れて作成します
1. 作成後に表示される Bot access token をメモします

![Screenshot 2023-11-27 at 13.38.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156216/9d21c94d-2852-1271-3569-5aa456a0953c.png)


:::note warn
作成後に表示される Bot access token は一度しか表示されないので注意しましょう！
:::


# GAS サンプルコードのコピペ
次に GAS の準備をします。GAS は google アカウントを持っている人であれば誰でも利用することができます。
https://script.google.com/ にアクセスし Start Scripting をクリックします。
![Screenshot 2023-11-27 at 13.44.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156216/6133de2b-496e-c445-7938-7033bb1cd01d.png)

ログイン後新しいプロジェクトを作り、下記のコードをコピペします。2 行目の YOUR_BOT_TOKEN を上記 Bot access token に置き換えてください。


```js
// Bot access token を下記にコピペ
webexToken = 'YOUR_BOT_TOKEN'

function doPost(e) {
  // webhook で最初に呼ばれるのはこの関数
  var jsonString = e.postData.getDataAsString();
  var body = JSON.parse(jsonString);

  var roomId = body.data.roomId;
  var roomType = body.data.roomType;
  var personId = body.data.personId;
  var msgId = body.data.id;

  var msg = getMsg(msgId);

  if (msg.indexOf('ありがと') > 0) {
    sendMsg(roomId, msgId, 'どういたしまして！');
  } else if(msg.indexOf('メリークリスマス') > 0){
    sendMsg(roomId, msgId, 'メリークリスマス！良いお年を！');
  } else {
    sendMsg(roomId, msgId, 'こんにちは！');
  }
}


function sendMsg(roomId, msgId, msg){
  // message を送信する関数
  var url = 'https://webexapis.com/v1/messages/';

  var headers = {
    'Authorization': 'Bearer '+ webexToken,
    'Content-Type': 'application/json'
  };

  var payload = {
    'roomId': roomId,
    'parentId': msgId,
    'markdown': msg
  };

  var options = {
    'method': 'POST',
    'headers': headers,
    'payload': JSON.stringify(payload)
  };

  UrlFetchApp.fetch(url, options);
}


function getMsg(msgId) {
  // HTTP リクエストして message の中身を取得する関数
  var url = 'https://webexapis.com/v1/messages/'+msgId;

  var headers = {
    'Authorization': 'Bearer '+ webexToken,
    'Content-Type': 'application/json'
  };

  var options = {
    'method': 'GET',
    'headers': headers
  };

  var response = UrlFetchApp.fetch(url, options);
  var resJson = JSON.parse(response.getContentText('UTF-8'));

  return resJson.text;
}

```

その後保存しておきます。


# コードのデプロイ
GAS のコードを動かすにはデプロイする必要があります。
右上のメニューから 新しいデプロイ > ウェブアプリ を選択します。
![Screenshot 2023-11-27 at 16.21.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156216/1e682c4c-0f8e-cea0-ae82-664b43bfd980.png)

その後説明文を入れ、アクセスできるユーザを全員にしてデプロイします。
![Screenshot 2023-11-27 at 16.22.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156216/1664362f-6ddb-3fc9-c94a-65a383229a29.png)



:::note warn
デプロイ後、ウェブアプリとしての URL が表示されるのでこれを保存しておきます（この後の Webhook で使います）。

![Screenshot 2023-11-27 at 16.23.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156216/49d389fd-4158-9029-774d-1e9fec412583.png)
:::


# Webhook の設定
Webex bot と双方向のやり取りをするためには、下記の手順で Webhook を設定します。

1. https://developer.webex.com/docs/ にアクセス
1. 左側のナビゲーションから Messaging > Reference > Webhooks > Create a Webhook を選択します

![Screenshot 2023-11-27 at 16.34.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156216/260ace54-8177-a6e9-c1d1-04da6f32e2f4.png)

Webhook には以下の 6 項目を入力します。

1. Bearer: Bot access token をコピペ
1. name: 適当な名前で OK
1. targetUrl: 上記 GAS スクリプトをデプロイした際のアドレス
1. resource: messages にします
1. event: created にします
1. filter: mentionedPeople=me にしてそのスペースでメンション（@ をつけること）された時のみにします

![Screenshot 2023-11-27 at 16.40.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156216/150cc9e8-f38f-df38-5fd0-8cc3b5dbce28.png)

入力後にオレンジ色の Run ボタンを押し、正常に応答が得られれば Webhook は完成です。


# 会話を楽しむ！
あとは Bot との会話を楽しみましょう。適当なスペースを作り Bot を追加します。@ をつけてメンションで話しかけて、応答があれば成功です！

![Screenshot 2023-11-27 at 16.49.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156216/fc120811-cb8a-5e31-fa22-30766d6e196e.png)

これができれば、あとは Google スプレッドシートでやり取りを辞書化して会話を楽しむなり、ChatGPT と連携するなり夢は広がります。皆様楽しい年末年始をお過ごしください！