過去記事でQnAMakerを使った世界一簡単なチャットボットの作り方を書きました。
その時はTeamsのチャットボットでしたが、今回はPowerAppsを使って独立したアプリの形にします。
参考サイト様
PowerAppsとCognitive Serviceでチャットボットを作ろう - 吉田の備忘録
QnAMaker × Azure Bot Service でノンコーディング AI Chatbot 作成 (2019年4月版) - Qiita
必要なもの
・Azureアカウント(QnA Maker用)
・PowerAppsが使えるMSアカウント
構成イメージ
QnAMakerの設定
こちらの過去記事を参照ください。
世界一簡単なFAQチャットボットの作り方 - オンプレ系インフラエンジニアがAzureを勉強する
PowerAppsの設定
カスタムコネクタの設定
PowerAppsにサインインします。
カスタム ビジネス アプリケーションの構築 | Microsoft PowerApps
[データ]>[カスタムコネクタ]>[＋カスタムコネクタの新規作成]をクリックします。
[OpenAPIファイルをインポートします]をクリックします。
コネクタ名とインポートするOpenAPIファイルを設定します。
OpenAPIファイルはQnAMakerのPublish情報をもとに下記の内容のJSONファイルを用意します。
"host"と"paths"の部分をQnAMakerのPublish情報のものに書き換えます。
{
"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.定義]の各項目は特に設定はせずに進めます。
[4.テスト]まで来たら、[コネクタの作成]をクリックします。
[接続]の項目が出てきます。
[＋新しい接続]をクリックし、APIキーを入力します。
このAPIキーはQnAMakerのPublish情報の「Authorization」の項目の値を入れます。
EndpointKeyから入れます。
[作成]をクリックすると画面が戻ってしまいますので、
また[データ]>[カスタムコネクタ]をクリックします。
先ほど作ったカスタムコネクタをクリックします。
[4.テスト]で質問を入力してテストします。
200が返ってくれば問題なく動いてます。
これでカスタムコネクタの作成が完了です。
画面の設定
次に画面の部分を作ります。
PowerAppsで[アプリ]>[＋アプリの作成]をクリックします。
[キャンバスアプリを一から作成]をクリックします。
アプリ名を設定し、
今回はスマフォアプリにする予定なので[電話]を選択します。
編集画面が表示されます。
まず最初にアプリを開いたときに表示される文言を設定します。
[Fill]の部分をプルダウンで[OnVisible]にします。
右側の欄の関数を下記にします。
ClearCollect(chat,{name:"答える君",text:"ようこそ。何でも聞いてください"})
チャットボットの表示部分を追加します。
[ギャラリー]>[高さ(伸縮可能)]をクリックします。
[データソースの選択]>[コネクタ]で先ほど作ったカスタムコネクタをクリックします。
文章の長さによって枠の高さを自動調整してほしいのでレイアウトを変更します。
[Gallery]>[レイアウト]>[ニュースフィード]を選択します。
[Item]の部分を「chat」に変更します。
[Title]の関数を「ThisItem.name」にします。
[Body]の関数を「ThisItem.text」にします。
チャットボットのアイコンになる画像を設定します。
[ファイル]>[メディア]>[参照]からアイコンにする画像を選択します。
編集画面に戻ります。
[Image]の関数を下記にします。
If(name="答える君",'アップした画像の名前',User().Image)
アイコンの位置も変わるように設定します。
[X]の関数を下記にします。
If(name="答える君",16,570)
会話の入力部分を作ります。
[挿入]>[テキスト]>[テキスト入力]をクリックします。
[ボタン]をクリックします。
[Text]部分を「送信」にします。
ボタンの[OnSelect]を下記の関数にします。
Collect(chat,{name:"あなた",text:TextInput1.Text});
Collect(chat,{name:"答える君",text:First(PowerApps.QnAMaker({question:TextInput1.Text}).answers).answer});
Reset(TextInput1)
これで大体の設定ができました。
右上の再生ボタンで試してみます。
それっぽく動きました！
ちゃんと文章に合わせて高さも変わりますね。
これに追加でラベルやボタンの色などを変えて見た目を整えます。
よりチャットボットらしくなりましたね！
用途
チャットボットはカスタマーなどのお客様対応に使われる印象が強いですが、情報共有としても有用だと思います。
私は今回作ったチャットボットを個人用のKBチャットボットとして使っています。
アカウント情報や作業手順などの情報が整理できて重宝してます。
少し応用して、社内の情報共有アプリにできたらいいなと思っています。
おわり
PowerAppsの好きなところは、表現の幅が広くて凝ろうと思えばいくらでも凝ったUIにできるところです。
また、iPhoneでもAndroidでも使えるアプリが簡単に形にできるのは本当にストレスフリーです。
今回触れていないですが、QnAMakerのmulti-turnという機能もとても便利で好きなので、その機能もPowerAppsで表現できるようにしたいと思います。
