9
Help us understand the problem. What are the problem?

posted at

updated at

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

2021/1/8追記

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

「Power Virtual Agents でチャットボットに画像を表示する【改定版】」

はじめに

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

image.png

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

前提

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

エクスポート/インポート方法は記事にしていますのでご参照ください
「Power Virtual Agents for Teams のチャットボットをテナント間でコピーする」

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

実現方法

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

image.png

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

image.png

image.png

フォルダ内の[botcomponent.xml]を開くと、nameタグにトピック名が記載されているので見つけられます。
image.png

image.png

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

image.png

JSON形式でトピックの構成が記載されているので、
["botMessages"]内の["channelContent"]にある["content"]の値を下記のように変更します。
image.png

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

今回は下記のように入力しています。
image.png

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

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

image.png

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

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

インポートしたチャットボットの該当メッセージは、表示上は空のように見えます。
image.png

がスクロールの度合いによって、イメージが表示されることもあります。
image.png

これってMarkdownだよね?

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

image.png

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

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

まとめ

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What are the problem?