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

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

こんにちは。ソリューション開発部 情報発信分科会の飯出(いいで)です。本業であるシステム開発業務の傍ら、このブログや当社サービスである BRoomHubs、まるごとおまかせZabbix、ならびに当社採用サイトの維持・管理を一手に引き受けています。あくまでも本業の傍ら...
こんにちは。ソリューション開発部 情報発信分科会の飯出(いいで)です。前回の記事に引き続き、既存のコンテンツから簡単に FAQ サービスを作成できると定評の AI サービス「QnA Maker」を使って、チャットからの問い合わせに答えてくれるサービスを作ってみたいと思...

QnA Maker の API を公開する

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

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

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

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] をクリックして、サービスの一覧画面を開きます。

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

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

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

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

質問と回答が全く漏れなく反映されています。

 

API を公開する

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

PUBLISHをクリックします。

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

Publish をクリックするとFAQデータベースを公開することができます。

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

HTTPリクエストのサンプルが表示されれば成功です。

Azure Bot Service と連携する

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

Bot Service を作成する

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

Azure上にBot Service用の領域を作成します。

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

Azure上にBot Service用の領域を作成します。

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

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

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

Azure上にBot Service用の領域を作成します。

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

 

QnA Maker に接続する

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

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

Azure Web App と QnA Maker を接続する。

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

Azure Web App と QnA Maker を接続する。

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

Azure Web App と QnA Maker を接続する。

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

  • QnAAuthKey
  • QnAEndpointHostName
  • QnAKnowledgebaseId

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

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

Azure Web App と QnA Maker を接続する。

これで繋がる。はずです(笑)

 

テストをする

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

作成したチャットのテストをします。

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

Webチャットのテストをします。

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

Web サイトへの埋め込み

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

準備

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

作成した Web チャットを、実際の Web サイトに埋め込む。

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

作成した Web チャットを、実際の Web サイトに埋め込む。

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

作成した Web チャットを、実際の Web サイトに埋め込む。

 

Web ページの作成と表示

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

HTML サンプル

完成しました!

完成したWebチャット画面

まとめ

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

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

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

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

 

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

最新情報をお届けします

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

【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.jpgiideソリューション開発部情報発信分科会クラウド利用技術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...ARK Solution Development Division Developers Blog.