やさしいチャットボットのつくりかた -1.Bot Frameworkでチャットボットを作ってみよう！

#どういう記事？
Azure素人の自分がMicrosoft AzureのBot FrameworkとCognitive Serviceと触れ合いながら、難易度も人への接し方も**“やさしい”**チャットボットを作ってみた際の備忘録の第1部です。
PowerPointで記録していたものをQiita化してみたものになるので、そんな感じの画像が頻出します。
Qiita初心者なので、書き方が下手でも広い心で許してほしいです。そして全体的にゆるいです。

#何を作るの？
図で表すとこんなかんじのくだらないボットを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/e9f3e916-ba33-19c1-214d-3a1d5693af1a.png)

以下、図中の番号に沿って何を表しているか簡単に説明。

 1. まず、どこのご家庭にもある「世の中に疲れてきた人」を用意します。
 2. 「世の中に疲れてきた人」は絶望をLINEでつぶやきます。
 3. Azure Bot Service/Bot Frameworkにより構成されたチャットボットに伝わります。
 4. Azure Cognitive ServiceのText Analyticsというサービスを使って、その発言がネガティブなのかポジティブなのかの判定を行います。
 5. 発言がネガティブと判定され、ボットアプリに戻ってきます。
 6. すかさずTwitter上で、偉人さんたちのありがたく、やさしいお言葉を発言しているボットと連携します（そういうBotがあるので使わせていただきます）。
 7. 偉人さんのやさしい言葉をランダムで取得し、ボット経由で「世の中に疲れた人」に伝えます。
 8. それを受けて、「世の中に疲れた人」はちょっと元気になり、明日を強く生きることができます。
 
ちなみに、もし1の段階で「世の中に疲れてきた人」ではなく「リア充」が用意された場合については以下の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/dc38138b-0b5e-6a00-fb0b-04576583fed1.png)

1. うっかり「リア充」があらわれます。
2. 「リア充」はリア充めいた発言をLINEでつぶやきます。
3. Azure Bot Service/Bot Frameworkにより構成されたチャットボットに伝わります。
4. Azure Cognitive ServiceのText Analyticsというサービスを使って、その発言がネガティブなのかポジティブなのかの判定を行います。
5. 発言がポジティブと判定され、ボットアプリに戻ってきます。
6. アプリ内に用意した独自の塩対応フレーズ一覧（単なるテキストが入った配列）にアクセスします。
7. 塩対応フレーズ一覧からランダムでフレーズを選び、ボット経由で「リア充」に伝えます。
8. それを受けても「リア充」は「リア充」なので幸せいっぱいです。

…ね？やさしいチャットボットでしょ？

