QnA MakerとAzure Bot ServiceでFAQを答えてくれるボットを作る（Slack & Webサイト）

# 概要
うまいことFAQを答えてくれるAIサービスがないかなーと探していたらQnA Makerに出会い、あまりの簡単さに感動しました！
日本語情報のデータベース化や日本語のゆれにもかなり対応できている印象です。過去半年ほどの記事をみると日本語対応がまだまだだという情報が多かったので、ここ最近精度が上がったのかもしれません。


# QnA Maker
今回はサンプルとして、仙台市のよくある質問(http://www.city.sendai.jp/shise/koho/faq/index.html )を取り込んでみたいと思います。WEBからデータベース化する以外にも、tscやpdf、doc形式のファイルも取り込めるようです。

![Kobito.4HYTUg.png](https://qiita-image-store.s3.amazonaws.com/0/52904/2e4eeb62-73f5-29c1-af6e-699f6d986c3f.png "Kobito.4HYTUg.png")


まずは、QnA MakerでFAQデータベースを作成します。
QnA Maker(https://qnamaker.ai) にログインして、Create new serviceを開きます。

![Kobito.Mlfmiv.png](https://qiita-image-store.s3.amazonaws.com/0/52904/0062fa0d-9859-49af-5afa-43d8730bcce2.png "Kobito.Mlfmiv.png")


SERVICE NAMEに今回作成するFAQデータベースの任意の名前、FAQ URL(S)にFAQが掲載されているURLを入力します。

![Kobito.PCzCxU.png](https://qiita-image-store.s3.amazonaws.com/0/52904/30b42075-5b04-feda-0da6-7846f8552081.png "Kobito.PCzCxU.png")


たったこれだけでFAQデータベースが作成されます！
しばらくすると以下のようにWEBサイトを解析して、取得されたFAQ情報がデータベース化されます。自動で下層ページまで取得してくたり、質問と回答を認識してくれます。（WEBサイトの作り方によってはうまく取得できない場合もありました。）

![Kobito.TEphpv.png](https://qiita-image-store.s3.amazonaws.com/0/52904/9f79179a-1e5c-22c0-0099-f02d871a717f.png "Kobito.TEphpv.png")

これを外部サービスと連携する場合は、Publishをクリックします。

![Kobito.jwvKAW.png](https://qiita-image-store.s3.amazonaws.com/0/52904/f97a9514-2b4e-fb10-5f08-3fc339b0c6c8.png "Kobito.jwvKAW.png")

Publishするデータベースの内容が表示されるので、問題なければPublishをクリックします。

![Kobito.rQZVLv.png](https://qiita-image-store.s3.amazonaws.com/0/52904/232078c4-3de0-03cc-2013-c27cecef65df.png "Kobito.rQZVLv.png")


これで、外部からの連携できるようになりました。

![スクリーンショット 2017-05-12 18.09.41.png](https://qiita-image-store.s3.amazonaws.com/0/52904/309bf543-b253-74fd-f5cd-cf7c911c2c25.png "スクリーンショット 2017-05-12 18.09.41.png")


# Azure Bot Service

QnA Makerで作成されたFAQデータベースをbot化するためにAzure Bot Serviceと連携していきます。
ポータルからAzure Bot Serviceを作成します。

![Kobito.wLYC0E.png](https://qiita-image-store.s3.amazonaws.com/0/52904/fa5fa4ba-f5d0-b6dc-4a16-63c85b07528c.png "Kobito.wLYC0E.png")


作成に必要な情報を入力します。
![Kobito.9xuSQs.png](https://qiita-image-store.s3.amazonaws.com/0/52904/0018af2e-028a-cff3-6adb-a3f8fd4edd87.png "Kobito.9xuSQs.png")

作成したBot Serviceを開くと、Microsoft App IDの作成が求められるので、 IDを生成し、パスワードを元の画面に入力します。
![Kobito.idxdH6.png](https://qiita-image-store.s3.amazonaws.com/0/52904/f598010a-defd-414a-d3cb-86647deb411c.png "Kobito.idxdH6.png")

Botの言語を選択し、Question and Answerを選択し、Create botをクリックします。

![Kobito.Y5K0tw.png](https://qiita-image-store.s3.amazonaws.com/0/52904/86e44f27-41d3-6126-39b0-727bf8840cff.png "Kobito.Y5K0tw.png")


![Kobito.byxopH.png](https://qiita-image-store.s3.amazonaws.com/0/52904/aacab94a-59d2-6d14-1d27-1d9edc8aa81f.png "Kobito.byxopH.png")

先ほど作成したQnA Makerのデータベースを選択してOKをクリックします。
![Kobito.RZXybc.png](https://qiita-image-store.s3.amazonaws.com/0/52904/f314b5c8-f0dc-7eae-52b7-3bf2276b45b1.png "Kobito.RZXybc.png")

Botのコードが表示されます。データベースに存在しない質問を受けた時には、
「No match! Try changing the query terms!」
とデフォルトで設定されていますので、
「質問を理解できませんでした。http://www.city.sendai.jp/shise/koho/faq/ を参照してください参照してください。」
と日本語に変更しておきます。
![Kobito.B2qEtz.png](https://qiita-image-store.s3.amazonaws.com/0/52904/9e32b7d5-0cc4-fbdd-7504-7d0d4a4fc6ae.png "Kobito.B2qEtz.png")

# Slackとの連携

次にCHANNELSタブに移動し、外部サービスとの連携を設定します。
![Kobito.dp1Cco.png](https://qiita-image-store.s3.amazonaws.com/0/52904/028dee48-b77d-d627-bf07-41201f735e95.png "Kobito.dp1Cco.png")

Slackと連携する場合は、Slackのアイコンを押すと、接続手順が表示されますので、その通りに進めていきます。
Redirect URIを入力する箇所が、Azure上の手順と異なっていました。(Redirect URIはOAuth & Permissionsに設定箇所があります。)
![Kobito.YppPpX.png](https://qiita-image-store.s3.amazonaws.com/0/52904/1cf12bc6-7e3e-7e33-6dae-7e9b5901c0b8.png "Kobito.YppPpX.png")

連携が完了すると、slack上からbotを招待すると利用できるようになります。
![Kobito.EkcN7d.png](https://qiita-image-store.s3.amazonaws.com/0/52904/f4d97942-74d5-c0d0-048c-02a0943ad6ac.png "Kobito.EkcN7d.png")

チャンネルに書き込むとSlackが応答しおてくれます。
![Kobito.84PatP.png](https://qiita-image-store.s3.amazonaws.com/0/52904/3125e9aa-0aee-a6a1-e99a-eb8b8a769ad6.png "Kobito.84PatP.png")


このように多少のゆらぎにも対応してくれました。
![Kobito.xTOwa8.png](https://qiita-image-store.s3.amazonaws.com/0/52904/6f82a572-3a04-dc8b-6e64-638c1b8c4b53.png "Kobito.xTOwa8.png")

#WEBサイトへのチャットフォームの設置

Azure Bot ServiceのチャンネルからWebChatのEditを選択すると、WEBサイトに埋め込むhtmlを生成できます。

![Kobito.a4PqA4.png](https://qiita-image-store.s3.amazonaws.com/0/52904/ec381583-2247-7c71-efd7-5798b1876154.png "Kobito.a4PqA4.png")

Add new siteをクリックして、チャットを設置するサイトURLを入力します。

![Kobito.lylky5.png](https://qiita-image-store.s3.amazonaws.com/0/52904/952e8f41-ec69-e7df-1134-f46996444118.png "Kobito.lylky5.png")

キーとhtmlが生成されるので、htmlにキーを埋め込み、WEBサイトに追加するとFAQチャットが利用できます。
![Kobito.ACQYc7.png](https://qiita-image-store.s3.amazonaws.com/0/52904/41311f73-255d-f41b-692b-5d8ee14139b9.png "Kobito.ACQYc7.png")

ブラウザから見るときちんとチャットが表示されています。
![Kobito.ZRNVKD.png](https://qiita-image-store.s3.amazonaws.com/0/52904/c5a4b3ac-2fde-308a-6293-3e9c7633cab9.png "Kobito.ZRNVKD.png")

# 所感
うまくサイトからFAQのデータベースが生成できれば15分くらいでFAQを答えてくれるbotが作成できます。
QnA Makerすごい！
Azure Bot Service簡単！
これはいろいろと使えそうです！