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 公開
• Microsoft Bot Framework サイトで BOT 登録＆Web Chatを設定
  • BOT 登録＆ BOT アプリに埋め込み
  • Web Chat の設定＆利用

準備

Microsoft アカウント の取得

Microsoft Bot Framework サイトでの Bot 登録や、Azure サブスクリプション申し込みに必要です。(今回は Azure, Bot Framework で１つのアカウントを利用することにします)

Microsoft アカウント登録手続き

Azure サブスクリプション申し込み

無料試用版で充分です。上記↑で取得した Microsoft アカウントで申し込みを行います。App Services は無料のプランがあるので、従量課金プランでも大丈夫ですが．．．。

Azure 無料試用版サブスクリプションにサインアップする

開発環境＆BOTアプリ

Visual Studio 2015 のテンプレートから作成したアプリを利用します。
Microsoft Bot Framework v3.0 からはじめる BOT 開発 シリーズで作成した、いずれのBOTアプリでも大丈夫です。

Bot Framework を使うための開発環境 で準備した、Visual Studio 2015、Bot Framework Emulator も引き続き利用します。

BOTアプリを Azure App Services で Web 公開

Visual Studio から Azure App Services への公開

Visual Studio で BOT アプリのソリューションを開き、ソリューションエクスプローラーで、アプリケーション名(ここでは "SandwichBot") を右クリック → [公開] をクリックします。

発行先 のウインドウで Microsoft Azure App Services をクリックします。

App Serivce のウインドウで、Microsoft アカウントでサインインすると、申し込んだ Azure サブスクリプションが表示されます。(初めての場合はフォルダなど何も表示されません。)
新規作成 をクリックします。

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

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

※ API Apps の名前 で入力した名前がそのまま URL の一部になります。好きな名前を設定できますが、使用済みのものは設定できません。

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

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

を設定して [OK] をクリックします。

App Service の作成 のウインドウに戻り、[作成] をクリックします。

発行 のウインドウで接続情報が自動入力されます。[発行] をクリックすると Azure にアプリ一式が送信され、公開されます。

このとき 宛先URL に表示されているURLが BOTアプリが配置される Web サイトの URL (http://API Apps の名前.azurewebsites.net) になります。

公開手続きが完了すると、ブラウザが起動して Web サイトが表示されます。 URLが http://xxxxx.azurewebsites.net になっているのを確認してください。

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 アカウント でサインインします)

登録に必要な情報を入力していきます。これらは 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] をクリックして新規作成します。

アプリIDとパスワードを生成 のページが別途開きます。アプリID (App ID) をメモ帳などにコピーしておきます。[パスワードを生成して続行] をクリックします。

新しいパスワードが生成されました と表示されます。このパスワードは一度しか表示されないので、メモ帳などにコピーしておきます。
[OK] をクリックして Bot の登録ページに戻ります。

引き続き 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] と表示されれば登録完了です。

Bot 登録情報(BotID, AppID, パスワード)を Bot アプリ側に埋め込み

Visual Studio で Bot アプリのソリューションを開き、ソリューションエクスプローラーから web.config をクリックして編集します。
下記の通り、に記載されている <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 をクリックして詳細ページを開きます。

Test connection to your bot の枠にある [Test] をクリックし、しばらくして Accepted と表示されれば OK です。

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>

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 が表示されて、会話できれば公開完了です。