Azure Bot Service × Bot Framework V4 のはじめかた (2018年12月版) ～ Azure、ローカル動作確認、Azure へのデプロイまで

チャットボットのエンジンをWebアプリ(WebAPI)として開発するためのフレームワーク、Bot Framework とそれをホストする Web サーバー機能を同時に作成できる Azure Bot Service を利用するための "はじめかた" (第一歩) を紹介します。

1. [Azure Portal から Azure Bot Service を新規作成](https://qiita.com/annie/items/8183189eb68a04a3de76#1-azure-portal-%E3%81%8B%E3%82%89%E6%96%B0%E8%A6%8F-azure-bot-service-%E3%81%AE%E4%BD%9C%E6%88%90)
2. [作成した Azure Bot Service の設定確認＆テスト](https://qiita.com/annie/items/8183189eb68a04a3de76#2-%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F-azure-bot-service-%E3%81%AE%E8%A8%AD%E5%AE%9A%E7%A2%BA%E8%AA%8D%E3%83%86%E3%82%B9%E3%83%88)
3. [Azure Bot Service のソースコード確認＆ダウンロード](https://qiita.com/annie/items/8183189eb68a04a3de76#3-azure-bot-service-%E3%81%AE%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E7%A2%BA%E8%AA%8D%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89)
4. [Azure Bot Service のソースコードをローカルで動作確認](https://qiita.com/annie/items/8183189eb68a04a3de76#4-azure-bot-service-%E3%81%AE%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D)
5. [ローカルで編集したソースコードを Azure Bot Service にデプロイ](https://qiita.com/annie/items/8183189eb68a04a3de76#5-%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E7%B7%A8%E9%9B%86%E3%81%97%E3%81%9F%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92-azure-bot-service-%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4)

という一通りの手順になります。

# Azure Bot Service とは
[祝GA！Azure Bot Service 概略&作成～公開手順](https://qiita.com/annie/items/cf93a7a832123946a7da) (2017年12月版) をご覧ください。

# 準備
- Microsoft アカウント & Azure サブスクリプション
 - [準備方法](https://qiita.com/annie/items/cf93a7a832123946a7da#%E6%BA%96%E5%82%99) をご覧ください
- C# or Node.js の開発ツール、開発＆稼働環境
 - IDE として [Visual Studio 2017](https://visualstudio.microsoft.com/ja/vs/) (Win/Mac ※無償版のCommunity でOK) または [Visual Studio Code](https://code.visualstudio.com/) (Win/Mac/Linux) など
 - Node.js で IDEで稼働環境をインストールしていない場合は、ローカルに Node.js および npm をインストールして準備しましょう
- [Bot Framework Emulator](https://github.com/Microsoft/BotFramework-Emulator/releases/tag/v4.1.0)
 - チャットボットの動作を確認するためのツール (Win/Mac/Linux)。v4.x版を利用しましょう

# 手順
1. [Azure Portal から Azure Bot Service を新規作成](https://qiita.com/annie/items/8183189eb68a04a3de76#1-azure-portal-%E3%81%8B%E3%82%89%E6%96%B0%E8%A6%8F-azure-bot-service-%E3%81%AE%E4%BD%9C%E6%88%90)
2. [作成した Azure Bot Service の設定確認＆テスト](https://qiita.com/annie/items/8183189eb68a04a3de76#2-%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F-azure-bot-service-%E3%81%AE%E8%A8%AD%E5%AE%9A%E7%A2%BA%E8%AA%8D%E3%83%86%E3%82%B9%E3%83%88)
3. [Azure Bot Service のソースコード確認＆ダウンロード](https://qiita.com/annie/items/8183189eb68a04a3de76#3-azure-bot-service-%E3%81%AE%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E7%A2%BA%E8%AA%8D%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89)
4. [Azure Bot Service のソースコードをローカルで動作確認](https://qiita.com/annie/items/8183189eb68a04a3de76#4-azure-bot-service-%E3%81%AE%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D)
5. [ローカルで編集したソースコードを Azure Bot Service にデプロイ](https://qiita.com/annie/items/8183189eb68a04a3de76#5-%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%A7%E7%B7%A8%E9%9B%86%E3%81%97%E3%81%9F%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92-azure-bot-service-%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4)

## 1. Azure Portal から新規 Azure Bot Service の作成
[Azure Portal](https://portal.azure.com) をブラウザーで開きます。
左端ナビゲーションバーの [＋]をクリックします。(リソースの新規作成)
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_01.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_01-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

検索欄に [bot] と入力します。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_02.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_02-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

Web App Bot、Function Bot, Bot Channels Registration という同じ Bot マークのサービスが表示されます。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_03.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_03-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

- Botの新規作成を行うには、Web App Bot (Azure Web App ベース)または Function Bot (Azure Function ベース)を選択します。
- 作成済みの Bot アプリ (Bot Framework のテンプレートなどを用いて作成したもの) を登録するには、Bot Channels Registration を選択します。

今回は **Web App Bot** を選択、Web App Bot ペインで [作成] をクリックします。
> Web App Bot では Bot Framework V3 および V4 を選択可能です。(2018年12月現在、Function Bot は V3 のみになっています)

<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_04.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_04-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>


Bot Service ペインで設定内容を入力します。

- ボット名
    - Bot Channel への登録名 (BotID) になります。Bot Channel の中でユニークになる名前を設定します。
- リソースグループ
    - ここでは新規で作成していますが、作成済みのリソースグループを選択してもOKです。
- 場所
    - Botアプリをホストする Web App のロケーションを選択します。
- 価格レベル
    - ここではF0(無料のプラン)を選択します。
- アプリ名
    - ボット名と同じ名前が自動入力されます。BotアプリをホストするWebサーバーとしての名前になります。azurewebsites.net の中でユニークになる名前を設定します。
- ボットテンプレート
    - クリックしてテンプレートを選択します
    - V4 の C# と Node.js のどちらかを選択、一番シンプルなテンプレートである EchoBot を選択します。
- App Service Plan
    - 新規 (または作成済み) の Web App のプランを選択します。無料の Free Plan を利用可能です。
- Azure Storage
    - 一時的な作業データなどを保存するストレージを新規作成 (または作成済みのものを選択) します。

入力したら、[作成] をクリックして Bot アプリの作成を行います。
<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_01-e1543462563273.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_01-300x192.png" alt="" width="300" height="192" class="alignnone size-medium wp-image-20305" /></a> 

「展開が成功しました」というメッセージが表示されたら作成完了です。[リソースに移動] をクリックして、Bot アプリの設定確認とテストを行います。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_06.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_06-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

## 2. 作成した Azure Bot Service の設定確認＆テスト
作成した Web App Bot を開き、設定ペインを表示します。
設定ペインのメニューから **Test in Web Chat** をクリックすると、作成した Bot アプリ の動作確認を行うことができます。
V4 EchoBot テンプレートでは、入力した文字をそのまま返す (おうむ返し) が実装されています。また、会話数カウントも合わせて実装されており、**reset** と入力すると、カウントをリセットします。
<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_02-e1543462592326.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_02-300x192.png" alt="" width="300" height="192" class="alignnone size-medium wp-image-20315" /></a>
 
## 3. Azure Bot Service のソースコード確認＆ダウンロード
作成された Bot アプリのソースコードを確認します。
Web App Bot の設定ペインのメニューから **ビルド** をクリックします。
**zipファイルをダウンロード** をクリックすると、ソースコードをダウンロードできます。
<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_03-e1543462619357.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_03-300x192.png" alt="" width="300" height="192" class="alignnone size-medium wp-image-20325" /></a>

>Azure DevOps や Git などを紐づけて、ソースコード更新→ Azure のデプロイ を自動化することもできます。
 
**すべての App Service 設定** を開き、App Service のメニューから **オンラインコードエディターを開く** をクリックすると、ブラウザーの別タブでオンラインエディターが表示されます。こちらでコードの確認や修整なども可能です。
<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_04-e1543462640206.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_04-300x192.png" alt="" width="300" height="192" class="alignnone size-medium wp-image-20335" /></a> <a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_05-e1543462659529.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_05-300x192.png" alt="" width="300" height="192" class="alignnone size-medium wp-image-20345" /></a> 

### ローカルで動作させるための設定 (BotFilePath と BotFileSecret)
作成した Azure Bot Service をローカルで動作させるには、Web サーバー側に自動で設定されている BotFilePath と BotFileSecret 設定値が必要です。

Web App Bot の設定ペインのメニューから **App Service 設定** - **アプリケーション設定** をクリックします。
ページの中から **アプリケーション設定** と書かれた場所を探し、BotFilePath および BotFileSecret の欄をクリックして表示し、値をローカルにコピーしておきます。
<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_06-e1543462677567.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_06-300x192.png" alt="" width="300" height="192" class="alignnone size-medium wp-image-20355" /></a> 
> BotFilePath は Bot Framework での アプリケーション設定ファイル (*.bot) のパス、BotFileSecret は アクセスするためのシークレットキーになります。

## 4. Azure Bot Service のソースコードをローカルで動作確認

ダウンロードした zip のソースコードを展開して、ソースコードを確認します。

- C# の場合
    - ソースコードが Visual Studio ソリューションファイルになっているので、EchoBotWithCounter.sln をクリックして Visual Studio 2017 などで開くことができます。必要に応じて nugetパッケージの復元などを行ってください
- node.js の場合
    - ソースコードのフォルダを Visual Studio Code などで開きます。npm install コマンドでライブラリーの取得を行ってください

### ローカルで動作させるための設定

README.md に記載されている通り、ローカルで Bot Service アプリを動作させるための設定を行います。

- C# の場合
    - appsettings.json を開き、botFilePath と BotFileSecret を入力して保存します
- node.js の場合
    - **.env** という名前でファイルを作成し、botFilePath と BotFileSecret を入力して保存します

<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_07-e1543462696658.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_07-300x190.png" alt="" width="300" height="190" class="alignnone size-medium wp-image-20365" /></a> <a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_08-e1543462752868.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_08-300x190.png" alt="" width="300" height="190" class="alignnone size-medium wp-image-20375" /></a> 

設定が終わったら、Bot Service アプリを起動します。デフォルトでは http://localhost:3878 が指定されており、ブラウザが起動してページが表示されたら起動完了です。
<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_09-e1543462790512.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_09-300x198.png" alt="" width="300" height="198" class="alignnone size-medium wp-image-20385" /></a> 

### Bot Framework Emulator からアクセス

Bot Framework Emulator を起動します。**Open Bot** をクリックし、ソースコードに含まれている <アプリ名>.bot (または BotConfigration.bot) を開きます。BotFileSecret の入力欄で 先ほど Azure Portal で確認した BotFileSecret を入力します。
<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_10-e1543462816788.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_10-300x191.png" alt="" width="300" height="191" class="alignnone size-medium wp-image-20395" /></a> <a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_11-e1543462843897.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_11-300x191.png" alt="" width="300" height="191" class="alignnone size-medium wp-image-20405" /></a> 

チャット画面が開き、**conversationUpdate event detected** という初期(動作確認用)メッセージが表示されたら、無事アクセスできています。メッセージを入力して、おうむ返しに返答されたら動作確認完了です。
<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_12-e1543462859178.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_12-300x191.png" alt="" width="300" height="191" class="alignnone size-medium wp-image-20415" /></a> 

## 5. ローカルで編集したソースコードを Azure Bot Service にデプロイ
アプリを修正して、再度 Azure Bot Service 側にデプロイ(配置します)

- Visual Studio 2017 の場合
    - プロジェクトを右クリックして **[発行]** をクリックします
    - [発行] の画面で、ソースコードに含まれているプロファイルが読み込まれますので、[発行]をクリックすると、Azure にアプリが配置されます

<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_13-e1543462877727.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_13-300x190.png" alt="" width="300" height="190" class="alignnone size-medium wp-image-20425" /></a> 

>デプロイパスワード入力欄が表示されるなど、デプロイできない場合は、[発行]の画面で **新しいプロファイルの作成** をクリックします。[発行先の選択] 画面で **Azure App Service**、**既存のものを選択** を選択して [プロファイルの作成] をクリックします。Azure サブスクリプションが紐づけられている アカウントでサインインし、今回作成した Azure Bot Service の App Service を選択します。このプロファイルを利用して再度発行を行えば OK です。
<a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_14-e1543462894829.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_14-300x225.png" alt="" width="300" height="225" class="alignnone size-medium wp-image-20435" /></a><a href="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_15-e1543462911241.png"><img src="https://msdnshared.blob.core.windows.net/media/2018/11/bluesky_20181129_15-300x225.png" alt="" width="300" height="225" class="alignnone size-medium wp-image-20445" /></a>