Microsoft Bot Framework、Azureを利用したBot開発！Bot作成からWeb上で公開するまで

こんにちは。 この前、Microsoft謹製のBot Builderを利用してBotを作りました。 せっかく作ったので、これをパブリックに公開したいなあと思いまして、せっせと作業していたのですが、思いの外つまづきポイントが沢山ありました。

なので、今回はBotを実装するところからパブリックに公開するまでの手順を私の備忘録から紹介したいと思います。

作るもの

手順通りに作成すれば、「メッセージをオウム返しするBot」がWebページで公開できるようになります。

流れとしては、Bot Builderで作成したBotをazureに乗っけて、WebページからBotを呼び出せるところまでをやっていきます。

必要なツール、サービス

• Bot Builder
• Microsoft Bot Framework Channel Emulator
• Node.js
• Git
• azure
• ngrok
• Microsoft Bot Framework

作成手順

1. Bot Builder を用いたBot開発

Botを動かす

この項目は、Bot Builderに書いてあることほぼそのままです。

Node.js、GitをローカルPCにインストールしておきます。 Botを開発する作業ディレクトリに移動し、以下のコマンドを打ち込みます。

$ npm init

ぽちぽちエンターを押して設定していきますが、entry pointの項目だけは、デフォルトではなくapp.jsに設定することをオススメします。 設定が完了したら、Bot開発に必要な以下のライブラリをインストールします。

$ npm install --save botbuilder
$ npm install --save restify

作業ディレクトリ直下に、app.jsファイルを作成します。その中に、以下のコードをコピーして保存してください。

var restify = require('restify');
var builder = require('botbuilder');

// Setup Restify Server
var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function () {
   console.log('%s listening to %s', server.name, server.url); 
});

// Create chat connector for communicating with the Bot Framework Service
var connector = new builder.ChatConnector({
    appId: process.env.MICROSOFT_APP_ID,
    appPassword: process.env.MICROSOFT_APP_PASSWORD
});

// Listen for messages from users 
server.post('/api/messages', connector.listen());

// Receive messages from the user and respond by echoing each message back (prefixed with 'You said:')
var bot = new builder.UniversalBot(connector, function (session) {
    session.send("You said: %s", session.message.text);
});

ファイルを保存したら、挙動の確認を行います。

以下のコマンドを打ち込み、サービスを起動させます。

$ node app.js

サービスが起動すると、リクエストを受け付けるポート番号がターミナルに表示されます。

Microsoft Bot Framework Channel Emulatorを立ち上げてください(インストールしてない人はしてね)。

ウィンドウ上部のEnter your endpoint URLをクリックし、以下のURLを打ち込みます。{{ポート番号}}の部分は、サービスを起動した時に表示されたポート番号に置き換えてください。

http://localhost:{{ポート番号}}/api/messages

Microfoft App IDとMicrosoft App Passwordを指定する画面が表示されますが、それは無視して、Connectをクリックします。

メッセージ入力欄に適当に何かメッセージを書き込んでみましょう。 例えばHelloと入力したら、You said: Helloと返れば成功です。

Gitの設定

azureにデプロイする際に、ローカルGitリポジトリを利用しますので、gitの設定を行います。以下のコマンドを打ち込み、コミットを残します。

$ git init
$ echo "node_modules/" > .gitignore
$ git add .
$ git cm -m "first commit"

2. BotをAzureにデプロイ

Azureの設定

Azureにログインします。 会員登録がまだの人は、無料で登録できるので(要クレジットカード)、会員登録をしてログインしてください。

作成したBotをアップする先はWebAppです。 ポータルのメニュー項目から、新規(または+ボタン)をクリックし、WebAppを探して、createをクリックし、設定項目を埋めたら下の作成をクリックします。

デプロイ設定を行います。 今回は一番簡単そうな、ローカルGitリポジトリを利用したデプロイ方法を紹介します。

Azureのポータルから、先ほど作成たリソースを開いて、デプロイ オプション > 必要な設定の構成 > ローカル Git リポジトリ を順にクリックします。

Azureで初めてリポジトリを設定した場合、ログイン名とパスワードを設定する画面に遷移します。このログイン名とパスワードは、ローカルGitリポジトリからAzureにpushする際に利用するものです。

デプロイオプションの設定が完了したら、作成したリソースの概要を開き、Git クローン URLと書かれているところのURLをコピーします。

Gitでデプロイ

ターミナルに戻り、リモートリポジトリの設定を行います。 以下のコマンドを実行してください。{{Git クローン URL}}の部分は、先ほどコピーしたURLに置き換えてください。

