スクリーンショット_2020-03-13_18.47.43

Webex Teamsで何か言ったらリプライしてくれるBotを作ってみた

業務でWebex TeamsのBotに触れる機会があったので、備忘録を兼ねて書いてみます。

Webex Teamsとは

Webex Teamsは、Cisco製のコラボレーションツールです。チャットをはじめ、テレビ会議、画面共有、ホワイトボードなどの機能が1つになった、オールインワンのツールです。

1. Botを作成する

Botの作成には、Webex Teamsのアカウントが必要です。まだ持っていない場合は、こちらからアカウントを作成します。メールアドレスを入力して「Try Free」をクリックします。

こちらからBotを作成します。「Create a Bot」をクリックします。ログインしていない場合はログインが求められるので、登録したアカウントでログインします。

スクリーンショット 2020-03-13 15.39.37

次の画面で必要事項を入力してBotを作成します。

画像2

「Add Bot」を押したらBotの作成は完了です!

私は愛猫のココちゃんと会話できるBotにしたかったので、こんな感じで作りました。(※ Bot's Access Tokenはあとで使うので控えておくと便利です)

画像5

2. Botをスペースに追加する

Webex Teamsでは、チャットルームのことを「スペース」と呼びます。Botに話しかけるとリプライしてくれるようにしたいので、スペースを作成してそこにBotを追加します。

アプリをダウンロードするか、WebでWebex Teamsにログインします。

ログインしたら、「+」ボタンから「Create a space」を選択し、スペースを作成します。

スクリーンショット 2020-03-13 14.25.11

スペースを作成したら、スペースにBotを追加します。右上の人型のアイコンをクリックし、Botを検索して追加します。

スクリーンショット 2020-03-13 14.45.37

Botを追加したので、Botにメンションをつけて話しかけてみます。

スクリーンショット 2020-03-13 15.19.04

・・・この時点では何も返ってきません😢

Botにリプライしてもらえるように、「Webhook」(+API)を作成する必要があります!今回は、以下の2つを作成します。

● Botにメンションされたことを通知するWebhook

● (Webhookを受け取り、)アクティビティが発生したスペースに対して、メッセージを送信するAPI

3. Webhookを作成する

Webhookは、ここではWebex Teamsで特定のアクティビティが発生した際に、それをフックして指定したURLにHTTPリクエストを送信してくれるしくみを指します。(詳細はリンク先をご覧ください)

Webhookを作成するには、こちらにアクセスします。

1. 「Header」には以下の値を指定します。

【Authorization】{Bot's Access Token}

「Use personal access token」のスイッチをオフにして、先ほど作成したBotの「Bot's Access Token」を指定します。

2. 「Body」には以下の値を指定します。

【name】{任意の名前}

Webhookの名前。今回は特に使用しないので、適当でOKです。

【targetUrl】{任意のURL}

次に作成する、APIのURL。あとで更新できるので一旦適当な値を入れておきます。

【resource】messages

どの要素のアクティビティに反応するかを指定します。今回はメッセージを対象にしたいので、messagesを指定します。

【event】created

どのタイミングにフックするかを指定します。今回はメッセージが送信(=作成)されたタイミングなのでcreatedを指定します。

【filter】mentionedPeople=me

オプション項目です。フックの条件を絞り込めます。自身(Bot)がメンションされた時だけフックしたいので、mentionedPeople=meを指定します。

入力できたら右下の「Run」をクリックして作成完了です!

4. APIを作成する

次にAPIを作成します。いくつかポイントだけ記載します。

前述したように、WebhookからのHTTPリクエストはPOSTなので、APIはPOSTメソッドで作成します。

↓POSTのBodyはこんな感じです。

 Handling Requests from Webex Teams

{
 "id": "Y2lzY29zcGFyazovL3VzL1dFQkhPT0svZjRlNjA1NjAtNjYwMi00ZmIwLWEyNWEtOTQ5ODgxNjA5NDk3",
 "name": "New message in 'Project Unicorn' room",
 "resource": "messages",
 "event": "created",
 "filter": "roomId=Y2lzY29zcGFyazovL3VzL1JPT00vYmJjZWIxYWQtNDNmMS0zYjU4LTkxNDctZjE0YmIwYzRkMTU0",
 "orgId": "OTZhYmMyYWEtM2RjYy0xMWU1LWExNTItZmUzNDgxOWNkYzlh",
 "createdBy": "Y2lzY29zcGFyazovL3VzL1BFT1BMRS9mNWIzNjE4Ny1jOGRkLTQ3MjctOGIyZi1mOWM0NDdmMjkwNDY",
 "appId": "Y2lzY29zcGFyazovL3VzL0FQUExJQ0FUSU9OL0MyNzljYjMwYzAyOTE4MGJiNGJkYWViYjA2MWI3OTY1Y2RhMzliNjAyOTdjODUwM2YyNjZhYmY2NmM5OTllYzFm",
 "ownedBy": "creator",
 "status": "active",
 "actorId": "Y2lzY29zcGFyazovL3VzL1BFT1BMRS9mNWIzNjE4Ny1jOGRkLTQ3MjctOGIyZi1mOWM0NDdmMjkwNDY",
 "data":{
   "id": "Y2lzY29zcGFyazovL3VzL01FU1NBR0UvOTJkYjNiZTAtNDNiZC0xMWU2LThhZTktZGQ1YjNkZmM1NjVk",
   "roomId": "Y2lzY29zcGFyazovL3VzL1JPT00vYmJjZWIxYWQtNDNmMS0zYjU4LTkxNDctZjE0YmIwYzRkMTU0",
   "personId": "Y2lzY29zcGFyazovL3VzL1BFT1BMRS9mNWIzNjE4Ny1jOGRkLTQ3MjctOGIyZi1mOWM0NDdmMjkwNDY",
   "personEmail": "matt@example.com",
   "created": "2015-10-18T14:26:16.000Z"
 }
}

roomIdを使ってアクティビティがあったスペースに対してメッセージを送信します。メッセージの送信にはWebex REST APIを使用します。

Node-REDだとこんな感じです。(一部抜粋)

const botAccessToken = 'access token of your bot'
const roomId = msg.payload.data.roomId
const replyMessage = 'Hi!! How are you?'

msg.headers = {
   "Authorization" : `Bearer ${botAccessToken}`
} 
msg.payload = {
   roomId: roomId,
   text: replyMessage
}
return msg

APIはWebexからのリクエストを受けられるよう、パブリックである必要があるので、ローカルでサーバー起動してる場合はngrokを使ってURLを公開すると便利です!

ngrokに関しては、こちらの記事がわかりやすかったです。

ngrokを使用してローカル環境を外部に公開する - Qiita

APIができたら、こちらからWebhookの targetUrl を更新します。

5. 完成

ここまでできたら完成です!もう一度Botにメンションをつけてメッセージを送ってみます。

スクリーンショット 2020-03-13 15.19.04のコピー

Botからリプライがありました!やった〜〜🎉🥳

APIでランダムにメッセージを返してくれるようにしても面白そうですね!

感想

今までユーザーとして見たり使ったりはしてきたけど、自分で作ったことはなかったBot。簡単なものであれば、思ったより簡単にできるし、面白いと思いました!

今後も機会があれば作ってみたいと思います。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

4
株式会社Phone Appli 所属 / リサーチャ / フロント寄り / 投稿は個人的なもので、所属組織とは一切関係ありません
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。