Power Virtual Agentsの使用感を細かく見てみる

# はじめに
新しくPowerPlatformに加わったPower Virtual Agentsについて、どんな機能があるのか気になっていたので、この機会に機能検証をしてみました。

# 料金と始め方
https://powervirtualagents.microsoft.com/en-us/
こちらがサービス紹介ページになっています。

価格は$1,000（2,000 sessions per tenant/month）となっていて、テナントあたりの2000セッションで月11万円と、ちょっと高い印象です。

Office365のPowerPlatformが利用できるプランであれば、そのまま使えるようです。


# 機能概要
英語だけですがMSのサイトに説明ページがあります。
https://docs.microsoft.com/ja-jp/power-virtual-agents/fundamentals-what-is-power-virtual-agents

注目すべきは、分岐処理ができる点かと思いました。
以前からMSには**QnA Maker**というチャットボットを作るサービスが有って、Entityの定義とAIの学習による質問の揺れを吸収するといった有能なサービスです。

Googleにも同様のサービスとして**Dialogflow**というものがあります。

ただこれらのサービスは質問に選択肢を与え、ユーザーがどれを選んだかで答えを変更するという**トリアージュ的なチャットボット**を作るのが難しい点がありました。できないわけではないですが。

概要ページを見ると、質問分岐のフローのスクリーンショットがあります。これだけでも自分的には期待値が上がります。

# 早速初めて見る
サインインをし、ボットの名前をつけます。

ボットの新規作成はヘッダのロボットのアイコンから行けるようです。
<img width="328" alt="スクリーンショット 2019-12-08 11.01.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/d87c2363-5e85-ec78-fe5f-2be2a64d6a4b.png">


なお、ボット作成時のオプションを見ると、PowerAppsやPowerAutomateを作る際に指定する**環境**が選べるようになっています。
つまり、環境ごとにアプリ連携できるように設計されているので、ここは注意しましょう。
<img width="885" alt="スクリーンショット 2019-12-08 11.00.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/c7757a00-c4c3-2308-90b7-0e04d5d09378.png">


まず、test bot の動作確認画面があります。ここにHelloと打ってみましょう。
するとしばらくして返事が来ます。（自分的にはぎりぎり許せるレスポンススピードです。QnAMakerに比べたらおそすぎる感じがします）
<img width="406" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.26.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/e30a4bb7-fb45-676d-a41e-4c377a1849fb.png">


これは予め受け答えのシナリオがセットされているから返事をしてくれるというわけです。

customize your greetingというボタンを押してみましょう。
<img width="256" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.28.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/f9ea83f9-0330-1118-915f-9dd9a7d3cd3f.png">




設定されているフローを見ることができます。
トリガーフレーズというのはユーザーがボットに対して書き込むメッセージのなかで、受け答えのフローを発火させるフレーズのことです。
<img width="804" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.29.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/65240968-f3be-336a-7c63-55e6f606c282.png">



試しにここを日本語にしてみましょうか。

# 内容を書き換える
トリガーフレーズの部分は、一旦おいておいて、メッセージを日本語にしてみましょう。
こんな感じでWYSIWYGで編集できます。一番右のは変数です。今は使いません。
<img width="409" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.35.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/80e36719-3539-0376-2cd0-cf3bd05cd9df.png">




なお、いらないメッセージはここから削除できます。
<img width="573" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.35.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/7b6a567b-3ce7-6537-2960-c609e8126f74.png">




右上のsaveボタンを押します。
<img width="1110" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.38.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/67c7f0e4-d7b0-8112-472c-fb2008a57054.png">




さあ、再度ボットにhelloと投げかけてみましょう。
<img width="389" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.45.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/ce8bc7be-795e-30e5-f03a-6af29d4879ba.png">


メッセージが変わりましたね。


# Topicsについて
なお、トリガーフレーズはTopicsメニューからアクセスできます。
<img width="995" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.39.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/b5574caa-f79e-541d-8606-46dba3e38b8a.png">



SystemTopicsのところにGreetingというのがあるので、それをクリックします。
すると先程のフローのトリガーフレーズ一覧が見れると思います。
<img width="1091" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.42.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/925e9d39-d8cf-cfb2-f468-a490e403ee67.png">





