祝GA！Azure Bot Service 概略&作成～公開手順

本記事は [CogBot Advent Calendar 2017](https://qiita.com/advent-calendar/2017/cogbot) :17日目の記事です。

> 2018/11/28 追記
Bot Framework V4 の発表および GA により Azure Portal の画面や操作方法が変更になっています。Azure Bot Service × Bot Framework V4 の作成方法については、[Azure Bot Service × Bot Framework V4 のはじめかた (2018年12月版)](https://qiita.com/annie/items/8183189eb68a04a3de76) をご覧ください。

2017 年 12 月にGA (プレビュー終了→一般提供開始) になった Azure Bot Service を利用すると、開発環境がなくてもブラウザーだけで＆1ステップでチャットボット (Chatbot, 以下 Bot) が作成できます。
Azure Bot Service を操作したことがない方 & Bot Framework で Bot を開発したことのない方向けに手順を紹介します。また、Bot Framework をつかった Bot アプリ開発の経験のある方向けに、確認ポイントや変更点なども記載していきます。

- Azure Bot Service について
    - [Azure Bot Service とは](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-bot-service-%E3%81%A8%E3%81%AF)
    - [Azure Bot Service の仕組み](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-bot-service-%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF)
- [準備](https://qiita.com/annie/items/cf93a7a832123946a7da#%E6%BA%96%E5%82%99)
- 手順
    - [Azure Portal から新規 Azure Bot Service アプリの作成](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-portal-%E3%81%8B%E3%82%89%E6%96%B0%E8%A6%8F-azure-bot-service-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%9C%E6%88%90)
    - [Azure Bot Service アプリの設定確認&テスト](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-bot-service-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%A8%AD%E5%AE%9A%E7%A2%BA%E8%AA%8D%E3%83%86%E3%82%B9%E3%83%88)
    - [Azure Bot Service アプリのソースコード確認](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-bot-service-%E3%82%A2%E3%83%97%E3%83%AA%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)
    - [Azure Bot Service アプリで使用されているライブラリー群](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-bot-service-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E4%BD%BF%E7%94%A8%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%83%BC%E7%BE%A4)
    - [Azure Bot Service アプリの Bot Channel 関連設定](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-bot-service-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE-bot-channel-%E9%96%A2%E9%80%A3%E8%A8%AD%E5%AE%9A)
- 補足
    - [Azure App Service? Web App?](https://qiita.com/annie/items/cf93a7a832123946a7da#azure-app-service-web-app)
    - [Azure Web App or Azure Function?](https://qiita.com/annie/items/cf93a7a832123946a7da#2-%E3%81%A4%E3%81%AEazure-bot-service-web-app-bot-%E3%81%A8-function-bot)

<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_15-e1513499194406.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_15-300x212.png" alt="" width="300" height="212" class="alignnone size-medium wp-image-19125" /></a>

#Azure Bot Service について
##Azure Bot Service とは
Chatbot というのは、Web API であり、Web サービスのアプリケーション(Bot アプリ)の構築と、Bot アプリをホストする Web ホスティング環境 (Web サーバー) が必要です。Azure Bot Service では、予め用意されている Bot Framework による Bot アプリ のテンプレートを元に Bot アプリを作成し、Web ホストとして Azure App Service Web App または Azure Function を利用して Bot アプリをデプロイ(配置、公開)するサービスです。
また、Bot Channel と呼ばれる、Bot アプリに対して メッセージングツール (Microsoft Skype, Microsoft Teams, Slack, Facebook Messenger, ...) からメッセージを送受信できるインターフェースを備えています。

##Azure Bot Service の仕組み
Azure Bot service には下記2つの機能 (サービス) があり、一度の作成操作を行うだけで Bot アプリを作成&公開できます。また、開発環境がなくても (Azure に用意されている) オンラインエディターを使ってコードを直接編集することも可能です。
これまで Bot Framework による Bot アプリを開発した際に、個別に必要であった作業や各種設定、登録を全て Azure Portal から自動で行うため、開発が簡単になりました。

###Bot アプリの作成＋ホストする機能 : Azure App Service (Web App) または Azure Function
Web サービスホストの機能を提供する Azure App Service Web App または Azure Function をホスト先として、Bot Framework ベースの Bot アプリの作成および配置を行います。

###Bot アプリを各種メッセージングサービスに接続する機能 : Bot Channel
Bot アプリの作成＆配置と同時に、メッセージングツールへのインターフェースとなる Bot Channel への登録をも行います。

#準備
##Microsoft アカウント の取得
Azure サブスクリプション申し込みに必要です。(今回は Azure Bot Service 以外にも Cognitive Services LUIS, QnAMaker などを利用するうえで同じ１つのアカウントを利用することにします)
>[Microsoft アカウント登録手続き](https://www.microsoft.com/ja-jp/msaccount/signup/default.aspx)

##Azure サブスクリプション申し込み
無料試用版で充分です。上記↑で取得した Microsoft アカウントで申し込みを行います。(無料のプランがあるので、従量課金プランでも大丈夫ですが念のため。)
>[Azure 無料アカウントを今すぐ作成](https://azure.microsoft.com/ja-jp/free/)

#手順
##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 ペインで [作成] をクリックします。

<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 の中でユニークになる名前を設定します。
- ボットテンプレート
- クリックしてテンプレートを選択します。
    - C# と Node.js から選択できます。今回は C#、全ての Bot アプリのベースになる Basic を選択します。
    - LUIS や QnA Maker を選択すると、同じマイクロソフトアカウントに紐づいている LUiS App や QnA Maker App をカンタンに選択＆設定できます。(他のアカウントに紐づけているものも手動で設定可能です)
- App Service Plan
    - 新規 (または作成済み) の Web App のプランを選択します。無料の Free Plan を利用可能です。

入力したら、[作成] をクリックして Bot アプリの作成を行います。

<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_05.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_05-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_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>


##Azure Bot Service アプリの設定確認&テスト
作成した Web App Bot の設定ペインが表示されます。
概要ペインにメッセージングエンドポイントが表示されています。Bot Framework Emulrator を使ってテスト行う場合は、こちらの URL にアクセスします。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_07.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_07-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

設定ペインのメニューから Test in Web Chat をクリックすると、作成した Bot アプリ の動作確認を行うことができます。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_08.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_08-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

Basic テンプレートでは、入力した文字をそのまま返す (おうむ返し) が実装されています。また、会話数カウントも合わせて実装されており、**reset** と入力すると、カウントをリセットします。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_09.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_09-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

 
##Azure Bot Service アプリのソースコード確認
作成された Bot アプリのソースコードを確認します。
Web App Bot の設定ペインのメニューから **ビルド** をクリックします。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_10.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_10-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

**オンラインコードエディターを開く** をクリックすると、ブラウザーの別タブでオンラインエディターが表示されます。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_11.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_11-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

>ローカル環境で確認したい場合は、**zipファイルをダウンロード** をクリックすると、Visual Studio プロジェクトの形でダウンロードできます。また、Visual Studio Team Service や Git を紐づけて、ソースコード更新→ Azure のデプロイ を自動化することもできます。

オンラインエディターでソースコードを確認します。WWWROOT > Dialogs > EchoDialog.cs の順にクリックして表示します。
おうむ返しの機能 および 会話カウント＆リセットの機能が EchoDialig.cs に実装されています。

```EchoDialig.cs
public async Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> argument)
{
    var message = await argument;

    // reset と入力された場合
    if (message.Text == "reset")
    {
        PromptDialog.Confirm(
            context,
            AfterResetAsync, //リセット処理
            "Are you sure you want to reset the count?",
            "Didn't get that!",
            promptStyle: PromptStyle.Auto);
    }
    // 通常入力の場合
    else
    {
        // count に会話カウントを追加、message.text で入力された文字を返答
        await context.PostAsync($"{this.count++}: You said {message.Text}");
        context.Wait(MessageReceivedAsync);
    }
}

public async Task AfterResetAsync(IDialogContext context, IAwaitable<bool> argument)
{
    var confirm = await argument;
    if (confirm)
    {
        this.count = 1;
        await context.PostAsync("Reset count.");
    }
    else
    {
        await context.PostAsync("Did not reset count.");
    }
    context.Wait(MessageReceivedAsync);
}
```


##Azure Bot Service アプリで使用されているライブラリー群
Bot アプリで使用されているライブラリーを確認しておきます。
オンラインエディターでソースコードを確認します。WWWROOT > package.config の順にクリックして表示します。

現在 (GA直後) のバージョンは以下になっています。
- .NET Framework 4.6
- ASP.NET.WebAPI 5.2.3
- Bot Builder & Bot Connector v3.12
ほか、Bot アプリの構築に便利な Azure SDK が合わせて設定済みです。

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


##Azure Bot Service アプリの Bot Channel 関連設定
プレビュー時には Bot Channel に登録を行って発行される Bot ID, および Microsoft AppID, Password を手動でアプリ側に設定する必要がありました。Azure Bot Service GA 後、これらの作業はアプリ設定時に自動で行われるようになりましたので、操作は不要です。
オンラインエディターで WWWROOT > web.config を確認すると、"MicrosoftAppID" および "MicrosoftAppPassword" はブランクになっています。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_13.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_13-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>

これらは Bot アプリをホストしている Azure Web App 側に自動で設定されています。
Azure Bot Service のアプリケーション設定ペインで **アプリケーション設定** をクリックして表示します。*アプリ設定* の項目に BotID, MicrosoftAppId, MicrosoftAppPassword が自動で追加＆設定されており、値も確認できます。
<a href="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_14.png"><img src="https://msdnshared.blob.core.windows.net/media/2017/12/bluesky_20171217_14-300x192.png" alt="" width="300" height="192" class="alignnone wp-image-19015 size-medium" /></a>


#補足
##Azure App Service? Web App?
Azure App Service は Azure で Web ホスティングを提供するサービスの総称で、シンプルな Webホスティングを行うのが Web App になります。料金プラン (App Service プラン) は App Service のレベルで設定します。

##2 つのAzure Bot Service (Web App Bot と Function Bot)
いずれの Azure Bot Service でも Bot アプリとしてできることに違いはありません。また、いずれを選んでもコードをダウンロードして、Visual Studio などでローカルで開発できます。

- Web App Bot: Azure Web App
    - Web ホスティング (Web サーバー)
    - サーバー稼働時間に対して課金 (※Free Plan 以外)
- Function Bot:　Azure Function ベース
    - トリガー(各種Azure サービスへのアクション or 日時など)を元に行う機能を実装できるサービス
    - App Service (稼働時間(連続)) or 従量課金(都度起動時間の累計)

通常の Web 開発に慣れている (または Bot 開発に慣れていない) 場合は Azure Web App の方が分かりやすいかと思います。
トリガー(ホストしている Bot アプリへのアクセス)をもとに Bot アプリを動作させたい場合 (予期されるアクセス数が少ない場合) は Azure Function を利用し、従量課金を選択することも可能です。