Power Virtual Agents と QnA Maker を利用したシンプルな FAQ 対応ボットの作成方法

~~※本記事は2019年11月20日現在の情報です。~~
※本記事は2020年2月3日に編集されました。

#はじめに
本記事ではIgnite 2019で発表されたPower Virtual Agentsを用いたシンプルなFAQ対応ボットの作成方法をご紹介します。FAQ対応ボットのナレッジベース(KB)として、今回はAzure QnA Makerを利用します。現時点で、Power Virtual AgentsとQnA Makerはネイティブで統合されていないようなので、今回はPower Automate(旧名:Flow)を飛び道具として使います。

#前提条件
・Azure QnA MakerでKBが作成されていること

#Power Automateを用いたフローの作成
1.はじめに、以下のリンクからPower Automateにアクセスをしてください。
https://flow.microsoft.com

2.「ソリューション」タブから「Common Data Services Default Solution」を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/04601469-c565-44af-6b88-a1836a4e50e9.png)

3.「+新規」から「フロー」を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/e92d3441-5dae-7ac2-cc4d-6c64dacadf9f.png)

4.「HTTP要求の受信時」トリガーを選択します。スキーマは以下としてください。作成後、「+新しいステップ」をクリックしてください。

```json
{
    "type": "object",
    "properties": {
        "flow_input_string": {
            "type": "string"
        }
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/7c43a38c-d4dd-cf87-c907-45e7b10ed5b0.png)

5.QnA Makerの「Generate Answer」コネクタを選択します。接続名は任意の文字列、Site URLとAPI KeyはAzureポータルを開き、QnA Makerリソースのクイックスタートタブから取得できます。入力できたら、「作成」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/437e3870-55a3-2bfc-590b-1bf90101f35d.png)

6.QnA MakerでKBをPublish後に出力される3つの情報を入力してください。Questionには、flow_input_stringを指定します。必須項目を全て入力後、「+新しいステップ」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/bfb44127-a55d-2b8a-3c11-40eb14bb9030.png)

7.「応答」コネクタを選択します。本文は、以下のように設定します。string(body..の部分は、「式」を使って変数化しておきます。
参照: https://stackoverflow.com/questions/58843297/how-do-i-return-an-answer-from-qna-maker-connector-to-power-virtual-agent

```json
{"output": body('Generate_answer')['answers'][0]['answer']}
```

Bodyは以下のように設定します。

```json
{
    "type": "object",
    "properties": {
        "output": {
            "type": "string"
        }
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/a7156c07-58f5-89ad-894f-fe8ab9e203f7.png)


8.最後に保存をクリックして、フローの準備は完了です。


#Power Virtual Agentsからフローを呼び出す
1.以下のリンクからPower Virtual Agentsにアクセスしてください。
https://powerva.microsoft.com/

2.サインアップが正常に完了したら任意のボット名を決め、「Create」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/aa8716ea-997b-0baf-db83-e00c99580a68.png)

※現状、Createをクリックすると、サンプルのチャットボットができあがった状態になります。空の状態から作ることはできないので、今回は既存のものを改良していく形で作っていきます。

3.「Track between topics」をオンにし、「Hello」と入力してみてください。すると、画面右側にデザイナーが現れます。今回はこの「Greeting」トピックからPower Automateで作成したフローを呼び出します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/b7e3311f-f725-0dd1-7d78-d1c7d91ce3f8.png)

4.不要なコネクタは削除し、お好みのカスタマイズをしていきます。今回は、「Add a question」コネクタを使って、ユーザーに対して質問を投げてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/cc6c67fb-267d-28d6-19c3-e853151f350a.png)

5.この時点で一旦「Save」をしてテストしてみましょう。ボタンが現れたかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/3ee77d25-9bcb-b7b3-abc2-b77d95ba7b09.png)

6.「天気に関しての質問」ボタンがユーザーから選択されたときのアクションを決めていきます。再度「Add a question」コネクタを使います。ここで、Identifyは「User's entire response」とします。こちらを選択することににより、Var2にユーザーからの質問(文字列)を格納することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/4bfa9c3b-adab-072c-599f-b47e4fe454f8.png)

7.ユーザーからの質問をPower Automateに投げます。「Call an action」メニューから先ほど作成したフローを選択してください。(フローが複数個ある場合にはお間違えないように)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/cc9bfe99-ea0d-b543-e1ff-afddacee3006.png)

8.「Select a variable」から「Var2」を選択します。最終的にQnA MakerにこのVar2(ユーザーからの質問)が投げられて、返ってきた値がoutputに格納されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/54216df7-8c4c-3823-c079-ea1ab07a6ae5.png)

9.「Show a message」を選択します。QnA Makerが出力した答えを表示するために、変数としてoutputを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/f36f2a13-91c6-cd77-d954-3ded8a039d37.png)

10.「Save」をクリックして完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/dd549b39-75da-c268-e015-521a3db02695.png)

#テスト
質問に対しての回答が返ってくれば成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/8285e009-89b1-4fa2-a284-e5525913ad84.png)

#さいごに
まだPreview中で動作が不安定なところもありますが、UXは素晴らしいですし、このスピード感でチャットボットを作ってすぐにチャットクライアントに接続できてしまうのは画期的だと思います。今後QnA Makerがネイティブ統合されることを期待しています！内容に関して、フィードバック等ありましたら是非ともコメント頂ければと思います。