ただ、システムトピックは変更も追加もできないようです。
ちなみに、画面右の**go to authoring canvasボタン**を押すと先程のフローの画面に遷移します。

ユーザートピックも予め4つ登録されているので見てみましょう。
このような感じで編集することができます。
<img width="1093" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.43.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/b044fba5-f9c7-094a-2fff-73959f84d8f1.png">


つまりTopicsの画面で、発火させたいフローをコントロールすることができるのです。

# Entitiesについて
エンティティというのは、最初に記載したとおり、文字の表現の揺れを吸収するための定義になります。QnA MakerでもDialog Flowでもおなじみのやつですね。

どんなものが登録されているのか見てみましょう。

一番上のAgeを見てみるとこうなっています。
<img width="1113" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.49.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/89e016aa-93f2-5812-aa48-5549b395acb5.png">


ただこの定義の仕方はシステム専用のようで、カスタムエンティティの登録項目とは異なっています。

Usage Typeのエンティティを見てみましょう。
<img width="974" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 11.54.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/3db918a6-b11e-fc7c-b540-413c2bc1c5ca.png">


このように、Itemに対して、シノニム（同義語）を定義することができます。カスタムエンティティもこのような形で設定することが可能です。

例えば。。
こんな感じで定義していくとユーザーが表記ゆれで質問してきても、トリガーフレーズが発火するようになります。
<img width="991" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 12.01.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/5dbd2cc1-38f8-069c-b4a8-150bb8440917.png">


あとのメニューは実際にTopicを作ったあとの機能なので、ここでは触れません。

# オリジナルのTopicを作ってみましょう
さて、大体の機能も把握したところで、オリジナルのTopicをつくってみましょう。
画面上のNewTopicsをクリックします。

<img width="523" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 12.10.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/e0ca1d80-ffbc-3bb4-c487-326729bc94fe.png">


今回はこんな感じのTopicを作ってみます。
<img width="1209" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 12.11.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/64d7ced8-7613-9830-bb60-ebebdd299353.png">


よく問い合わせがあるツールの契約周りについてです。
似たような質問がトリガーになるように5つフレーズを登録しました。注意書きにも5から10のフレーズで始めてみてねと書いてあるのでそうします。

トリガーフレーズを登録したら**go to authoring canvasボタン**を押します。

<img width="1144" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-07 23.02.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/c1e89b2f-8de2-d205-227c-ed14976734df.png">


受付のメッセージのあとに、質問を設置します。

<img width="878" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-07 23.03.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/914f5776-4cd2-557c-f358-7c920f45b66c.png">


Identifyという項目で質問のタイプを選択することができます。
デモグラ属性の質問項目などはデフォルトで設定されているようです。といってもアメリカ仕様ですけど。

ここでは複数の選択肢の機能を使いたかったので、Multiple choice optionを選んで、項目を設定しました。

<img width="1160" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-07 23.05.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/d8ca3864-4476-1af2-0b12-7fc0c4eb156d.png">


これですよ、QnAMakerではできなかった分岐処理。これがやりたかった。
Var1という変数が自動で生成されていますが、これはどの選択肢を分岐したかの情報が入るのだと思います。
下のConditionを見ればそれがわかると思います。

```js:vartualagent
Var1 is equal to `選択肢`
```
という条件分岐になっています。

<img width="1141" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-07 23.10.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/2ef399e0-610e-2316-037c-8d0fde7924f4.png">


選択肢１と２はメッセージを追加して、会話終了をつけました。
選択肢3にはさらに質問を追加してみました。
<img width="873" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-07 23.12.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/739bfc85-4c52-86ac-cb36-9c0fd4558c58.png">


これで質問フローが完成したので保存します。

# 動作確認
さて、テストボットを呼び出してみましょう。左下の丸い紫のボタンを押して下さい。
<img width="605" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 12.24.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/928f75de-3810-7e17-bb3a-4501d7444261.png">


こんな感じで動作実行できました。
<img width="673" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 12.25.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/dbefb284-fcce-d911-c055-3b9e447094a9.png">


