こんにちは。ソリューション開発部情報発信分科会の飯出(いいで)です。

今回は、QnA Maker で作成した FAQ データベースを「Azure Bot Service」を使って Web チャットとして公開してみます。QnA Maker を使った FAQ データベースの作成方法については、前回までの記事をご覧ください。

【QnA Maker①】AIサービスを利用して簡単にFAQ Botを作成

https://devlog.arksystems.co.jp/2018/08/29/5606/

こんにちは。ソリューション開発部情報発信分科会の飯出(いいで)です。本業であるシステム開発業務の傍ら、このブログや当社サービスである BRoomHubs、まるごとおまかせZabbix、ならびに当社採用サイトの維持・管理を一手に引き受けています。あくまでも本業の傍ら...

そるでぶろぐ

【QnA Maker②】AIサービスを利用して簡単にFAQ Botを作成

https://devlog.arksystems.co.jp/2018/09/11/5654/

こんにちは。ソリューション開発部情報発信分科会の飯出(いいで)です。前回の記事に引き続き、既存のコンテンツから簡単に FAQ サービスを作成できると定評の AI サービス「QnA Maker」を使って、チャットからの問い合わせに答えてくれるサービスを作ってみたいと思...

QnA Maker の API を公開する
- 作成済みの FAQ データベースを選ぶ
- API を公開する
Azure Bot Service と連携する
Web サイトへの埋め込み
- 準備
- Web ページの作成と表示
まとめ

QnA Maker の API を公開する

FAQ データベースの内容を Web チャットに接続するには、まず QnA Maker の API を外部に公開します。

作成済みの FAQ データベースを選ぶ

まず、QnA Maker のコンソール画面を開きましょう。また URL を忘れた？こちらです。

www.qnamaker.ai

QnA Maker

https://www.qnamaker.ai

QnA Maker is an easy-to-use web-based service to train AI to respond to user's questions in a more natural, conversational way. Thanks to a question and answer service with a graphical user interface, you don’t need to be an expert in natural...

[My knowledge bases] をクリックして、サービスの一覧画面を開きます。

サービスの一覧画面にて、前回までの記事で作成した FAQ データベース「TrialFAQ」をクリックして開きます。

前回までに作成した FAQ データベースの中身を見ることができました。

API を公開する

QnA Maker で作成した FAQ データベースを、HTTP エンドポイントとして公開します。画面上部のメニューにある [PUBLISH] をクリックします。

以下のような画面表示となります。ここで [Publish] をクリックすると、 FAQ データベースを公開できます。

HTTP リクエストのサンプルが表示されれば成功です！
ここに表示された内容は、別途テキストエディタなどに保存しておいてください。あとで使います。

Azure Bot Service と連携する

今回は Azure Bot Service の Web App Bot を使って、QnA Maker と連携します。

Bot Service を作成する

Azure 上に Bot Service 用の領域を作成します。
Azure Portal から [リソースの作成] をクリックし、[すべて表示] をクリックします。

その後、[AI + Machine Leaning] → [Web App Bot] の順番でクリックします。[Web App Bot] をクリックした後に、画面右側が更に展開し、 [作成] ボタンが表示されたらクリックしてください。

続いて、Web アプリボットの各項目を入力・選択していきます。

