即作成＆即使用開始！ QnA Maker と Azure Bot Service で作る FAQ 対応チャットボット作成手順

※本記事の情報は、2019年5月29日時点のものです。

#はじめに
Microsoftが提供している、Cognitive Service QnA MakerとAzure Bot Serviceを使うことで、FAQ対応チャットボットを即座に作成し、即座に使い始めることが出来ます。本記事では、FAQ対応チャットボットを無料で作成する手順をまとめます。

#事前準備
##MicrosoftアカウントとAzureサブスクリプション
※Azureを使える環境にある方は、こちらを読み飛ばしてください。
Azureのサービスを使用するためには、Microsoftアカウント(もしくはGitHubアカウント)とAzureサブスクリプションが必要になります。お持ちではない方は、以下から作成・登録をお願いします。

・Microsoftアカウント
[Microsoftアカウントの作成](https://support.microsoft.com/ja-jp/help/4026324/microsoft-account-how-to-create)

・Azureサブスクリプション
[Azureサブスクリプションの登録](https://azure.microsoft.com/ja-jp/free/)

#1. チャットボットの頭脳を構築 with QnA Maker
##1.1 AzureポータルでQnA Makerを作成
Azureポータルをお開き下さい。Azureポータルへのサインインは、[こちら](https://azure.microsoft.com/ja-jp/)から画面上部の「ポータル」をご選択ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/224b9a3b-f256-48e5-6c3a-2009b8a28d09.png)

「リソースの作成」をクリックし、「QnA Maker」を検索後、「作成」を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/d4d7b3eb-5e7e-be50-a160-4be055ec0f4d.png)

QnA Makerを作成するための設定を行います。必須項目を入力し終わりましたら、最後に「作成」ボタンをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/72a4e1fa-f6fa-0ed6-eaed-5100ba862109.png)


※「検索価格レベル」はAzure SearchのSKUを指しています。Azure Searchの無料プランは、一つのサブスクリプションに一つだけしか作成できませんので、ご注意ください。

##1.2 価格プランの変更
作成されたリソースから、「App Serviceプラン」を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/7b3b4684-a46a-eb84-8f4b-fc25213e3886.png)

「スケールアップ」タブをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/81b074cd-70a2-f862-f2fe-eb43dcb2e052.png)

「開発/テスト」から「F1」を選択し、最後に「適用」をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/4e22ba37-0ad3-a65b-2aa9-61e571a894ec.png)

##1.3 ナレッジベースの作成
QnA Makerでは質問と回答の対応表のことをナレッジベースと呼びます。ここで作成するナレッジベースがボットの頭脳として働きます。

[QnA Makerポータル](https://www.qnamaker.ai/)にアクセスし、Azureポータルにログインしたアカウントと同じアカウントでサインインしてください。

サインイン完了後、「Create a knowledge base」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/67483656-9435-d968-5588-1fb562ba25f1.png)

STEP1は完了しているので、STEP2へと進みます。STEP2では、先ほど作成したQnA Makerサービスを選択します。STEP3では、ナレッジベースの名前を任意で決めてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/f25b289a-2330-695c-4a5a-110b688f6b45.png)

STEP4では、ナレッジベースの元となるリソースをアップロードします。今回この記事では、サンプルとして以下のようにFAQがまとめられた.xlsxファイルをアップロードしたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/6a03680d-1a3f-d261-3779-6b4ed5571070.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/0cf938d8-89b6-e0db-af36-a791c865d37f.png)

最後にSTEP5です。「Create your KB」ボタンをクリックすると、FAQボットの頭脳部の構築が始まります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/0de925b6-e9f9-c55b-8d45-2524d844dc95.png)

##1.4 ナレッジベースのテスト
作成が完了しましたら、画面右上の「Test」ボタンをクリックして、テストを行ってみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/519d7679-2986-ea6a-7b5d-ee0568f04733.png)

ボットの形式で、テストを行えることをご確認ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/31342b57-75b6-f4a6-5eee-61633257c46e.png)

##1.5 発行
ボットの頭脳部分を構築することができたので、最後にチャットボットから呼び出せるよう、発行を行います。画面上部の「Publish」ボタンをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/ba501cc5-1643-e969-0825-b8ef918477f5.png)

遷移した画面で再度「Publish」ボタンをクリックし、発行作業は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/a28bcbf3-be47-e723-8ec7-903cae83c177.png)

#2. チャットボットを構築 with Azure Bot Service
発行が完了すると、以下のような画面になります。ここで、「Create Bot」ボタンをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/29ebbb21-06ed-3a3d-0025-eca383e20509.png)

