Cisco Webex Teamsでアダプティブカード(Microsoft Adaptive Cards)を自動投稿

# Cisco Webex Teamsでアダプティブカード(Microsoft Adaptive Cards)を自動投稿

# 概要
COVID-19の影響で緊急で立ち上げられた某組織のとあるチームの情報共有にCisco Webex Teamsを利用させていただいており、そんな中で、得られたナレッジを一時的に溜めるスペースを設けている。

ノーマルのスペースの利用ではナレッジ投稿率があまり芳しくなく、
利便性向上を目指しMicrosoft Adaptive Cardsを利用して、カード内にマニュアル設置、そのカードにリプライする形でナレッジを溜める方法をとり、ナレッジ投稿を促進する。

今回は、Cisco Webex Teams内のとあるチームの任意のスペースにMicrosoft Adaptive Cardsを平日午前6:00に自動投稿したい。

![スクリーンショット 2020-11-05 10.06.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/66d90ee2-500f-c28a-d512-c508ae08f0fb.png)


![スクリーンショット 2020-11-03 23.40.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/01ac205d-c5f0-aa5a-be4a-69bf3b9fc7e9.png)

今回の流れは、以下の通りである。
・Cisco Webex Developersのアカウント取得
・ボットの設置、アクセストークンの取得
・実装
・CRON登録
・動作確認

# 環境
OS : Ubuntu Desktop 20.04.1 LTS
言語: ShellScript

自動投稿にはCRONを使用

# Webex Teamsの設定
Cisco Webex Developersのアカウント取得

まずはこのサイトにアクセス。
https://developer.webex.com/

<img width="1366" alt="スクリーンショット 2020-01-02 3.57.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/13ce3ed2-129a-cd2f-59ce-6364d19cf21d.png">

右上に表示されているSign upをクリックして登録を進めていく。

#アクセストークンの取得

https://developer.webex.com/docs/api/getting-started
getting-startedのページにアクセスし、トークンを取得する

<img width="1238" alt="スクリーンショット 2020-01-02 4.19.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/12c0140f-ade6-6527-24b2-3f05b1ea21a2.png">

デモの段階では12時間ごとにこのトークンを取り直さなければならない。


<img width="1242" alt="スクリーンショット 2020-01-02 4.18.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/3421ede4-dafb-6109-eefe-14cfc7c93b88.png">

トークンを固定したい場合はボットに登録する必要がある。
My Webex Teams Appsをクリック。
<img width="901" alt="スクリーンショット 2020-01-02 4.26.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/90b2dfef-8b5f-f28c-e447-97ccba3cbef4.png">

Botを選択する。
<img width="1234" alt="スクリーンショット 2020-01-02 4.21.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/f65f19ea-d83b-cf55-7809-4d30eb54cb1d.png">

<img width="1232" alt="スクリーンショット 2020-01-02 4.21.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/64e4292f-7ba4-6c29-23c9-4613f40c3767.png">

各種フォームを埋めたらAddbotをクリック。
<img width="1236" alt="スクリーンショット 2020-01-02 4.21.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/0a6f35fc-a932-daba-e707-94a27c99df21.png">

あとは手順に沿ってトークン取得。

この時点でボットに与えられたメールアドレスをメモしておこう。

![スクリーンショット 2020-11-03 23.52.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/148a0b08-b693-3683-8f12-245580e13b17.png)

スペースの追加→スペースへ登録したボットの追加（ボットに付与されたメールアドレスを入れると追加可能）
ここまでの作業を終えたらWebex Teams側の設定は完了だ。

今回は、Cisco Webex Developersの「Create a Message」でAdaptive Cardsを対象のスペースに送信する。
![スクリーンショット 2020-11-03 23.55.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/4618d3b0-3cab-e165-5bcc-f4418545ee48.png)

対象のスペースのIDなどを探すときは、「List Rooms」でIDを取得すれば良い。

![スクリーンショット 2020-11-03 23.57.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/ec385413-aac0-6209-b4a9-9574f7245e89.png)

#実装

今回はシンプルにcurlを使ってjson形式でpostする。

