ChatBot入門-Azure Bot ServiceとQnA MakerでWebサイトで使えるFAQBotを作る

# はじめに
今更ですが、ChatBot（チャットボット）がマイブームです。

今日は、ローソン公式LINEアカウントの「ローソンクルー♪あきこちゃん♪」と会話を楽しんでいました。

好きな曲を聞かれたので、
すかさず　**デイ・ドリーム・ビリーバー**　と答えたところ、、、

![Screenshot_20170323-173115.png](https://qiita-image-store.s3.amazonaws.com/0/151106/60aae51f-b88c-6569-4a57-14872af158fa.png)


若干の恐怖を覚えましたw

これが仕様だったらローソンさんすごいと思いますw
ちなみに、「あきこちゃん」は「りんな」のエンジンを利用しているそうな。


前回の投稿
[ChatBot入門-Slack×GAS×docomo雑談対話APIで簡単開発](http://qiita.com/torisan_kanasan/items/6c1d8cd77269053c02fa)
で、ChatBotの概要をなんとなく掴むことができましたので、
今回は、Webサイトで使えそうなFAQBotを作ってみたいと思います。


# 開発
## 開発の流れ
- Azure Bot Serviceでアプリケーションの作成
- QnAMakerでサービスの作成
- Azure Bot ServiceとQnAMakerを連携
- WebサイトにFAQBotを埋め込む

## Azure Bot Serviceでアプリケーションの作成
こちらの記事がとても丁寧でわかりやすかったので、参考にさせて頂きました。
本当にありがとうございますm(_ _)m
[Azure BOT Service とCognitive Service QnA MakerでFAQのBOTを作る](http://qiita.com/taiki_yoshida/items/d48d6286ce5b8f3aa2a8)

記事の「Azure Bot Serviceの作成」の通り進め、私は`JS派`だったので、
> 10.次に言語を選びます。今回はC#で作りますので、「C#」をクリックします。

のところで、`NodeJS`を選択し、

> 16.BOTの作成がはじまります。2分ぐらいこの画面が表示されるので、待ちましょう。

まで進めた後、QnAMakerでのサービス作成に移りました。

## QnAMakerでサービスの作成
さらに[先ほどの記事](http://qiita.com/taiki_yoshida/items/d48d6286ce5b8f3aa2a8)の「質問と回答を登録する」の通り進め、QnAMakerでのサービス作成が完了しました。

私の場合、手順を間違ったのか、、
> 3. 先ほどAzure Bot Serviceで登録したQnA Makerが表示されています。鉛筆マークをクリックします。

のところで、MyQnAservicesが空っぽ（自動生成されていなかった。。）でしたので、サービスの新規作成を行いました。

サービスの新規作成は以下の手順でできました。

- [QnAMaker公式サイト](https://qnamaker.ai)から`Create new service`を選択します。
<img width="598" alt="スクリーンショット 2017-04-04 0.30.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/b72d2584-a4f6-585e-b5a3-ee49fa1ec2c3.png">


- QnAserviceの作成画面が表示されるので、任意のサービス名を入力し、
<img width="461" alt="スクリーンショット 2017-04-04 0.34.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/29621fff-46a6-e942-b535-63696b62e844.png">


- `Createボタン`を押せば、サービスの新規作成が完了です。
<img width="461" alt="スクリーンショット 2017-04-04 0.34.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/e1d16989-0cbc-c0d2-8296-1a8b664d20e0.png">

あとは、[先ほどの記事](http://qiita.com/taiki_yoshida/items/d48d6286ce5b8f3aa2a8)の通り、
読み込みたいFAQページのURL指定でFAQの内容をQnAserviceに登録し、

> 10.この画面が表示されたらQnA Makerの設定は完了です。Azure Portalから作成したAzure Bot Serviceへ戻ります。

まで進んだら、画面にSampleHTTPRequestが表示されていると思いますので、
以下の**ココ①**(knowledgeBaseId)と**ココ②**(subscriptionKey)の値を確認ください。

```
POST /knowledgebases/***ココ①***/generateAnswer
Host: https://westus.api.cognitive.microsoft.com/qnamaker/v1.0
Ocp-Apim-Subscription-Key: ***ココ②***
Content-Type: application/json
{"question":"hi"}
```
## Azure Bot ServiceとQnAMakerを連携
再度、Azure Bot Serviceに戻り、
`NodeJS`の方は、`index.js`のプログラムの19行目から21行目の以下の箇所に、
先ほど、確認した**ココ①**(knowledgeBaseId)と**ココ②**(subscriptionKey)の値を設定します。

```js

var recognizer = new builder_cognitiveservices.QnAMakerRecognizer({
  knowledgeBaseId: '***ココ①***', 
  subscriptionKey: '***ココ②***'});
```

これでAzure Bot ServiceとQnAMakerが連携できました。

動かない場合は、アプリケーションの再起動をすると良いかもしれません。。

## WebサイトにFAQBotを埋め込む
最後に、WebサイトにFAQBotを埋め込みます。

- `Channelsタブ`から作成したBotに接続するサービスを選択できます。
<img width="758" alt="スクリーンショット 2017-04-04 8.25.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/0e7cc3c6-aa4b-e9e6-4ccd-ebd4b560780a.png">

- この中のWebChatを選択すると、iframeタグでBotをWebサイトに埋め込むことができます。`Editボタン`を選択します。
<img width="519" alt="スクリーンショット 2017-04-04 8.52.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/043557f5-583c-b70e-6dca-5aa351e21d74.png">

- 次に`+ Add new siteボタン`を選択すると、
<img width="759" alt="スクリーンショット 2017-04-04 8.25.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/056e98b2-34c3-ad18-e19a-5a7e953300fb.png">

- Botを埋め込む先のサイト名を聞かれるので、適当に入力し、`Doneボタン`を選択します。
<img width="749" alt="スクリーンショット 2017-04-04 8.25.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/aba74c57-6eb3-f81d-9bc6-b772f7ca5410.png">

- これで、Secret Keysが発行されるので、Embed codeの`YOUR_SECRET_HERE`の箇所に設定し、Embed codeをWebサイトに追加すれば完成です。
<img width="658" alt="スクリーンショット 2017-04-04 8.24.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/e25bbe15-44fe-f33f-0ebc-6cdbc7988488.png">


# まとめ
私は勤務先の自社サービスサイトのFAQを登録してみました。

こんな感じで動いています。
![fef94504cccdbab6dbe55d6e47d3d504.gif](https://qiita-image-store.s3.amazonaws.com/0/151106/476e864f-886d-5052-ad65-a9d7dcd2bece.gif)


QnAMakerにFAQページのURLを入力するだけで、FAQBotができてしまうので、簡単で素晴らしいサービスだと思いました。

ただし、現状だと日本語の**表記ゆれ**には対応していないようで、QnAMakerに登録した質問と完全一致の質問でないと、受け付けませんでした。
（英語だと、**表記ゆれ**もカバーしてくれるそうです。）
<img width="403" alt="スクリーンショット 2017-04-04 0.49.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/151106/2d8c185f-ea37-9142-5b68-7f1d876382d5.png">

文末の**?マーク**が無いだけでもNG！

これだと実用上は厳しいと思いますので、次はこの**表記ゆれ**の対処にチャレンジしてみたいと思います。

お付き合い頂きありがとうございましたm(_ _)m