#このボットを作ったときの私のスペック
- 開発経験
    - 正式な業務としての経験はゼロ
    - 業務の片手間でやったWebRTC関連のアプリ開発くらい(HTML,CSS,JS）
    - C#経験は学生時代（約8年前）に某学生ITコンテストに参加した際に使ったのみで、当然記憶は皆無。
- Azure（クラウド）経験
    - 転職し初めてAzureに触れて2か月ほど。
    - 前職はSI（っぽいサービス）の運用保守、プロジェクトマネージャー。完全占有、完全物理環境だったのでクラウド経験ゼロ。
 
…つまるところ、こんなレベルの人でも作れますよーっていう記事です。
というか、こんなレベルの人がつまった部分も紹介しながら書いていきたいと思います。

# アジェンダ
以下の5部構成になります。

1. [Bot Frameworkでチャットボットを作ってみよう！](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)**←イマココ**
2. [ボットをAzure（クラウド）にデプロイしてみよう！](https://qiita.com/miokawa/private/c71f9f4b62ce2b1c2864)
3. [Cognitive Serviceでテキスト分析をしてみよう！](https://qiita.com/miokawa/private/cdb243401fe3c8d9d583)
4. [Twitterからつぶやきをとってきてみよう！](https://qiita.com/miokawa/private/eb9f16220a36f65d7098)
5. [LINE経由でボットと話してみよう！](https://qiita.com/miokawa/private/c6f0b550f8fa41a23228)

なお、公式ドキュメントに沿って作りましたので、それらのリンクを張り付けつつ、辿った道筋通りに書いていきます。
その筋の方からすると遠回りだったり野暮ったかったりすると思いますが、ご容赦ください。

# 1. Bot Frameworkでチャットボットを作ってみよう！
まずは赤枠で囲われた部分の作り方です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/fd5397ac-92f4-db9a-5e2d-fc23ace6c6a2.png)

## 1.1 参考ドキュメント
##### Bot Framework SDK for .NET を使用したボットの作成
今回の作業は公式ドキュメントの[Bot Framework SDK for .NET を使用したボットの作成](https://docs.microsoft.com/ja-jp/azure/bot-service/dotnet/bot-builder-dotnet-sdk-quickstart?view=azure-bot-service-4.0)を参考にしています。

## 1.2 前提条件
まずは上記リンク内の「前提条件」の部分に従って、以下を準備します。

- Visual Studio 2017 以降
- C# 用 Bot Framework SDK v4 テンプレート
- Bot Framework Emulator
- ~~ASP.Net Core および C# での非同期プログラミングに関する知識~~ ←これは私は持ち合わせていませんでしたが、なんとか動くものは作れましたので、持ち合わせていない同志のみなさん、ご安心ください。

#### Visual Studio 2017以降の準備
普通に公式ドキュメントのリンクを辿って、[Visual Studioのダウンロードページ](https://visualstudio.microsoft.com/ja/downloads/?rr=https%3A%2F%2Fdocs.microsoft.com%2Fja-jp%2Fazure%2Fbot-service%2Fdotnet%2Fbot-builder-dotnet-sdk-quickstart%3Fview%3Dazure-bot-service-4.0)からダウンロードできます。Visual Studio Codeも出てますが、今回は公式ドキュメント通り、Visual Studio 2019で行こうと思います。
自分に適切なエディションを選びます。Visual Studio Communityなら無料なので学生にもやさしいですね。
なお、今回は主にWindows環境を例にとって、記載していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ffc3987d-8b1f-e273-7e1d-63962c8d21cc.png)

#### C# 用 Bot Framework SDK v4 テンプレートの準備
こちらも公式ドキュメントのリンクから、[Bot Framework SDK テンプレートのダウンロードページ](https://marketplace.visualstudio.com/items?itemName=BotBuilder.botbuilderv4)へ行きます。リンク先はこんな感じのサイトです。Downloadボタンからテンプレートをダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/3b8136b2-b0e5-6b60-60cb-351590a5b998.png)

<font color="red">※先にダウンロードしたVisual Studioが起動した状態だとインストールが先に進まないので、起動している場合は閉じてください。</font>

なお、こちらの[Q&A](https://marketplace.visualstudio.com/items?itemName=BotBuilder.botbuilderv4&ssr=false#qna)によると、 Visual Studio for Macだと、この手順ではテンプレートのインストールができないようです。Macの方向けのやり方は[こちら](https://github.com/microsoft/BotBuilder-Samples/tree/master/generators/dotnet-templates)で、この手順で進めると、一気のこの記事中の[1.4 Visual Studioでのボットの開始](#14-visual-studioでのボットの開始)まで進めることができます。

#### Bot Framework Emulatorの準備
これがあると、チャットボットのプログラミングをしたあと、Azure（クラウド）上にアップしなくても、ローカルでボットとおしゃべりのテストができます。便利です。入れましょう。
公式ドキュメントのリンクから[Bot Dramework Emulatorのダウンロードサイト](https://github.com/microsoft/BotFramework-Emulator/blob/master/README.md)へ行き、Downloadの欄から、ハイライトしている**Github releases**のリンクをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/6400e427-e006-db5e-01e6-b739b9dc1e40.png)


Githubに飛ぶので、下の方の**Assets**から自分の環境にあったものを選んでダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/f1a2a42e-491b-ddf0-15f6-12ef5714ae92.png)

#### ASP.Net Core および C# での非同期プログラミングに関する知識
これについてはいきなりどうこうできるものではないので、諦めましょう。

## 1.3 ボットの作成
ここからは基本的に公式ドキュメント通りに進めればよいので、そちらを見てサクサクできちゃう人はそっちのが早いかと思います。
ただ、超初心者な私は、それでも躓きポイントが多々あったので、心底細かく丁寧にもたもたと書いていきたいと思います。

#### Visual Studioで新しいプロジェクトを作成
まずは前提条件で用意した、Visual Studioを起動し、**作業の開始**から**新しいプロジェクトの作成**を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/902d71e1-1e76-7935-2301-136109e88ad8.png)


検索ボックス内に「**Bot**」と入れると、いくつかBotのテンプレートが出てきます。これが前提条件でダウンロードした、Bot Frameworkのテンプレートたちになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ad1446a6-7acb-c0d1-6d10-c5e1ab928ef1.png)




※「Bot」と入れても何も出てこない方（今回初めてVisual Studioをインストールした方は出てこないと思います）は、ワークロードをダウンロード＆インストールする必要があります。**さらにツールと機能をインストールする**をクリックして、Visual Studio Installerを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/c238b44f-ace3-c731-08dd-90685533a6a2.png)

Visual Studio Installerが起動したら、**ASP.NETとWeb開発**のワークロードを選択し、右下の**変更**をクリックします。
ダウンロード＆インストールに少し時間がかかります。終わったら、端末再起動を要求されるので、再起動をしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/0c4d965e-2894-3506-56da-091fa55dbc0c.png)


これで公式ドキュメント通り、「**Bot**」と入れるといくつかのBotテンプレートが出てくると思いますので、「**Echo Bot (Bot Framework v4 - .NET Core 3.1)**」を選び、**次へ**をクリックします。似たようなものとして、Echo Bot (Bot Framework v4 - .NET Core 2.1)というのもあるのですが、[Microsoftの公式サイト](https://docs.microsoft.com/ja-jp/azure/bot-service/dotnet/bot-builder-dotnet-sdk-quickstart?view=azure-bot-service-4.0&tabs=vs#create-a-bot)が.NET Core 3.1の記載になっているので、そちらに合わせます。
なお、Echo Botとはオウム返し（ユーザー発言「hogefuga」→ボット発言「Echo:hogefuga」）をしてくれるボットです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/45bf5d5a-989b-a78b-681f-1b0684a67874.png)




次の画面でプロジェクトに名前をつけます。ここでは「YasashiiBot」としています。
プロジェクトの保存場所も選択します。
ソリューション名はプロジェクト名に合わせて勝手に入力されます。
完了したら、**作成**をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/0bf46d25-b78a-2756-a0eb-249d3b0283af.png)


プロジェクトが作成されて、Visual Studio画面が立ち上がってくると、こんな感じになります。
右側に何やらいろいろとファイルがあるかと思います。先ほどテンプレートを選んだことにより、オウム返しボットに必要な各種コードが一式用意された状態で生成されています。便利ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/5402d72a-ea5b-010d-2d25-c34c6af474cf.png)


ちなみにオウム返しの文章を生成している部分はここです。
右のソリューションエクスプローラーで、**Bots→EchoBot.cs**を選ぶと見れるソースコードの中です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/42368047-a250-15cc-2f0d-31519b253adf.png)