ちょっと選択肢の表示が見切れてるのは、、、、ってなりましたが。

# Publishしよう
作ったボットをパブリッシュしてみましょう。Publishメニューをクリックして下さい。
<img width="1219" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 12.27.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/46c568d5-a51e-10f3-18f8-bfdd78033bf4.png">



Publishしたあと、デモサイトのリンクをクリックすると以下のページが出てきてボットの共有ができます。
<img width="1292" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-07 23.18.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/3f9f5b06-cbdb-7d2d-b4b7-e7e45cc5216e.png">


・・・・ん？これだと実用性あまりなくないですか？と流石に思いました。
まあデモサイトですし。

そして、Optimize your botの方を見ると、たしかにいろんなチャットアプリと連携できるように記載があるのですが、
Azure Bot Serviceを使わないと連携ができないようです。
QnA Makerでのときと同じですね。

詳しい連携の仕方はこちらに記載がありました。
ですが、C#なんて書いたことないしな…あれ、そもそもローコーディングじゃなかったの？って思いました。

QnA MakerのときのようにAzure側に専用の設定メニューも用意されてなさそうですし、このあたりは今後に期待したいと思います。
https://docs.microsoft.com/ja-jp/power-virtual-agents/publication-fundamentals-publish-channels#configure-channels


# カスタムwebサイトをつかってSharepointサイトへ
しかし他になんか手はないかなとおもい、Channelsをみていると先程見たデモサイトとは別に**カスタムwebサイト**というのをみつけました。

<img width="782" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 12.35.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/3a4012c8-88c4-4a21-8556-906c42e92369.png">


これを選択すると、なんとiframeでchatごと埋め込めるじゃないですか。
<img width="607" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 12.37.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/d131e990-418f-c216-76b1-7dd52540109c.png">


早速コピーしてシェアポイントに画面を切り替えます。

<img width="1237" alt="ã_¹ã_¯ã_ªã_¼ã_³ã_·ã_§ã__ã__ 2019-12-08 12.40.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5508/c68e61a6-228d-2748-b6df-1b35ced1d9be.png">


ドメインが許可されてないと怒られてしまいました。が、管理者に問い合わせてここの設定を変えるだけで使えるようになると思います。


# 終わりに
ざっとPower Virtual Agentの使い方について説明してきました。最後シェアポに埋め込められれば完璧でしたけどね。
powerBIに一旦読み込ませる方法もあるとは思いますが、煩雑になってしまうので直接埋め込められるようにドメイン設定を変えたほうが自分はいいかなと思いました。


# PowerAppsとの連携方法
と、ここまで書いておいてまだPowerAppsとの連携について記載していませんでした。
現状PowerAppsが外部のwebコンテンツを直接埋め込むことができないので、PowerBIタイルを中間にかませることでそれができます。

まず、PowerBIで新規にダッシュボードをつくり、タイルを追加をおします。
<img width="543" alt="スクリーンショット 2019-12-08 15.03.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44851/8355e276-61c3-a7a6-f55e-1131c7920a03.png">

webコンテンツのタイルを選択し、先程の**カスタムwebサイト**で書き出されたHTMLの中から、iframeタグの部分だけを取り出して、埋め込みコードの部分に貼り付けます。
<img width="551" alt="スクリーンショット 2019-12-08 15.03.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44851/d42d0bb2-3ca1-f53f-1d3f-ad13c78a14c4.png">

するとこんな感じになります。
<img width="590" alt="スクリーンショット 2019-12-08 15.03.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44851/545ff8be-cb81-e233-1365-1b52eff8c637.png">

その後、PowerAppsを立ち上げて、**挿入＞グラフ＞PowerBIタイル**を選択。
先ほど作成したタイルを指定します。
<img width="806" alt="スクリーンショット 2019-12-08 15.01.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44851/4d45137f-1727-b0af-97e1-c7e4c11deab1.png">

アプリを保存して実行すると、PowerApps内でVirttalAgentのチャットを表示することができるようになりました。
<img width="1217" alt="スクリーンショット 2019-12-08 15.02.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44851/137fda9a-b88a-159a-35a6-96e5babde0b1.png">