QnAMaker×PowerAppsで作るチャットボット - オンプレ系インフラエンジニアがAzureを勉強する

過去記事でQnAMakerを使った世界一簡単なチャットボットの作り方を書きました。
その時はTeamsのチャットボットでしたが、今回はPowerAppsを使って独立したアプリの形にします。

参考サイト様

PowerAppsとCognitive Serviceでチャットボットを作ろう - 吉田の備忘録

QnAMaker × Azure Bot Service でノンコーディング AI Chatbot 作成 (2019年4月版) - Qiita

必要なもの

・Azureアカウント(QnA Maker用)
・PowerAppsが使えるMSアカウント

構成イメージ

f:id:mitsunooon:20191015222314j:plain

QnAMakerの設定

こちらの過去記事を参照ください。

世界一簡単なFAQチャットボットの作り方 - オンプレ系インフラエンジニアがAzureを勉強する

PowerAppsの設定

カスタムコネクタの設定

PowerAppsにサインインします。

カスタムビジネスアプリケーションの構築 | Microsoft PowerApps

[データ]>[カスタムコネクタ]>[＋カスタムコネクタの新規作成]をクリックします。

[OpenAPIファイルをインポートします]をクリックします。

f:id:mitsunooon:20191015222716j:plain

コネクタ名とインポートするOpenAPIファイルを設定します。

f:id:mitsunooon:20191015222830j:plain

OpenAPIファイルはQnAMakerのPublish情報をもとに下記の内容のJSONファイルを用意します。

"host"と"paths"の部分をQnAMakerのPublish情報のものに書き換えます。

f:id:mitsunooon:20191015223057j:plain

{
"info": {
    "version": "1.0.0",
    "title": "PowerApps",
    "description": "PowerApps"
},
"host": "chatbot1015.azurewebsites.net",
"basePath": "/",
"schemes": [
    "https"
],
"consumes": ,
"produces": [
    "application/json"
],
"paths": {
    "QnAMakerのPOST情報": {
      "post": {
        "summary": "QnAMaker",
        "description": "QnAMaker",
        "operationId": "QnAMaker",
        "parameters": [
          {
            "name": "Content-Type",
            "in": "header",
            "required": false,
            "type": "string",
            "default": "application/json",
            "description": "Content-Type",
            "x-ms-summary": "Content-Type"
          },
          {
            "name": "body",
            "in": "body",
            "schema": {
              "type": "object",
              "properties": {
                "question": {
                  "type": "string",
                  "description": "question",
                  "x-ms-summary": "question"
                }
              },
              "default": {
                "question": "hi"
              }
            },
            "required": true
          }
        ],
        "responses": {
          "default": {
            "description": "default",
            "schema": {
              "type": "object",
              "properties": {
                "answers": {
                  "type": "array",
                  "items": {
                    "type": "object",
                    "properties": {
                      "answer": {
                        "type": "string",
                        "description": "answer",
                        "x-ms-summary": "answer"
                      },
                      "questions": {
                        "type": "array",
                        "items": {
                          "type": "string"
                        },
                        "description": "questions",
                        "x-ms-summary": "questions"
                      },
                      "score": {
                        "type": "integer",
                        "format": "int32",
                        "description": "score",
                        "x-ms-summary": "score"
                      }
                    }
                  },
                  "description": "answers",
                  "x-ms-summary": "answers"
                }
              }
            }
          }
        }
      }
    }
},
"definitions": {},
"parameters": {},
"responses": {},
"securityDefinitions": {
    "api_key": {
      "type": "apiKey",
      "in": "header",
      "name": "Authorization"
    }
},
"security": ,
"tags": []
}

[1.全般][2.セキュリティ][3.定義]の各項目は特に設定はせずに進めます。

f:id:mitsunooon:20191015223302j:plain

f:id:mitsunooon:20191015223314j:plain

f:id:mitsunooon:20191015223328j:plain

[4.テスト]まで来たら、[コネクタの作成]をクリックします。

f:id:mitsunooon:20191015223401j:plain

[接続]の項目が出てきます。

f:id:mitsunooon:20191015223445j:plain

[＋新しい接続]をクリックし、APIキーを入力します。
このAPIキーはQnAMakerのPublish情報の「Authorization」の項目の値を入れます。
EndpointKeyから入れます。

f:id:mitsunooon:20191015223511j:plain

[作成]をクリックすると画面が戻ってしまいますので、
また[データ]>[カスタムコネクタ]をクリックします。
先ほど作ったカスタムコネクタをクリックします。

f:id:mitsunooon:20191015223601j:plain

f:id:mitsunooon:20191015223612j:plain

[4.テスト]で質問を入力してテストします。

200が返ってくれば問題なく動いてます。
これでカスタムコネクタの作成が完了です。

f:id:mitsunooon:20191015223644j:plain

画面の設定

次に画面の部分を作ります。
PowerAppsで[アプリ]>[＋アプリの作成]をクリックします。

f:id:mitsunooon:20191015223824j:plain

[キャンバスアプリを一から作成]をクリックします。

f:id:mitsunooon:20191015223853j:plain

アプリ名を設定し、
今回はスマフォアプリにする予定なので[電話]を選択します。

f:id:mitsunooon:20191015223915j:plain

編集画面が表示されます。

まず最初にアプリを開いたときに表示される文言を設定します。
[Fill]の部分をプルダウンで[OnVisible]にします。
右側の欄の関数を下記にします。
ClearCollect(chat,{name:"答える君",text:"ようこそ。何でも聞いてください"})

f:id:mitsunooon:20191015223955j:plain

チャットボットの表示部分を追加します。
[ギャラリー]>[高さ(伸縮可能)]をクリックします。

f:id:mitsunooon:20191015224230j:plain

[データソースの選択]>[コネクタ]で先ほど作ったカスタムコネクタをクリックします。

f:id:mitsunooon:20191015224259j:plain

f:id:mitsunooon:20191015224315j:plain

f:id:mitsunooon:20191015224328j:plain

文章の長さによって枠の高さを自動調整してほしいのでレイアウトを変更します。
[Gallery]>[レイアウト]>[ニュースフィード]を選択します。

f:id:mitsunooon:20191015224345j:plain

[Item]の部分を「chat」に変更します。

f:id:mitsunooon:20191015224437j:plain

[Title]の関数を「ThisItem.name」にします。

f:id:mitsunooon:20191015224504j:plain

[Body]の関数を「ThisItem.text」にします。

f:id:mitsunooon:20191015224528j:plain

チャットボットのアイコンになる画像を設定します。
[ファイル]>[メディア]>[参照]からアイコンにする画像を選択します。

f:id:mitsunooon:20191015224548j:plain

編集画面に戻ります。
[Image]の関数を下記にします。
If(name="答える君",'アップした画像の名前',User().Image)

アイコンの位置も変わるように設定します。
[X]の関数を下記にします。
If(name="答える君",16,570)

f:id:mitsunooon:20191015224615j:plain

会話の入力部分を作ります。
[挿入]>[テキスト]>[テキスト入力]をクリックします。

f:id:mitsunooon:20191015224727j:plain

[ボタン]をクリックします。
[Text]部分を「送信」にします。

f:id:mitsunooon:20191015224751j:plain

ボタンの[OnSelect]を下記の関数にします。
Collect(chat,{name:"あなた",text:TextInput1.Text});
Collect(chat,{name:"答える君",text:First(PowerApps.QnAMaker({question:TextInput1.Text}).answers).answer});
Reset(TextInput1)

f:id:mitsunooon:20191015224818j:plain