今回はMicrosoft PowerAppsとCognitive ServiceのQnAMaker を組み合わせて、プログラミング知識なしでチャットアプリを作成してみます。

このアプリを作るには３つの要素があります：

  1. ボットサービスを作る：今回は質問に答えてくれるQnA ボットサービスを作ります
  2. カスタムAPIを作る：PowerAppsからボットサービスへ接続できる連携を設定します
  3. アプリを作る：アプリでユーザーが質問を入力できるようにします

図にすると以下のようになります

それでは概要を掴んだところで、詳細について説明します。

QnA Makerでボットサービスを作成

ボットは簡単にこちら https://dev.botframework.com の手順を基に作成できますよ。今回の例ではCognitive Serviceの QnAMaker を利用します。

まず、https://qnamaker.ai/ へアクセスして、「GET STARTED」をクリックします。


ログインが求められます。


QnA Makerでは複数サービスを作成できるようになっています。

「Create new service」を押して、新規でQnA サービスを登録します。

適当にサービスの名前をつけます。私はPowerAppsに関するFAQを作るので、「PowerApps QnA」って名付けました。少し記事の内容とかぶって、ややこしくてすみません。

FAQの元ネタとして、サイト等も使えますが、今回はファイルをアップロードしたいと思いますので、下へスクロールします。


このようにTSVのファイルを用意します。見ての通り、構造は質問列と回答列さえあればOKです。

サンプルはこちらからダウンロードできます。


さて、先ほど作成したファイルをアップロードします。

「Select file」を押して、アップロードしたいファイルを選択し、アップロードが終わったら「Create」を押します。


取り込まれると、このように表示されます。


質問の種類を増やすには「Add alternative phrasing」をクリックします。

すると、同じ回答がコピーされた行が増えます。ここに別の種類の質問（回答はおなじになるもの）を記入します。増やすほど質問に対する回答の精度が上がります。

登録し終えたら、「Save and retrain」を押して、質問と回答を機械学習させます。

数十秒ぐらいかかります。少し待ちます。

次に「Publish」を押します。

確認画面が表示されるので、再度「Publish」を押します。

これでボットサービスの準備は整いました！

表示されているテキスト部分が重要で、後に使いますので、メモ帳などへコピーしておきます。

こちらのファイル（JSON形式）をダウンロードし、メモ帳等のテキストエディタで以下の部分を上記の内容と書き換えて上書き保存します。見にくいので、無料で提供されている「Visual Studio Code」等から編集されることをおすすめします。

PowerAppsでボットへ接続するためのカスタムAPIを作成する

やっとPowerAppsで設定できます。

https://web.powerapps.com/login　へアクセスし、ログインします。

「接続」をクリックし、「カスタムコネクタの管理」を選択します。

「カスタムコネクタの作成」を選択します。

「OpenAPIファイルをアップロードします」を選択し、先ほどメモ帳等で修正したファイルを選択します。

アイコンは任意ですので、好きな画像ファイルをアップロードし、「コネクタの作成」をクリックします。

ここはそのままにし、「続行」をクリックします。

「コネクタの作成」をクリックします。

「テスト」タブをクリックし、「新しい接続」をクリックします。

以前にコピーしておいた緑色の部分をAPIキーの項目に入力します。

こちらに記入し、「作成」をクリックします。

初期画面に戻ってしまうので、「カスタムコネクタの管理」を再度クリックします。

作成したコネクタのテストをします。「テスト」タブをクリックし、をクリックします。

「body」のところへ {“question”:”試したい質問”};を入力し、「テスト操作」をクリックします。

スクロールし、「OK（200）」が表示されれば、無事接続できました。「閉じる」をクリックします。

「新しいアプリ」をクリックし、いよいよPowerAppsアプリの作成に進みます！

PowerApps アプリを作成する

アプリを新規作成するので、「空のアプリ」から「携帯電話レイアウト」を選択します。

PowerApps Studioが起動されます。

まず、「ビュー」、「データソース」を選択し、「データソースの追加」をクリックします。

先ほど作成したカスタムAPIを選択します。

ホームタブで「Fill」の隣りにある▽をクリックし、「OnStart」へ切り替えます。

関数バーに以下を記入します。

ClearCollect(chat,{id:0,name:”PowerBot”,text:”こんにちは。ご質問をお伺いします!”})

挿入タブの「ギャラリー」を選択し、「縦」を選択します。

Itemsの関数を「chat」にします。

ボット用の写真をアップロードします。

アプリを保存し、もう一度アプリを開き直します。

写真を選択し、Imageの関数をIf(id=0,’アップした写真名’,User().Image)と設定します。

次に写真の位置を関数で変更するので、「X」を選択します。

関数を If(id=0,16,500)と設定します。

各テキスト項目は、If(id=0,Left,Right)にします。

テキスト > 「テキスト入力」を選択します。

画面下側に設置します。

次にボタンをクリックし、画面に追加します。

Textを「”送信”」に設定し、画面右下に設置します。

OnSelectを選択し、以下の関数を入力します。（改行はShift＋Enterです）

Collect(chat,{id:1,name:”あなた”,text:TextInput1.Text});

Collect(chat,{id:0,name:”ボット”,text:First(PowerApps.QnAMaker({question:TextInput1.Text}).answers).answer})

これで設定は終わりました！再生ボタンを押して試してみましょう！

こんな感じでチャットアプリが開発できました！

もちろんそのままでも使えますが、色やタイトルを追加すると、よりアプリっぽくなりますね。

情報元: PowerBots – Creating smart apps with PowerApps and Microsoft Bots