QnA MakerとWeb App Botで表示されるUIを変更する

2018年7月24日2018年7月26日

QnA MakerとWeb App Botで簡単にFAQチャットボットが作成できます。
作成方法はこちら。
ですが、デフォルトのUIは簡素であるため、自分でレイアウトを変更出来るようにします。

標準のチャットUIは

AzureポータルからWebアプリボットのチャンネルを確認すると、埋め込みコードが表示されます。それをhtmlファイルなどに記述することでチャットUIが表示されます。

それでは、この埋め込みコード(iframeタグ)を利用すると、どのようなチャットUIかというと。。。

こんな感じになります。
非常に簡素なUIとなってます。

これを変更します。

まず情報の確認

QnA MakerとWeb App Botを作成した際にQnA Maker側にて『Sample HTTP Request』にて認証情報が確認できると思います。
まずはこちらの情報を控えておいてください。

コンテンツ側の仕様

今回UIを変更するうえで、PHPとCurlを利用します。
これが前提条件となってますので、サーバー内に組み込んでおいてください。

プログラムソース

では、実際にQnA MakerとWeb App Botにアクセスするプログラムを書きます。
『Sample HTTP Request』に表示された認証情報を記述してください。

<?php
$question = "{質問内容}";
 
/* QnA Maker接続 */
$host = '{Hostに書かれたURL}';
$path = '{POSTに書かれたパス}';
$key = 'Authorization: EndpointKey {文字列}';
 
$url = $host.$path;
 
$arr = array('question' => $question);
$data_string = json_encode($arr);
 
$ch = curl_init();
 
curl_setopt($ch,CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch,CURLOPT_POSTFIELDS, $data_string);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        $key,
        'Content-Type: application/json',
        'Content-Length: ' . strlen($data_string))
);
$result = curl_exec($ch);
curl_close($ch);
 
$answers_arr = json_decode($result , true);
$answer = $answers_arr["answers"][0]["answer"];
 
echo $answer;
?>

これで、コマンドレベルでの動作確認が可能になっているはずです。

QnA Makerからの返答は$resultに格納されますが、その後にjson_decodeにて$answers_arrに配列として保存されます。
もし配列状態を確認したければ、こちらをvar_dumpなどで確認してください。