ボタンをクリックすると、Azureポータルがブラウザの別タブで表示されます。ここで、チャットボットを動作させる環境の設定を行います。必須項目を入力し終わりましたら、最後に「作成」ボタンをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/c7fa91a1-8391-4cdf-ab6c-d2b527d85847.png)

作成完了後、Botリソースを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/6edea9d7-860a-bf75-73c0-ef46928ee551.png)

画面左部「Web チャットでテスト」タブを選択すると、ブラウザ上でボットのテストを行うことが出来ます。
これで、頭脳を持ったチャットボットが作成できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/c48bedc3-2e2c-3949-c5f9-4464994b713d.png)




#3. チャンネルに接続 with Azure Bot Service Channels
作成したチャットボットをチャンネルに接続します。本記事では、例としてMicrosoft Teamsに接続をしてみたいと思います。画面左部「チャンネルタブ」をクリックすると、Azure Bot Serviceが提供している豊富なチャンネルが表示されます。この中から、「Teamsのアイコン」をご選択ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/118549b4-d9b1-f764-8cb1-b7aee99f9d3f.png)

「保存」をクリックし、「チェックマーク」を付け、最後に「Agree」をクリックするだけでTeamsへの接続設定は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/7d0d3e4d-c3c8-9c22-a355-7fb785a69d0b.png)

再びチャンネルタブに戻り、「ボットの埋め込みコードを取得」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/39970d29-d709-1241-905e-56abb4f000c8.png)

ここで、htmlのソースコードが表示されます。例えば、これを社内向けのポータルサイトに貼り付けて一斉に配布するのも良いですし、URL部分だけをコピーして何らかの形で共有することも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/886c62b3-4399-3a62-71f8-017df145da54.png)

実際に使用してみます。取得したURLを別タブからアクセスをし、Teamsのデスクトップアプリで動かすことが出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/af31cbc0-094f-7482-8d87-2dc84cef1c0c.png)


#Tips集
追加情報を以下にまとめます。

##1. QnA Makerでサポートされている形式
本記事では、.xlsxファイルをアップロードしましたが、QnA Makerではその他にも以下の形式をサポートしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/49c6dd50-0d91-5ac0-d3b9-452a3a3491c7.png)

実は、以下のようなFAQサイトのURLからも、質問と回答を抽出してナレッジベースを作成してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/f37241ef-56c6-b645-8484-94010cfea0ec.png)

また、製品マニュアルなどが書かれた.pdfファイルからもナレッジベースの作成が可能です(日本語も対応しています)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/bff17e9f-c810-7fac-8575-48f5299ff043.png)

以下、参考ドキュメントです。
・[QnA Makerでサポートされている形式](https://docs.microsoft.com/ja-jp/azure/cognitive-services/QnAMaker/concepts/data-sources-supported)
・[QnA Makerで製品マニュアルを読み込む](https://qiita.com/taminami/items/327ec1ecec8c2ab9b0eb)

##2. Teams以外のチャンネルの接続方法
Azure Bot ServiceではTeamsの他にも、LINEやSlack、Webなど豊富なチャンネルを用意しています。それぞれの接続方法に関しては、以下のドキュメントをご参照下さい。

・[Azure Bot Serviceのチャンネル](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-service-manage-channels?view=azure-bot-service-4.0)

##3. チャットログを取得する
Azureで提供しているサービスの一つApplication Insightsを使えば、ユーザーがどのような質問をして、どのような回答をボットが返したのかを取得することが出来ます。Azure Bot Service作成時にApplication Insightsの作成を有効にすると、使用できるようになります。

分析という機能を使うことで、例えば、以下のように表形式でチャットログをみたり、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/748c2edd-3f53-3f74-d0aa-1ee4d16f1a5c.png)

チャート形式で、使用されているクライアントの比率を分析したりすることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/8b82e9ad-4e32-1880-f687-df8ad1c3b8b5.png)

Application Insightsで上記のような分析を行う際には、クエリを書く必要がありますが、サンプルをGitHubにまとめてありますので、よろしければご参照ください。

・[Application Insights クエリ](https://github.com/NoriMin/AppInsightsQuery-TraceLogs)

##4. サンプルコード集
開発者の皆さんに便利にお使い頂けるサンプルコードが、GitHubに公開されておりますので、よろしければ以下ご参照ください。

・[サンプルコード集](https://github.com/microsoft/BotBuilder-Samples)