はじめに

Bot Builder for Node.js (Bot Framework Version 3.0)で'Hello World' Part-1の続きです。
今回はWeb Chatを作成するところまで実施します。
前回はAzureを使って環境を構築しましたが、~~無料プランではSSLが使えず~~ (2016/9/6 Azure無料プランでもSSLは使用できました) 勘違いにより、Microsoft Bot Framework portalの設定で行き詰ってしまったので、環境をHerokuに変更します。
※以下は設定に失敗する部分です。

1.Heroku環境設定とテスト

1-1.package.jsonの修正

HerokuはProcfileを配置しない場合、デフォルトではnpm startコマンドが実施されるようなので ※1、package.jsonを以下のように修正します。(start部分を追加するだけです)

※1 Heroku Node.js Support参照

1-2.環境変数設定とNode.js

Part-1のAzure環境変数設定と同様に環境変数を設定します。
また、Node.jsが稼働するようにAdd buildpackをクリックし、node.jsのbuildpackを追加します。

1-3.展開元設定

展開元をGitHubにし該当リポジトリを連携します。Enable Automatic Deploysをクリックしますが、初回連携時にはDeploy Branchをクリックしてモジュールを配置する必要があります。

1-4.Heroku環境でテスト

Part-1同様にngrokを使用し、heroku環境でもテストを実施します。

2.Microsoft Bot Framework portalの設定変更

Microsoft Bot Framework portalへアクセスし、Messaging endpointにhttpsで始まるHeroku環境のURLを設定します。

3.Web Chatの作成

Microsoft Bot Framework portalでGet bot embed codesをクリックします。

Web Chatのアイコンをクリックし、埋め込み用HTMLコードとSecretを控えます。

適当な名前のhtmlファイルを作成し、先ほどの情報を埋め込みます。

botchat.html

<html>
    <head>
    </head>
    <body>
        <iframe src="https://webchat.botframework.com/embed/tworks55-bot?s=ZtLXebNAD8M.xxx.xxx.xxxxxxxxxxxxxx-xxxxxxxxxxxxx_xxxxxxxxxxxxxx" style="height: 502px; max-height: 502px;"></iframe>
    </body>
</html>

ブラウザで作成したHTMLを開くとWeb Chatが使えるようになります。

という感じでHello Worldを終わりにします。

おまけ

他のチャンネルも試してみました。結構簡単にマルチチャンネルを実現できるようになっている印象です。LINE対応してもらえると良い気もしますが、無いかなー？

Slack

Skype

Facebook Messenger

参考

Microsoft Bot Frameworkでボットを作成してみよう