✉️

【TS】Cisco Webex Botアカウントの作成方法とメッセージ送信処理

2021/02/02に公開

JavaScript

はじめに

今回はCisco Webex TeamsのBotアカウントの作成と、Nodeからルームへの送信処理を実装したサンプルコードについてご紹介します。
この業界だとコミュニケーションツールとしてSlackを使っているパターンが多いかと思いますが、Cisco Webex関連のサービスはビデオ会議や通話などの機能も備えているため、非常に便利です。

そもそも`Cisco Webex Temas`とは？

参考：Cisco Webex Teams

以下、引用です。

外出先、デスク、または会議室など、Webex Teams は場面を問わずプロジェクトの促進、関係の強化、およびビジネス課題の解決をサポートします。作業を進めるのに必要なすべてのチームコラボレーションツールを提供するとともに、使用している他のツールと連携して業務をシンプルにします。

要するにコミュニケーションツールの1種です。
よくMicrosoftのteamsと混同されることが多いため、省略せずにWebex Teamsと呼んだりします。

Slackなどと同様にBotアカウントを作成することができ、自由にカスタマイズが効きます。

Bot作成手順

それでは早速Botアカウントを作っていきます。

前提条件

以下の作業は済んでいるものとします。

Teamsアカウントの作成

開発者サイトにログイン

Cisco Webex for Developersにアクセスします。
以下のような画面が表示されるので、画面右上の Log in からログインします。

teams_dev

新規Appの作成

Cisco Webex TeamsではBotやOAuth認証アプリケーションなどをまとめてAppという形式で管理しています。
今回の目的は「Botの作成」なので、右上の My Webex Apps メニューを押下しApp一覧画面へと遷移します。

一覧画面上部の Create New App のボタンを押下することで、どの種類のAppを作成するかを尋ねられます(下図参照)。

create_new_app

ここでは中央の Create Bot を選択します。

Bot情報の入力

続いてBotに関する情報を入力します。

teams_bot

入力が必要な項目は以下の通りです。

Bot Name : ボット名(日本語)
Bot Username : メンションを付ける時に指定する名称(末尾に@webex.botが付きます)
Icon : アイコン(デフォルトから選択 or 縦横512pxのJPEGorPNG)
Description : 概要

入力が完了したら画面下部の Add Bot を押下し、Botを作成します。

アクセストークンの取得

正常に作成された場合、下記のような表示がされます。

teams_token

ここに表示されているのがBotを利用する際に必要な「アクセストークン」の文字列です。
これでBotを使用する準備は完了です。

実装

続いてBotアカウントを用いて、対象のルームに対してメッセージを送信します。
メッセージの送信はREST APIを用いて行います。

参考：Cisco Webex for Developers

Axiosのインストール

今回APIと通信を行うにあたりaxiosを利用することにします。
axiosは言わずと知れたNode.jsで動作するHTTPクライアントライブラリです。

参考：GitHub | axios

下記コマンドでインストールを行います。

yarn add axios

対象となるルームIDを取得する

実際に送信処理を実装する前に、送信対象となるルームIDを取得します。
Webex Teamsでは1対1のメッセージも、グループ間でのメッセージも全てルームという単位で管理されています。

ルームの取得は/roomsエンドポイントで行います。
また、このエンドポイントで取得できるのは Botが参加しているルーム だけなので、必ず対象のルームに対してBotを参加させておきましょう。
※1対1のルームの場合、参加させるだけでなく下図のようにメッセージを送ってあげる必要があります。

teams_room1

import axios from 'axios';

// Teams Botのアクセストークン
const TEAMS_BOT_ACCESS_TOKEN = "【先ほど取得したアクセストークン】";

// 処理開始
(async () => {
  axios
    .get("https://api.ciscospark.com/v1/rooms", {
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + TEAMS_BOT_ACCESS_TOKEN,
      },
    })
    .then((res) => {
      // res.dataの中にBotが参加しているルーム情報の配列がある
      if (res.data.items && res.data.items.length > 0) {
        res.data.items.forEach((room) => {
          console.log(`ルーム名：${room.title}, ルームID：${room.id}`);
        });
      }
    });
})();

実行すると以下のようにBotが参加しているルーム情報がコンソールに出力されます。
この中から好きなルームIDを選んで控えておきましょう。

ルーム名：AAA, ルームID：【AAAのルームID】
ルーム名：BBB, ルームID：【BBBのルームID】
ルーム名：CCC, ルームID：【CCCのルームID】

対象のルームIDにメッセージを送信する

続いて対象のルームにメッセージを送信します。
メッセージの送信は/messagesエンドポイントで行います。

Webex Teamsではメッセージにmarkdownを用いることができます。

import axios from 'axios';

// Teams Botのアクセストークン
const TEAMS_BOT_ACCESS_TOKEN = "【先ほど取得したアクセストークン】";
// Teams 送り先のルームID
const TEAMS_ROOM_ID = "【対象のルームID】";

// 処理開始
(async () => {
  
  let markdown = `# markdownが使えます \r\n`;
  markdown += `こんなふうに \r\n`;
  markdown += `**書けます**`;
  
  // Teamsに通知
  axios.post(
    "https://api.ciscospark.com/v1/messages",
    {
      roomId: TEAMS_ROOM_ID,
      markdown: markdown,
    },
    {
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + TEAMS_BOT_ACCESS_TOKEN,
      },
    }
  );
})();

実行すると、下図のようにBotアカウントから対象ルームへメッセージが届きました。

teams_room2

まとめ

今回はCisco Webex TemasのBotアカウントの作成から、ルームへのメッセージ送信の実装までを紹介しました。
より応用的な内容としてWebhookを用いて対話型のBotを組むこともできます。

いずれにせよ今回のソースはあくまでベースとして、Botからどんなメッセージを送るかが肝心になります。
例えば「日次でタスクを通知する」や「GitHubあたりと連携させてコミットやマージリクエストを通知する」など用途は多岐に渡ると思います。

もしCisco Webex Teamsを普段から使っている方がいましたら、今回の記事が役立てば幸いです。