これまで作成してきた BOT を Visual Studio からのアップロード操作が簡単な Azure App Services (の API Apps) を使って Web 公開していきます。その後、簡単に iframe でWebサイトに埋め込みできる Web Chat を設定して試す手順も合わせて紹介します。
##手順
- BOT アプリを Azure App Services で Web 公開
- Microsoft Bot Framework サイトで BOT 登録＆Web Chatを設定
#準備
##Microsoft アカウント の取得
Microsoft Bot Framework サイトでの Bot 登録や、Azure サブスクリプション申し込みに必要です。(今回は Azure, Bot Framework で１つのアカウントを利用することにします)
##Azure サブスクリプション申し込み
無料試用版で充分です。上記↑で取得した Microsoft アカウントで申し込みを行います。App Services は無料のプランがあるので、従量課金プランでも大丈夫ですが．．．。
##開発環境＆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、パスワードを入力して保存します。
<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 部分に貼り付けます。
<!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 が表示されて、会話できれば公開完了です。
