Microsoft Bot Framework v3.0 からはじめる BOT 開発: Azure で Web 公開＆お手軽 Web Chat を試す

これまで作成してきた BOT を Visual Studio からのアップロード操作が簡単な Azure App Services (の API Apps) を使って Web 公開していきます。その後、簡単に iframe でWebサイトに埋め込みできる Web Chat を設定して試す手順も合わせて紹介します。

##手順

- [BOT アプリを Azure App Services で Web 公開](http://qiita.com/annie/items/590fa480719ed93998df#bot%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92-azure-app-services-%E3%81%A7-web-%E5%85%AC%E9%96%8B)
- Microsoft Bot Framework サイトで BOT 登録＆Web Chatを設定
    - [BOT 登録＆ BOT アプリに埋め込み](http://qiita.com/annie/items/590fa480719ed93998df#bot-%E7%99%BB%E9%8C%B2-bot-%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AB%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF)
    - [Web Chat の設定＆利用](http://qiita.com/annie/items/590fa480719ed93998df#web-chat-%E3%81%AE%E8%A8%AD%E5%AE%9A%E5%88%A9%E7%94%A8)

#準備
##Microsoft アカウント の取得
Microsoft Bot Framework サイトでの Bot 登録や、Azure サブスクリプション申し込みに必要です。(今回は Azure, Bot Framework で１つのアカウントを利用することにします)
>[Microsoft アカウント登録手続き](https://www.microsoft.com/ja-jp/msaccount/signup/default.aspx)

##Azure サブスクリプション申し込み
無料試用版で充分です。上記↑で取得した Microsoft アカウントで申し込みを行います。App Services は無料のプランがあるので、従量課金プランでも大丈夫ですが．．．。
>[Azure 無料試用版サブスクリプションにサインアップする](https://azure.microsoft.com/ja-jp/documentation/articles/billing-buy-sign-up-azure-subscription/#azure-1)

##開発環境＆BOTアプリ
Visual Studio 2015 のテンプレートから作成したアプリを利用します。
[Microsoft Bot Framework v3.0 からはじめる BOT 開発](http://qiita.com/annie/items/edc26c0ee9603e84a2e4) シリーズで作成した、いずれのBOTアプリでも大丈夫です。
>[Bot Framework を使うための開発環境](http://qiita.com/annie/items/edc26c0ee9603e84a2e4#bot-framework-%E3%82%92%E4%BD%BF%E3%81%86%E3%81%9F%E3%82%81%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83) で準備した、Visual Studio 2015、Bot Framework Emulator も引き続き利用します。

#BOTアプリを Azure App Services で Web 公開
##Visual Studio から Azure App Services への公開
Visual Studio で BOT アプリのソリューションを開き、ソリューションエクスプローラーで、アプリケーション名(ここでは "SandwichBot") を右クリック → [**公開**] をクリックします。
![1](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_01-e1471764471530.png)

*発行先* のウインドウで **Microsoft Azure App Services** をクリックします。
![2](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_02-e1471764677495.png)

*App Serivce* のウインドウで、Microsoft アカウントでサインインすると、申し込んだ Azure サブスクリプションが表示されます。(初めての場合はフォルダなど何も表示されません。)
*新規作成* をクリックします。
![3](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_03-e1471764824974.png)

*App Service の作成* のウインドウで、

 - *API Apps の名前*: お好みでorデフォルトのままでもOK (※) (ここでは "SandwichBotSample")
 - *サブスクリプション*: デフォルトのままでOK
 - *リソースグループ*: 判別しやすい名前を入力
 - *AppService*: その横の [**新規作成**] をクリックして、別ウインドウで設定を行います。

![4](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_04-e1471764871434.png)
>※ *API Apps の名前* で入力した名前がそのまま URL の一部になります。好きな名前を設定できますが、使用済みのものは設定できません。

*AppService プランの構成* のウインドウで、

 - *AppServiceプラン*:  デフォルトのままでOK (ここでは "SandwichBotPlan")
 - 場所: Webサーバーの場所 (日本なら **Japan East** または **Japan West**) を選択
 - サイズ: [**無料**] でOK

を設定して [*OK*] をクリックします。
![5](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_05-e1471764924133.png)

*App Service の作成* のウインドウに戻り、[**作成**] をクリックします。
![6](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_06-e1471764969211.png)

*発行* のウインドウで接続情報が自動入力されます。[**発行**] をクリックすると Azure にアプリ一式が送信され、公開されます。
![7](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_07-e1471765234800.png)
>このとき *宛先URL* に表示されているURLが BOTアプリが配置される Web サイトの URL (http://*API Apps の名前*.azurewebsites.net) になります。

公開手続きが完了すると、ブラウザが起動して Web サイトが表示されます。 URLが http://xxxxx.azurewebsites.net になっているのを確認してください。
![8](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_08-e1471765314764.png)

#Microsoft Bot Framework サイトで BOT 登録＆Web Chatを設定
公開した Web サイト情報を元に、BOT の登録を行います。登録することにより Microsoft Bot Framework に用意されている Web Chat を含む Bot Connector (Skype,Slack,Facebook Messenger などにも接続可能) を利用できます。

##BOT 登録＆ BOT アプリに埋め込み
###新規 BOT の登録
Microsoft Bot Framework の Web サイト (https://dev.botframework.com/) をブラウザで開き、上部バーの [Register a bot] をクリックします。(サインアウトしていた場合は Microsoft アカウント でサインインします)
![9](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_09-e1471765391171.png)

登録に必要な情報を入力していきます。これらは Bot Connector で表示される内容になります。
(*は必須項目)

- Bot Profile
    - Icon: 好きな画像をアップロードします
    - Name*: BOT の表示名
    - Bot handle*: 一意となる Bot 名を設定 (= *Bot ID)
    - Description*: Bot の説明を入力
- Configuration
    - Messaging Endpoint: **Azure で公開した Bot アプリの URL をコピーし、*https://~* に変更してください。また、エンドポイント(APIとしてのアクセスURL) 先として /api/messages を追加します。**
    - Microsoft App ID: [**Create Microsoft App ID and password**] をクリックして新規作成します。

![10](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_10-e1471765442723.png)

*アプリIDとパスワードを生成* のページが別途開きます。アプリID (App ID) をメモ帳などにコピーしておきます。[**パスワードを生成して続行**] をクリックします。
![11](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_11-e1471765484579.png)

*新しいパスワードが生成されました* と表示されます。**このパスワードは一度しか表示されないので、メモ帳などにコピーしておきます**。
[**OK**] をクリックして Bot の登録ページに戻ります。
![12](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_12-e1471765511313.png)

引き続き BOT 情報を入力します。

- Publisher Profile
    - Publisher Name*: 個人名でも会社名でも
    - Publisher Email*: デフォルトでログインしている Microsoft アカウントが入力済み
    - Privacy Statement*, Term of Use*, Bot Website: Bot アプリが稼働している Web サイトに表記しておくと便利
    - Hashtags: お好みで
    - Languages, Default Conversation Language: ISO639-1形式なので、英語ならen、日本語ならja
- Admin
    - Owners*:  デフォルトでログインしている Microsoft アカウントが入力済み

入力が完了したら、一番下のチェックボックスにチェックを入れ、[**Register**] をクリックして登録します。[*Bot Created*] と表示されれば登録完了です。
![13](https://msdnshared.blob.core.windows.net/media/2016/09/bluesky_20160822_13-e1472698155588.png)

###Bot 登録情報(BotID, AppID, パスワード)を Bot アプリ側に埋め込み
Visual Studio で Bot アプリのソリューションを開き、ソリューションエクスプローラーから *web.config* をクリックして編集します。
下記の通り、<configuration><appSettings>に記載されている *<add key= ~* のところに、登録した Bot handle(=Bot ID)、AppID、パスワードを入力して保存します。

```web.config
<configuration>
  <appSettings>
    <!-- update these with your BotId, Microsoft App Id and your Microsoft App Password-->
    <add key="BotId" value="*** BotID をコピー ***" />
    <add key="MicrosoftAppId" value="*** Microsoft App ID をコピー ***" />
    <add key="MicrosoftAppPassword" value="*** App パスワードをコピー ***" />
  </appSettings>
```

###再度 Azure にアップロード
Visual Studio から Azure App Services への公開 と同様に、変更したアプリを再度 Azure にアップロードします。これでアプリ側の準備は完了です。

###登録サイトで Bot Connector との接続を確認
Microsoft Bot Framework の Web サイト (https://dev.botframework.com/) をブラウザで開き、上部バーの [**My Bots**] をクリック(サインアウトしていた場合は Microsoft アカウント でサインインします)、登録した BOT をクリックして詳細ページを開きます。
![14](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_14-e1471765542767.png)

*Test connection to your bot* の枠にある [**Test**] をクリックし、しばらくして Accepted と表示されれば OK です。
![15](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_15-e1471765557699.png)

##Web Chat の設定＆利用
###Web Chat の設定
BOT の詳細情報ページで *Web Chat* の枠にある [**Edit**] をクリックします。

**Regenerate Web Chat Secret** をクリックし、Web Chat でアクセスする場合のシークレットキーを生成します。*Embed template* に表示されるコードが iframe の埋め込みコードになります。(BotIDは自動入力されています)

```
<iframe src='https://webchat.botframework.com/embed/***BotID***?s='***シークレットキーをコピー***'></iframe>
```

![16](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_16-e1471765573950.png)

###iframe で Web Chat を埋め込み
Bot アプリが稼働する Web サイトのトップページで Web Chat を使えるように埋め込んでみます。
Visual Studio で BOT アプリのソリューションを開き、ソリューションエクスプローラーから *default.htm* を開きます。
お好みですが、例えば以下のように body 部分に貼り付けます。

```default.htm
<!DOCTYPE html>
<html>
<head>
    :
</head>
<body style="font-family:'Segoe UI'">
    <h1>SandwichBot</h1>
    :
    <iframe src="https://webchat.botframework.com/embed/***BotID***?s=***シークレットキー***" style="max-width: 100%; min-height: 400px;"></iframe>
    :
</body>
</html>
```

保存したら、Visual Studio から Azure App Services への公開 と同様に、変更したアプリを再度 Azure にアップロードします。

###Web サイトで BOT の動作確認
Azure への公開が完了すると ブラウザが起動して Web サイトが表示されるので、動作を確認できます。こちら↓では Terms of Use、Privacy Statement などを追加していますが、iframe ウインドウ内に BOT が表示されて、会話できれば公開完了です。
![17](https://msdnshared.blob.core.windows.net/media/2016/08/bluesky_20160822_17-e1471765591886.png)