お手軽社内問い合わせ対応Botを作る話

**｢Botを使って、試しに社内問い合わせBotを作ってみたい!｣**
という方向けの記事です。

2018年9月に、簡単にお問い合わせBotが作れる(誇張じゃないよ!) [BotFramework](https://dev.botframework.com/) の [バージョン4がリリースされました。](https://github.com/Microsoft/botbuilder-dotnet/wiki/Roadmap)
バージョン3の記事はいろいろ出てくるのですが、バージョン4の記事が少ないため ｢社内問い合わせBot｣ を作りながら情報を整理してみようと思います。


# 用意するもの
* Azure アカウント( [無料作成方法はこちら](https://azure.microsoft.com/ja-jp/free/search) )
* Visual Studio
* お問い合わせウェブサイト、または、問い合わせ内容&回答がセットになったCSV
![00.PNG](https://qiita-image-store.s3.amazonaws.com/0/315364/1526e742-68fc-159a-a776-9caeedc0e0a3.png)

# 作成手順
## Botアプリケーションの作成
まずBotの大枠のアプリケーションを作成します

1. Visual Studioを起動 > ファイル > 新規作成 > プロジェクト
2. オンライン > 検索ボックスに｢bot｣と入力 > Bot Builder V4 SDK Template for Visual Studio を選択 > OK
 * 初めて作成する場合はダウンロードするか聞かれるのでそれもOKします
![01.PNG](https://qiita-image-store.s3.amazonaws.com/0/315364/45ff5be2-07c0-e75d-7f84-eb2fe51957d6.png)
3. 動作確認
 * 何も変更せずに実行するとブラウザが起動します。
 *  ブラウザのページに表示される[Download the Emulator](https://github.com/Microsoft/BotFramework-Emulator/releases/tag/v4.1.0)のリンクからご自分の環境にあったエミュレータをダウンロードします。現状の最新版はv4.1.0です。

![02.PNG](https://qiita-image-store.s3.amazonaws.com/0/315364/7f260aaf-9b51-df03-5f43-6ce8d7f22716.png)

* エミュレータを起動 > create a new bot configuration
![03.PNG](https://qiita-image-store.s3.amazonaws.com/0/315364/f7db7e17-6153-61a4-94c2-579560e46b9c.png)
* `Bot name` に任意の名前、 `Endpoint URL` `http://localhost:3978/api/messages` を指定し `Save and connect` 。ファイルの保存を求められたら保存します。
![04.PNG](https://qiita-image-store.s3.amazonaws.com/0/315364/dbe52c6e-ae7e-452d-bd2a-e42d84df6fd7.png)
* 適当に文字を打ち、発言がオウム返しされることが確認できました
![05.PNG](https://qiita-image-store.s3.amazonaws.com/0/315364/f46e832c-d853-ef22-bb65-345c38706a68.png)

## QnAナレッジベースの作成
* QnAMakerのナレッジベースは実はBotとは切り離されたサービスのため、V3でもV4でも作成方法に変更ありません。
* 次の記事が参考になります→ [「QnAMaker」とは？Microsoftの自動チャットボット会話生成サービスを試してみた](https://ledge.ai/qnamaker/)

## QnAをBotにつなぎ込む
* `Bot Builder Echo Bot V4` プロジェクトの `EchoWithCounterBot.cs` ファイルに必要な変更を加えます
* 以下を追加

```EchoWithCounterBot.cs
using System;
using System.Net.Http;
using System.Text;
using Newtonsoft.Json;
```

```EchoWithCounterBot.cs
    public class QnaResponse
    {
        public Answer[] Answers { get; set; }
    }

    public class Answer
    {
        public string[] questions { get; set; }

        public string answer { get; set; }

        public float score { get; set; }
    }
```

* `OnTurnAsync()` メソッドを以下で上書きします。
* エンドポイントキー、URLはQnAMakerのSETTINGSに記載されています。
![06.PNG](https://qiita-image-store.s3.amazonaws.com/0/315364/96dc5425-58e3-9273-d76e-535031b269f1.png)

```EchoWithCounterBot.cs
        public async Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default(CancellationToken))
        {
            if (turnContext.Activity.Type == ActivityTypes.Message)
            {
                using (var client = new HttpClient())
                {
                    using (var request = new HttpRequestMessage())
                    {
                        // リクエストの作成
                        var question = $"{{\"question\": \"{turnContext.Activity.Text}\"}}";
                        request.Method = HttpMethod.Post;
                        request.RequestUri = new Uri("***ここにURLを記載***");
                        request.Content = new StringContent(question, Encoding.UTF8, "application/json");
                        request.Headers.Add("Authorization", "EndpointKey " + "***ここにエンドポイントキーを記載***");

                        // リクエストを実行
                        var response = await client.SendAsync(request);

                        // レスポンスから回答を取り出し表示する
                        var respString = await response.Content.ReadAsStringAsync();
                        var qnaResponse = JsonConvert.DeserializeObject<QnaResponse>(respString);
                        await turnContext.SendActivityAsync($"{qnaResponse.Answers[0].answer}");
                    }
                }
            }
        }

```
* 動作確認。エミュレータでQnAMakerの返答が表示されることが確認できました。
![07.PNG](https://qiita-image-store.s3.amazonaws.com/0/315364/c8c84fc5-a12c-8c95-547d-5295f9d0fa92.png)
![08.PNG](https://qiita-image-store.s3.amazonaws.com/0/315364/2fba7656-5654-84fb-ef93-0b2b4a4a3396.png)

以上、お手軽社内問い合わせ対応Botを作る話でした。

# 参考
* [BotBuilderV4_QnAMaker](https://github.com/seosoft/BotBuilderV4_QnAMaker) 参考にさせていただきました