ボット名: TrialFAQ-Bot
ボットテンプレート: Question and Answer (C#)

として進めます。
場所や価格レベルについては、利用状況にあった項目を選択してください。入力し終わったら、[作成]ボタンをクリックしましょう。

[作成] ボタンをクリックした後、デプロイが完了するまで少々時間が掛かります。

QnA Maker に接続する

たった今作成した Azure Web App と FAQ データベースを格納している QnA Maker をここで接続します。

[リソースグループ] をクリックし、表示された一覧から [TrialFAQ-Bot] をクリックします。

もう一度、[TrialFAQ-Bot] をクリック。

[アプリケーション設定] をクリック。

設定する項目は以下の3つです。画面を下方向にスクロールすると、当該項目が見えてきます。

QnAAuthKey
QnAEndpointHostName
QnAKnowledgebaseId

QnA Maker を公開した際に表示された HTTP エンドポイントの Sample HTTP request 欄を見ながら設定します。

POST /knowledgebases/{QnAKnowledgebaseId}/generateAnswer
Host: {QnAEndpointHostName}
Authorization: EndpointKey {QnAAuthKey}
Content-Type: application/json
{"question":"<Your question>"}

POST /knowledgebases/{QnAKnowledgebaseId}/generateAnswer

Host: {QnAEndpointHostName}

Authorization: EndpointKey {QnAAuthKey}

Content-Type: application/json

{"question":"<Your question>"}

設定したら、[保存] してください。

これで繋がる。はずです（笑）

テストをする

[Web チャットでテスト] をクリックすると、以下の画面が表示されます。ここから、動作確認ができます。

では、前回の記事で質問として用いた「事業内容は？」と、質問してみます。

ちゃんと回答していますね！

Web サイトへの埋め込み

作成した Web チャットを、実際の Web サイトに埋め込んでみます。

準備

[チャンネル] → [ボットの埋め込みコードを取得] の順にクリックします。

[Web Chat の構成ページを開くには、ここをクリックします＞] をクリック。

シークレットキーと埋め込みコードを取得します。
[表示] をクリックしてシークレットキーを表示し、コピーしてください。埋め込みコードも一緒にコピーしましょう。

Web ページの作成と表示

今回はシンプルな Web ページを作成し、その中で Web チャットを動かします。埋め込みコードにシークレットキーを反映したタグを、HTML 内に含めます。幅、高さの調整はお好みでどうぞ。

HTML サンプル

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>Web チャットのサンプル</title>
</head>

<body>
    <iframe width="600px" height="800px" src='https://webchat.botframework.com/embed/TrialFAQ-Bot?s=シークレットを入力'></iframe>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Web チャットのサンプル</title>

</head>

<body>

</body>

</html>

完成しました！

まとめ

ここまで早い人で30分、時間が掛かっても1時間あればたどり着けるのではないでしょうか。

事前に FAQ サイトなどが準備できていれば、ノンプログラミングかつ簡単に AI サービスを使ったチャット Bot が作成できてしまいます。今回は紹介しませんが、Skype や Slack を使った形でも同じくらいの手間で構築できると思います。

実運用に耐える FAQ Bot に仕上げるには、ここからが本番です。質問に対する回答の精度向上、チャット上での質問の選択肢提供やデザインの洗練化など、まだまだやる事がたくさんありますね。

機会がありましたら、今後はこのような内容にも触れていきたいと思います。ありがとうございました。

この記事が気に入ったら
いいね！しよう

最新情報をお届けします

Twitter で「株式会社アークシステム」をフォローしよう！

Follow @arksystemsJp

https://devlog.arksystems.co.jp/2018/10/30/5738/【QnA Maker + Azure Bot Service】AIサービスを利用して簡単にFAQ Botを作成https://devlog.arksystems.co.jp/wp-content/uploads/2018/08/aichat03-1200x630.jpghttps://devlog.arksystems.co.jp/wp-content/uploads/2018/08/aichat03-150x150.jpg2018-10-30T09:25:00+00:00iideソリューション開発部情報発信分科会クラウド利用技術AI,Microsoft,Azure,Microsoft Cognitive Services,QnA Maker,Azure Bot Serviceこんにちは。ソリューション開発部情報発信分科会の飯出(いいで)です。今回は、QnA Maker で作成した FAQ データベースを「Azure Bot Service」を使って Web チャットとして公開してみます。QnA Maker を使った FAQ データベースの作成方法については、前回までの記事をご覧ください。QnA Maker の API を公開する FAQ データベースの内容を Web チャットに接続するには、まず QnA Maker の API を外部に公開します。作成済みの FAQ データベースを選ぶまず、QnA Maker のコンソール画面を開きましょう。また URL を忘れた？こちらです。をクリックして、サービスの一覧画面を開きます。サービスの一覧画面にて、前回までの記事で作成した FAQ データベース「TrialFAQ」をクリックして開きます。前回までに作成した FAQ データベースの中身を見ることができました。 API を公開する QnA Maker で作成した FAQ データベースを、HTTP エンドポイントとして公開します。画面上部のメニューにあるをクリックします。以下のような画面表示となります。ここでをクリックすると、 FAQ データベースを公開できます。HTTP リクエストのサンプルが表示されれば成功です！ここに表示された内容は、別途テキストエディタなどに保存しておいてください。あとで使います。Azure Bot...iide飯出和弘Contributorそるでぶろぐ ARK Solution Development Division Developers Blog.