## 1.4 Visual Studioでのボットの開始
では早速、このオウム返しボットを動かしてみます。
最終的にはクラウド上にこれらのプログラムをアップして、インターネット経由でLINEなどからアクセスできるようにしますが、まずは今使っているPCの中（ローカル）で動かして、試しに喋りかけてみます。

画面の上の方にある、**▶IIS Express**というボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/ce10c50a-171c-6140-6e25-3ad92603ca8c.png)


こんな感じで、画面下の部分に、ローカルで動かしてみているよー的なログがだばだば出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/b0ff60fc-faba-0ce0-0b10-9cfe1cf9ebe3.png)

ちょっと待つと、勝手にブラウザが起動されて、こんな画面が出ます。これが出てくると、ボットが無事PC上（ローカル）で実行されているということになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/7a99f389-4725-dba0-a29c-46615305ec9f.png)

## 1.5 エミュレーターの起動とボットの接続
では、前提条件で準備したエミュレーターを使って、このPC上で動くボットに話しかけてみましょう。

Bot Framework Emulatorを起動して、画面中段の「create a new bot configration（新しいボット構成を作成する）」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/de6a1e40-ec8a-b7f3-d3cc-124c583c213a.png)


こんなポップアップが出てくるので、まずはBot nameを入れます。ここでは「YasashiiBot」としています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/27688748-da7f-62ac-0401-97654329392e.png)

