Teamsで使えるQ&Aチャットボットを60分で組み立てる(QnA Maker)

#Teamsで使えるQ&Aチャットボットを60分で組み立てる
※タイトル修正しました。　30分→60分(じっくり読みながらやったら60分はかかると思う)


##はじめに

何章かに分けて、書いていこうかと思います。
今回は簡単なQ&A回答ができる、チャットボットをTeams上で動作するのを確認するところまでをゴールとします。

※Appendix以外、ノンプラミングです。


次回以降でLINEに対応させたり
乗換案内等の機能を追加して、LUISと連携させてユーザーの発言を解釈して、Q&A回答したり乗換案内したりするカスタマイズをしてみたいと思います。


**今回のゴールのイメージ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/fef13d94-2cd1-1349-1960-c5e02215b244.png)



##QnA Maker
Microsoft社が提供しているコグニティブサービスの1つ
https://azure.microsoft.com/ja-jp/services/cognitive-services/qna-maker/

特徴をざっくり説明すると以下のような感じです

1) Q&A形式の問い合わせチャットボットを簡単に構築することができる

2) Q&Aの母体となる情報の投入がとても簡単、投入方法は大きく以下の3パターン
　　①既に存在するWebサイト上のQ&Aを自動で解析して、取り込んでくれる
　　②エクセル等のファイルをQ&A形式の情報を入れておいてこれをアップロードする
　　（今回はこの方式でやります）
　　③QnA Makerのトレーニング画面から直接投入
　　（今回は少しだけここにも触れます）

3) 2でも少し触れましたが、QnA Makerのトレーニング画面でAIのトレーニングが簡単に行える


##60分で構築してみる

###①Q&Aデータを準備する

**１．空のExcel Bookを準備します**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/fbe0ed9d-59c5-6e7b-de10-db7232894126.png)

**２．簡単なQ&Aを入力していきます**

ヘッダ行にQuestionとAnswerを用意
※どんなヘッダでも読み込み可能ですが、一部ヘッダの記載内容により読み込まない場合もあるので、確実に読み込めるヘッダを用意しておくことが望ましいです

完成したら保存して、Q&Aデータの準備はこれで完了です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/079d7aeb-ee63-2480-5afb-a3fb970088c0.png)



###②QnA Makerの準備（Azure Portal）

**１．Azure Potalからリソースを作成します**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/169f4803-b997-6f97-0a1d-bf265e12a6a6.png)

**２．検索窓で『QnA Maker』と入力します**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/8d5ac090-dd8c-6c85-ebb9-08519b6293b9.png)

**３．必要情報を入力していきます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/f1e5af5b-990f-1a59-1c6d-fc86b1061b72.png)

**４．デプロイの完了を待ちます**
デプロイが完了したらQnA Makerの準備は完了です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/7828ce73-7b8b-81ea-71e1-2e3fa1b97fac.png)




###③QnA Makerの設定
**１．QnA Makerは専用のポータルがあるのでここで設定やAIのトレーニングを行います**
よく使うので下記はブックマークしておくと
https://www.qnamaker.ai/

**２．Create a Knowledge baseからナレッジベースを作成していきます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/48932192-c8c3-c8d7-bbc5-dcf346cefc22.png)

**３．②-３で設定した必要情報を選んで、②で作成済のQnA Makerを選択します**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/96d1f7d5-95c4-dc78-b58e-a42ff7105579.png)

**４．ナレッジベースの初期構築**
QnAナレッジベースの名前を設定し、①で事前に作成しておいたエクセルをアップロードします
最後にCreate KBをポチっとしたら完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/75953811-7767-2c24-9763-7894daf39173.png)

**５．ナレッジベースの完成**
この画面でナレッジベースにナレッジを追加したり編集したり削除したりすることが可能です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/0b7902e9-6519-4097-398c-e4f5fb5bcdd4.png)

**６．Testを選択して、AIのテスト及びトレーニングを行います**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/8b8a249f-f5e1-0594-eeac-9a35e2c01d81.png)

