Power Virtual Agents for Teamsでチャットボットに画像を表示する

#2021/1/8追記

もっと簡単に画像を表示する方法を見つけました。
下記に記載いたしました。
HTMLタグを埋め込むことで実現可能です。

**[「Power Virtual Agents でチャットボットに画像を表示する【改定版】」](https://qiita.com/MiyakeMito/items/ce962308a3514f37da31)**


#はじめに

利用しやすく、親しみやすいボットの応答には、画像（イメージ）の表示が不可欠と考えます。
が、現在のところPVAfTにはチャットにイメージを表示する機能がありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/4923f6aa-c41a-1d17-4f01-3800f9bb9c24.png)

何とかイメージで応答できないものかと試行錯誤してみた結果、出力できましたのでその方法を記載します。

https://twitter.com/MiTo60448639/status/1478854413431504897

#前提

PVAは、チャットボットのエクスポート/インポート機能が存在し、他のチームやテナントへのエクスポートがインポートが可能です。
また、現在のところ実装されていないバージョン管理機能の代替として利用できます。

エクスポート/インポート方法は記事にしていますのでご参照ください
[「Power Virtual Agents for Teams のチャットボットをテナント間でコピーする」](https://qiita.com/MiyakeMito/items/b2df9ca9832fbce26a0d)


今回は、このエクスポートファイルを編集することにより、画像の出力を実現します。

#実現方法

イメージを出力するメッセージを含むチャットボットをエクスポートします。
あらかじめ、該当のメッセージには、わかりやすい文言を記載しておくと良いと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/fe7f16bb-c1ce-f491-d041-22bb12865b78.png)


エクスポートファイルを解凍します。
[botcomponents]というフォルダ内には、トピック毎にフォルダが作成されています。
画像を出力したいトピックに該当するフォルダを開きたいのですが、フォルダ名が内部ID名になっているため探す必要があります。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/d0ae007b-dadf-e98c-b9cb-f0102b4a6316.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/f6221b03-60c9-c431-7059-a9af068a84ea.png)

フォルダ内の[botcomponent.xml]を開くと、nameタグにトピック名が記載されているので見つけられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/e720c272-ebae-1fdc-f927-58933a51ea60.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/5ef38c3b-72d4-f779-c63c-8b1e588eca1c.png)

次は、同フォルダ内の[content.json]を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/93063f54-dd91-2e20-9ba3-ea4bd9d28df6.png)

JSON形式でトピックの構成が記載されているので、
["botMessages"]内の["channelContent"]にある["content"]の値を下記のように変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/bfd76e1e-b96e-9882-8a1c-58c1fdf97945.png)

```
![イメージ名](イメージパス) 
```

今回は下記のように入力しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/428e45f5-4625-75c2-73de-9c6bb6a09b1a.png)

（イラストは[「いらすとん」さん](http://www.irasuton.com/)から頂きました、ありがとうございます。
Sharepoint Online上のファイルなどをリンクされても良いかと思います。

[content.json]を上書き保存し、[botcomponents]の階層の全フォルダをzip形式で再圧縮します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/bbd04e7d-7082-c21d-d40f-bba965fa6f66.png)

その後、上記zipファイルを任意のチームにインポートします。

#インポートしたチャットボットを確認

インポートしたチャットボットの該当メッセージは、表示上は空のように見えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/dfb627ed-444f-9fee-00ab-7170f4e97fe9.png)

がスクロールの度合いによって、イメージが表示されることもあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/04643bca-86bb-4f40-4836-28978f1f1e88.png)

#これってMarkdownだよね？

お気づきになられている方も多いかと思われますが、PVAのメッセージはMarkdown形式です。
ですので、他のMarkdown形式も簡単に調べてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480768/0d89b4f1-a64e-5154-b20a-51b5954c01d7.png)

見出し
引用
code
Table
は使えました。
特にTableはボットの応答に活用できそうです。嬉しいですね。

他の形式についても今後調べていきます。

#まとめ
利用者に活用してもらうチャットボットを作成する場合、理解しやすい、直感的な応答が必要不可欠です。
そんな応答を構築する際には、Markdownを活用したリッチな回答を作成出来ると分かり、PVAの可能性をまた感じました。