$ git remote add azure {{Git クローン URL}}
$ git push azure master

初回のみ認証が走るので、Web Appsに設定したデプロイ用のアカウントでログインします。 push が完了すると同時に配置も完了します。

デプロイが完了したことを確認します。概要内のURLをコピーしてください。

以下のURLにアクセスし、json形式のレスポンスが返ることを確認してください。{{azureで立ち上げたリソースのURL}}部分は、先ほどコピーしたURLに置き換えてください。

http://{{azureで立ち上げたリソースのURL}}/api/messages

次に、エミュレータを使用して、正しくBotが動くか確認します。

ngrokをダウンロードしてzipファイルを展開します。展開すると、ngrokという名の実行ファイルが入っています。その実行ファイルが置いてあるディレクトリ先を確認してください。

エミュレータを起動し、画面右上のメニュー(・が縦に3つ連なってるボタン)をクリックし、App Settingsを開きます。パスを指定してSAVEをクリックします。

ウィンドウ上部のEnter your endpoint URLをクリックし、以下のURLを打ち込みます。

http://{{azureで立ち上げたリソースのURL}}/api/messages

Microfoft App IDとMicrosoft App Passwordを指定する画面が表示されますが、それは無視して、Connectをクリックします。 メッセージを入力して、Botから返信きたら成功です。

3. Microsoft Bot Framework の設定

Botの登録

Microsoft Bot Frameworkにアクセスし、ログイン(または会員登録)を行います。

ログインできたら、まずBotの登録を行います。Registerをクリックして、とりあえず必須項目のみ入力していきます。

項目名	説明
Display name	Micsoroft Bot Frameworkのダッシュボード内で表示される名前です。後から変更可能です。例：parrot-bot
Bot handle	エンドポイントとして使用される名前です。後からの変更は不可です。例：parrot-bot
Long description	Botの説明を記述する項目です。後から変更可能です。必須となっているので、適当な値を入れておけば大丈夫です。
Messaging endpoint	メッセージの送受信を行うURLです。httpsでないといけないことに注意してください。幸いにも、Azureから生成したエンドポイントはSSLに対応しているぽいです。例：https://{{azureで立ち上げたリソースのURL}}/api/messages

Bot登録中に、Microsoft App IDとMicrosoft Passwordが発行されます。これは後ほど使うのでどこかにコピーしておいてください。

Azureのポータルに戻ります。

作成したリソースのアプリケーションの設定をクリックし、環境変数を設定します。

変数名	値
MICROSOFT_APP_ID	Bot登録中にコピーしたMicrosoft App ID
MICROSOFT_APP_PASSWORD	Bot登録中にコピーしたMicrosoft Password

Microsoft Bot Frameworkのダッシュボードに戻ります。 画面右上のTestをクリックし、テストウィンドウを表示させて、Botがちゃんと動くか確認しましょう。

WebサイトにBotを埋め込む

テストが確認できたら、BotをWeb上で呼び出してみましょう。

Microsoft Bot Frameworkダッシュボードから、Web ChatのEditをクリックします(デフォルトですでに設定されているようですね)。

Embed codeには、HTMLに埋め込むタグが用意されていますので、このタグをBodyタグ内に追加すれば、簡単にBotをWebサイトに表示することができます。

実際に埋め込んでみましょう。 Embed codeの中の文字列をコピーします。 適当なファイルを用意して、以下のコードを貼り付けます。ここに貼り付け部分は、先ほどコピーした文字列に置き換えてください。 文字列内の、YOUR_SECRET_HEREは、Secret Keysのどちらか片方の文字列(showをクリックすると表示されます)を貼り付けてください。 2つありますが、どちらでも大丈夫だと思います。

<html>
  <head>
    <style type="text/css">
    <!--
    iframe {
      width: 400px;
      height: 400px;
    }
    -->
    </style>
  </head>
  <body>
    ここに貼り付け
  </body>
</html>

ブラウザ上でファイルにアクセスし、Botが動かせたら完成です！

おわりに

Cogbotコミュニティの勉強会で、「画像DE路線当てBot」で学ぶBot開発 / cogbot#8 // Speaker Deckというタイトルで発表したのをきっかけに、一連の手順をブログにまとめることにしました。

今回は、メッセージをそのまま返す単純なBotで試しましたが、ここまで作業を終わらせてしまえば、あとは最初のBot実装に戻ってコードをガリガリ書くのみです。 利用するサービスが多岐に渡るので、設定する項目が多いですが、難しい作業はないですし、全て無料で始められるものなのでハードルは低いと思います。 これを機に、皆さんも自作Botをお披露目してはいかがでしょうか。ではでは