```shell:cardpost.sh 
Date=`date '+%Y/%m/%d(%a)'`
Date=`echo ${Date} | sed -e "s/[\r\n]\+//g"`
curl --location --request POST 'https://webexapis.com/v1/messages' \
--header 'Authorization: Bearer [yourtoken]' \
--header 'Content-Type: application/json' \
--data-raw '{
    "roomId": "[yourID]",
    "markdown": "'"${Date}報告カード"'",
    "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": {
        "type": "AdaptiveCard",
        "version": "1.0",
        "body": [
	  {
            "type": "Image",
            "url": "https://3.bp.blogspot.com/-xACcv2pjhjM/U5l58jnFptI/AAAAAAAAhVk/mLJd7bz2Z-4/s800/hourensou1_houkoku.png",
            "size": "small",
            "horizontalAlignment": "left"
          },
          {
            "type": "TextBlock",
            "text": "'"${Date}報告カード"'",
            "size": "large"
          },
          {
            "type": "TextBlock",
            "text": "",
            "size": "small"
          },
          {
            "type": "TextBlock",
            "text": "対応の有無に関わらず",
            "size": "small"
          },
          {
            "type": "TextBlock",
            "text": "必ず報告をお願いします!!",
            "size": "small",
	    "color": "attention"
          }
        ],
        "actions": [
          {
            "type": "Action.OpenUrl",
            "url": "https://your site location info.",
            "title": "報告方法"
          }
        ]
      }
    }
  ]
}'

```
※Imageは「可愛いフリー素材集いらすとや」から取っています( https://www.irasutoya.com/ )

### 解説

```
Date=`date '+%Y/%m/%d(%a)'`
Date=`echo ${Date} | sed -e "s/[\r\n]\+//g"`
```
日付と曜日を取っています。

```
curl --location --request POST 'https://webexapis.com/v1/messages' \
--header 'Authorization: Bearer [yourtoken]' \
--header 'Content-Type: application/json' \
```
先ほどCisco Webex Developersから取得したトークンをセットします。

```
          {
            "type": "Image",
            "url": "https://3.bp.blogspot.com/-xACcv2pjhjM/U5l58jnFptI/AAAAAAAAhVk/mLJd7bz2Z-4/s800/hourensou1_houkoku.png",
            "size": "small",
            "horizontalAlignment": "left"
          },
```
icon画像です。

```
          {
            "type": "TextBlock",
            "text": "",
            "size": "small"
          },
          {
            "type": "TextBlock",
            "text": "対応の有無に関わらず",
            "size": "small"
          },
          {
            "type": "TextBlock",
            "text": "必ず報告をお願いします!!",
            "size": "small",
	    "color": "attention"
          }
```
説明書きなどに利用します。レイアウトは好みで。
デザインなどは以下の情報が参考になります。
「Adaptive Card のデザインツール」 LTしました (第7回 Cogbot 勉強会 / 2017年7月28日)
https://yseosoft.wordpress.com/2017/07/30/adaptivecard_designtools_lt/

```
"actions": [
          {
            "type": "Action.OpenUrl",
            "url": "https://your site location info.",
            "title": "報告方法"
          }
        ]
```
リンクを開くボタンを貼れます、投稿方法に関するマニュアルなどを作ってクラウドなどに置いておくと良いかもしれません。


# CRON登録
※平日毎週午前6時に投稿

```
$ crontab -e
```

```
0 6 * * 1 sh /yourdirpath/adaptive/cardpost.sh
0 6 * * 2 sh /yourdirpath/adaptive/cardpost.sh
0 6 * * 3 sh /yourdirpath/kos/adaptive/cardpost.sh
0 6 * * 4 sh /yourdirpath/kos/adaptive/cardpost.sh
0 6 * * 5 sh /yourdirpath/kos/adaptive/cardpost.sh
```
以上で完了です。

# 動作確認
実行からPOST完了までに4秒かかりました。
![スクリーンショット 2020-11-05 12.14.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110060/0ff8e124-3761-c383-1053-34ee33d2114f.png)


このカード生成のおかげでめんどくさいと言われるナレッジの投稿率は約9割を超えており、好評です。