Microsoft Bot Framework BOT作成・Deploy・SkypeTestまで

今回は、Microsoft Bot Framework を使って、BOT作成から
Deploy、Skypeを使った Bot Test までを行います。

### 必要なもの
・Azure サブスクリプション
・Skype アカウント
・[BotFramework-Emulator](https://github.com/Microsoft/BotFramework-Emulator/releases/tag/v3.5.31)

### 環境
Visual Studio 2015

### Bot Framework ポータルサイト
[https://dev.botframework.com/](https://dev.botframework.com/)

## BOT作成

1.Visual Studio を開き、New Project を選択

![s1.png](https://qiita-image-store.s3.amazonaws.com/0/134550/025ee1d1-b019-d2cf-dc08-12423345bd3d.png)


2.Bot Application を選択

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/e94d5966-392f-e28e-35df-b8b6f82e66f6.png" width="700px">

デフォルトでオウム返し＋文字数を返す BOT が作成されいます。
例）Hi と入力された場合、下のように返ってきます。
"You sent Hi which was 2 characters"

3.ローカルホストを起動してテストします。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/93ad441b-34ba-2341-d0a3-7adbcd985339.png" width="700px">

以下の画面が表示されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/9dfed667-0949-8263-8677-cb996fad4468.png" width="700px">

4.BotFramework-Emulator を起動します。
5.起動後、先ほどのローカルホストのアドレス＋"api/messages" を URL欄に入力し、CONNECT をクリックします。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/6523d5d7-8ef5-8bbd-501f-2cd6e77e5d01.png" width="700px">

6.接続後、メッセージ欄に Hello と入力します。
"You sent Hello which was 5 characters" と返ってくれば正常に動作しています。
LOG欄で応答内容を見る事も可能です。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/5e08d9ca-e538-d358-dff7-47c76767b33d.png" width="700px">

## Deploy

1.[Bot Framework ポータルサイト](https://dev.botframework.com/)にアクセスします。
2.My Bots を選択

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/91b791bd-01d5-1bf3-c4ad-3c0a1583a5ed.png" width="700px">

3.Create a bot を選択

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/831b9b53-cda5-05d6-8fe4-189a3845fbdc.png" width="400px">

4.Register を選択

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/1caf3f91-8cf6-0f0c-c563-86513803e910.png" width="700px">

5.Bot profile 入力

|項目||
|:-----------------|:------------------|
|Display name|任意の名前|
|Bot handle|他のユーザーと被らない名前|
|Long description|説明|


<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/7e0160b3-548d-e444-e0ed-001e0835fe77.png" width="700px">

6.Configuration の Manage Microsoft App ID and password をクリック

※ここで発行される「ボットアプリID」「ボットアプリパスワード」をメモしておく。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/48951098-098c-ac4f-3d80-6612915d266e.png" width="700px">

7.内容に同意後チェックし、Register をクリック

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/6aea0312-a8f6-3828-593d-2ef7d0b0ad10.png" width="700px">

8.Visual Studio へ戻り、プロジェクトから Web.config を開き、先ほど取得した内容を設定します。

|項目||
|:-----------------|:------------------|
|BotId|ポータルの Display name|
|MicrosoftAppId|ボットアプリID|
|MicrosoftAppPassword|ボットアプリパスワード|

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/44cc74df-78ac-01a3-00cd-3bb608d183e4.png" width="700px">

9.プロジェクトルートディレクトリ右クリックから「Publish(発行)」を選択し、Profile として Microsoft Azure App Service を選択します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/e2366680-0f88-d309-d6ed-827ed520b669.png" width="700px">

10.New を選択

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/9761be70-6090-4c4b-50a7-b2b67892b958.png" width="700px">

11.Subscription, Resource Group を選択し、Create をクリック

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/c46f005a-a6e7-5157-53ba-962ddb59735a.png" width="700px">

12.プロジェクトルートディレクトリ右クリックから「Publish(発行)」を選択し、Connection を選択し、
Destination URL をコピーします。
※Azure Portal からも確認できます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/6ba2eb1c-caa5-8fcc-a402-cbabc4d6257f.png" width="700px">

13.再び、Bot Framework ポータルサイトへ戻り、Configuration の Messaging endpoint に先ほどの URL をペーストします。
※ここで URL の先頭を https に変え、末尾に /api/messages を付加します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/271fdaa3-0e5b-dd6f-1582-79914f276740.png" width="700px">

14.Visual Studio へ戻り、Publish から Deploy を実行します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/77a7d880-c217-6d88-deed-d7dd429cb70f.png" width="700px">

## テスト

1.再び、Bot Framework ポータルサイトへ戻り、右上の「Test」をクリックし、
メッセージ入力欄に "Hello" と入力します。
"You sent Hello which was 5 characters" と返ってくれば成功です。

![s18.png](https://qiita-image-store.s3.amazonaws.com/0/134550/d123df74-013c-43b9-9a07-40fc4db92cdf.png)

## Skype でテスト

1.Bot Framework ポータルサイトの CHANNELS タブから Skype をクリックします。

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/089142ba-9ad0-1b5b-f477-56b10f70e447.png" width="700px">

2.以下のページが表示されるので、Add To Contacts をクリック

<img src="https://qiita-image-store.s3.amazonaws.com/0/134550/85b10455-9de4-8932-5e0d-966bcfd3ff69.png" width="700px">

3.Skype の画面で 作成したBotに対して、メッセージ入力欄に "Hello, Bot Sample!" と入力します。
"You sent Hello, Bot Sample! which was 18 characters" と返ってくれば成功です。

![s21.png](https://qiita-image-store.s3.amazonaws.com/0/134550/efb97bdc-e2c1-25d4-c9c2-d4bdd9e7900a.png)

以上、今回は BOTの作成、Deploy、テストまで試してみました。