Azure Bot Service ではじめるチャットボット開発 : 祝GA！QnA Maker でノンコーディング開発 (1) QnA Maker 編

QnA Maker はノンコーディングで FAQ チャットボット (Chatbot, 以下 Bot) のコア部分(FAQ DB +検索サービス)を作成できるサービスです。FAQ のリスト (Q と A のペア) をアップロードすると、DB と検索サービスが自動で作成され、質問を Post すると 検索結果から可能性の高い回答が Response として返される Web API が生成されます。

ブラウザーだけで＆1ステップでチャットボットが作成できる Azure Bot Service には QnA Maker をつかうテンプレートが用意されています。Azure Bot Service + QnA Maker を使って、ノンコーディングで FAQ チャットボットを作成する手順を紹介します。

- Azure Bot Service について
    - [Azure Bot Service とは](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-bot-service-%E3%81%A8%E3%81%AF) (※別のページに飛びます)
    - [Azure Bot Service の仕組み](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-bot-service-%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF) (※別のページに飛びます)
- 準備
- 手順
    - (1) QnA Maker 編
        - [Azure Portal から QnA Maker アプリの作成](https://qiita.com/annie/items/e0dc8f9438a92bbc0ba6#azure-portal-%E3%81%8B%E3%82%89-qna-maker-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%9C%E6%88%90)
        - [QnA Maker Web サイトから QnA Maker アプリの設定、展開](https://qiita.com/annie/items/e0dc8f9438a92bbc0ba6#qna-maker-web-%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89-qna-maker-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%A8%AD%E5%AE%9A%E5%B1%95%E9%96%8B)
    - (2) [Bot Service 編](https://qiita.com/annie/items/74f68901cabf4a1a10d3) (※別のページに飛びます)
        - Azure Portal から Question and Answer テンプレートの 新規 Azure Bot Service アプリの作成
        - Azure Bot Service アプリの QnA Maker 用設定
        - Azure Bot Service からの動作確認



# 準備
## Microsoft アカウント の取得
Azure サブスクリプション申し込みに必要です。
>[Microsoft アカウント登録手続き](https://www.microsoft.com/ja-jp/msaccount/signup/default.aspx)

## Azure サブスクリプション申し込み
無料試用版で充分です。上記↑で取得した Microsoft アカウントで申し込みを行います。(無料のプランがあるので、従量課金プランでも大丈夫ですが念のため。)
>[Azure 無料アカウントを今すぐ作成](https://azure.microsoft.com/ja-jp/free/)

# 手順
## (1) QnA Maker 編
### Azure Portal から QnA Maker アプリの作成

[Azure Portal](https://portal.azure.com) をブラウザーで開きます。
左端ナビゲーションバーの [＋]をクリックします。(リソースの新規作成)
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_01.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_01-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

検索欄に qna と入力して **QnA Maker** を検索、クリックして新規作成ペインを表示します。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_01.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_01-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>


以下の情報を入力したら、[作成] をクリックして QnA Maker アプリを作成します。
- Name
    - 新規に作成する QnA Maker アプリの名前 (自分で識別しやすい名前) を入力
- サブスクリプション
    - (デフォルトのまま)
- Management Pricing Tier
    - ここでは F0 (無料プラン) を選択
- Resource Group
    - ここでは新規で作成していますが、作成済みのリソースグループを選択してもOKです
- Search Pricing Tier
    - ここでは F (無料プラン) を選択
- Search Location
    - QnA Maker アプリの検索サービスをホストするデータセンターを選択 (日本国内なら「西日本」)
- App Name (※自動入力)
    - 入力した Name から自動入力されます。QnA Maker アプリをホストする Web サーバーとしての名前になります。azurewebsites.net の中でユニークになる名前を設定します
- Web Site location
    - QnA Maker アプリをホストする Web サーバーのデータセンターを選択 (Search Locationと一緒が良いですね)
   
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_02.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_02-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

「展開が成功しました」というメッセージが表示されたら作成完了です。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_03.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_03-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

>[リソースに移動] をクリックすると、作成した QnA Maker アプリの情報が表示されます。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_03-01.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_03-01-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>
> QnA Maker アプリを作成したリソースグループを確認すると、QnA Maker、Web App (App Service と App Service プラン)、Azure Search が作成されていることが分かります。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_03-02.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_03-02-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

### QnA Maker Web サイトから QnA Maker アプリの設定、展開

[QnA Maker Web サイト](https://qnamaker.ai) をブラウザーで開きます。
**Create a knowledge base** をクリックして、新規 Knowledge Base (KB) を作成します。
サインインを求められたら、QnA Maker アプリを作成したアカウントでサインインします。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_04.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_04-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

**Step 2** で作成した QnA Maker アプリを指定します。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_06.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_06-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

**Step 3** で KB の名前 (自分で識別しやすい名前) を入力します。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_07.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_07-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

**Step 4** で KB のデータソースを指定します。
構造化されているドキュメントや Web サイト、マニュアルなどをそのままアップロードすることができます。もちろん質問と答えがペアになったデータ (タブ区切り(*.tsv)) も利用できます。 

**Step 5** で **[Create your KB]** をクリックすると KB が生成されます。

<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_08.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_08-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>
>利用できるファイル形式は *.tsv, *.pdf, *.doc, *.docx, *.xlsx です。
>構造化されているドキュメント例については [QnA Maker Document > Data Sources](https://docs.microsoft.com/en-us/azure/cognitive-services/QnAMaker/concepts/data-sources-supported) を確認してください。
>今回は以下の Azure サポート FAQ を利用しました。
><a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_08-02.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_08-02-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

しばらくすると生成された KB が表示されます。
修正が必要な箇所はクリックするとセルが修整可能になります。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_09.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_09-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

**Add QnA Pair** をクリックすると行が追加されて、質問と回答のペアを追加できます。
修正や追加が終わったら、**[Save and Train]** をクリックして、KB への保存と検索の Index を作成します。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_10.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_10-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

**[Text]** をクリックするとテスト用のパネルが表示されます。
思ったような結果にならない場合は、KBの修正・追加 → Save and Train を実施します。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_11.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_11-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

テストが終わったら、再度 **[Test]** をクリックしてテスト用パネルを閉じ、**Publish**をクリックします。*Publish* のページで **[Publish]** をクリックすると、KB が Azure 上に展開されて、Bot から利用可能になります。
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_12.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_12-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

展開が完了すると、KB へのアクセス情報が表示されます。
この [Sample HTTP request] の情報が必要になりますので、コピーしてローカルに保存しておきます。

| 保存しておく Sample HTTP request の情報 |
|:--------------|
| POST /knowledgebases/**KnowledgeBaseID情報**/generateAnswer <br/> Host: **https://yourQnAHost.azurewebsites.net/qnamaker** <br/> Authorization: **EndpointKey AuthKey情報** <br/> Content-Type: application/json <br/> {"question":"<Your question>"} <br/> |


<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_13.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_13-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

### 補足: QnA Maker アプリを Web API として利用

[Sample HTTP request] の情報を利用して、QnA Maker アプリのサービス を Web API として利用でき、回答が Response で返されます。

- URL → **https://yourQnAHost.azurewebsites.net/qnamaker**
- Request Type → POST
- Headers
    - Autorization : **EndpointKey AuthKey情報**
    - Content-Type : application/json
- Body
    - {"question":"質問内容"} のフォーマットで入力

<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_13-01.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_13-01-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>
<a href="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_13-03.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/06/bluesky_20180621_13-03-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>