次にEndpoint URLを入れます。ここは、**ボットが稼働しているページのURL＋/api/messages**となります。これは初期状態でナビゲーションが書いてある通り、通常は**http://localhost:3978/api/messages**でOKですが、念のため先ほどボットをローカルで実行したら勝手に開いたブラウザのURLを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/1c35ef50-0e96-c15d-700b-8d783dbee30b.png)

やっぱりボットが稼働しているページのURLは**localhost:3978**であっていましたので（異なっていたら変更をしてください）、ナビゲーション通りに入力して、Save and connect（保存および接続）ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/5fabdfa2-9541-f2fe-12b6-c5decc8d8d4f.png)


すると、ここで設定したボットの構成を保存する場所を聞かれますので、適宜保存場所を指定して、保存をクリックしてください。私はボットのプロジェクトと同じフォルダに置きました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/b5f89c86-7a6d-6383-7d6d-079a54377399.png)


## 1.6 ボットとのやり取り
保存が完了するとエミュレーター画面に戻り、ボットがウェルカムメッセージ「Hello and welcome!」と言ってくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/e323d2d8-92de-eaee-ea96-e20d73be269a.png)
ちなみにソースコード的には、Echobot.csのこの部分になります。
このような感じで、どこのコードで何をしているのか、ちょっとずつちょっとずつ把握していきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/fc2e3e4d-fe59-c80d-4831-cd74022a3bee.png)


では、いざ、話しかけてみましょう！！エミュレーターの画面下部分のボックスに、メッセージを入力し、Enterを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/af470e04-e2d3-875e-0178-d1df36711061.png)

ちゃんとオウム返ししてくれました！やったね！

## 1.7 ボットの止め方
PC上（ローカル）で稼働しているボットは、Visual Studioの上の方にあるストップボタンを押すと止まります。テストが終わったら止めてあげてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596292/7238bd0f-48f7-4955-5ffc-c24f1971d00d.png)



# 以降の工程について
思いのほか長くなってしまったので、以下の工程は別の記事として用意しようと思います。

1. [Bot Frameworkでチャットボットを作ってみよう！](https://qiita.com/miokawa/private/6f1a3e480580e1e29abc)**←イマココ**
2. [ボットをAzure（クラウド）にデプロイしてみよう！](https://qiita.com/miokawa/private/c71f9f4b62ce2b1c2864)
3. [Cognitive Serviceでテキスト分析をしてみよう！](https://qiita.com/miokawa/private/cdb243401fe3c8d9d583)
4. [Twitterからつぶやきをとってきてみよう！](https://qiita.com/miokawa/private/eb9f16220a36f65d7098)
5. [LINE経由でボットと話してみよう！](https://qiita.com/miokawa/private/c6f0b550f8fa41a23228)