**７．チャットの画面で質問を投げかけるとAIがナレッジベースを元に回答を返してきます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/43c5ac86-c9cb-eb25-733a-6641e7bee944.png)

**８．トレーニングを行う際は以下の説明を参考にしてみてください**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/bf6341c0-efd2-8ab5-55cc-cef6d4a57ab0.png)

**９．ナレッジの編集やトレーニング実施後は必ず状態を保存しましょう**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/c0242050-523e-80c4-5326-edea24fedfd4.png)

**１０．Q＆AをPublishします**
これを行うことで他サービスとの連携が可能になります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/8ca00321-8bc7-3e5c-1d65-82ea63a90f4f.png)

**１１．ポチっとしましょう**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/57666188-bf57-c784-3114-56a3484b9b1e.png)

**１２．今回は簡単に連携できるBOTを作成するので[Create BOT]を選択します**
Postmanの接続情報を使って、自作のBOTと連携させることも可能ですが今回はBot Serviceを活用してBOTを構築します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/f6bc6d6b-e32f-01df-fbc7-b2de6867ba5c.png)


### ④BotService(AzurePotal)の準備

**１．Bot Serviceを構築するための必要情報を入力します**
以下は入力の例です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/b9845799-4cce-346a-c71b-bfa25dc1dcd8.png)


**２．前項で正常にデプロイが完了するとポータル右上部に完了通知がでるのでリソースに移動します**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/ece4bca0-5619-fcf4-8713-a76104f469b8.png)


**３．BOTがQnA Makerと連携できていることをテストしてみます**
Q＆Aエクセルに記入した質問に対する回答が返ってくることが確認できたらOKです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/74c484a3-6888-94b7-c9a3-9cf192d513a6.png)


### ⑤Teamsに接続して、動作確認

**１．Botのチャンネルを選択します**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/0cf6bfb5-4390-2c08-33fc-59538b4eb610.png)


**２．Microsoft Teamsチャンネルを構成を選択します**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/663ea86c-dcb2-d86a-4f24-ae0950a720c6.png)


**３．保存を押したらチームスとの連携は完了です**
前はもう１ステップあったんですが、今は保存を選択して、条件を確認して問題がなければAgreeするだけです。
※同じプロバイダー内である必要はあると思いますが・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/0e033c22-f2d0-f92d-4e5c-a8604cad8262.png)
　　　　　　↓　　　　↓　　　　↓　　　　↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/2730f9bb-3ad9-8834-9b37-c42a5dc3022c.png)


**４．チャンネル選択にTeamsが追加されていること確認し、Teamsを選択するとチャットボットと会話を始めることができます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/afc3a39e-9ae0-b0d6-e292-7018a464cc0e.png)


**５．最後にTeamsで動作確認したら完了です**
キャプチャの初回挨拶は日本語になっていますが、デフォルトだと英語で挨拶するはずです。
※日本語に変えたい場合は、Appendixをご参照ください！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/135aa417-1ee7-dcda-63b1-2b9bb74ed46f.png)


### ⑥Appendix　BOTの挨拶を日本語にする（簡単なプログラム修正が必要）

**１．ビルドからオンラインコードエディタを呼び出します**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/cfbadb9f-d63b-bc73-4c64-7e10ce54f7d9.png)


**２．ウェルカムメッセージを書き換えます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/0774d783-e864-ab4c-490c-d3c96f75a9fc.png)
　　　　　　↓　　　　↓　　　　↓　　　　↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/412236a0-078a-0754-cf1c-0750022af588.png)


**３．変更を保存してRunします**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/2e156ce5-0cd2-a280-9555-309bf097d94a.png)
　　　　　　↓　　　　↓　　　　↓　　　　↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/5bc61184-cf23-72f4-b7c9-197b0ae4352a.png)


**４．TeamsかBot Serviceで確認してみます**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/95e25a87-64e6-11b2-eb48-ac10c93dddfc.png)