マイクロソフトBotFramework Web ChatとDialogFlowを連携してチャット画面を作る

2019.09.02

はじめに

今回は、Webベースのチャットボットを展開するため、Microsoft Bot Framework Web ChatとGoogle DialogFlowを接続していきます。
DialogFlowでは、ほとんどコーディングなしで、LINEやFacebookメッセンジャーやSlack、Twitterなどと連携したチャットボットを作成することができます。
Google DialogFlowの使い方は以前の記事をご覧ください。
Dialog Flowでは、webベースのチャット画面は用意されていないので、別途用意する必要があります。
そこで今回は、マイクロソフトが提供しているチャットボットサービスのUIフレームワークであるBot Framework Web ChatとDialogFlowを連携させる事で、Webベースのチャットボットを作ってみたいと思います。

Bot Framework WebChatとは?

Bot FrameWorksは、マイクロソフトが提供しているAzuru(アジュール)のチャットボットサービスの一つです。
高いカスタマイズ性を持つWebベースのライブラリーで、C#・JSから呼び出すことができます。
Azuruのチャットボット機能と組み合わせて使うために作られたライブラリーのようですが、DialogFlowとも連携できるので、今回は、Bot Framework Web Chatを使う形でチャット画面を作っていきたいと思います。

チャット設定

連携の概要図は以下の通りです。

 

チャットボット機能の部分はDialogFlowを使用し、Webサイトに埋め込めるチャット画面は、Bot Frameworkを使うという流れです。

図にある「Application ID」や「Request URL」などは、連携のために必要な情報になります。
それでは、これらの情報を使って連携する方法を紹介していきます。

DialogFlowの設定

まず、DialogFlow側の設定をしていきます。
DialogFlowでは、Integrationsと各Intentsの項目での設定が必要になります。

Integrationsの設定

左側のメニュータブからIntegrationsを選択し、以下のような画面を表示します。この画面では、様々なチャットプラットフォームとの連携設定を行うことができます。

今回はMicrosoftのBot FrameWorkを使っていきますが、DialogflowのIntegrationsは、skypeを使っていきます。

 

Skypeの連携スイッチを有効にしてください。すると以下のような画面が表示されます。

 

こちらの画面では、Microsoft App IDとMicrosoft App Passwordの入力が求められ、Request URLが発行されます。
Request URLは、後の工程でBot FrameWork側へ記述する必要がありますので、メモ帳などに控えておいてください。

Intentsの設定

テキスト以外のレスポンスを設定したい場合は、インテントを設定していきます。
レスポンスからSkypeのタブを追加して設定することができます。

 

Use responses from the DEFAULT tab as the first responsesを有効にする事で、DEFAULTタブで設定したテキストに続いて、Skypeタグで設定したレスポンスを返答する事ができます。

次に、MicroSoft App IDとPasswordを設定するために、Bot FrameWork側の設定に移動します。

BotFrameWorkの使い方

BotFrameWorkからBotを作成します。
アカウントを作っていない方は、アカウントを作成してからこちらのページに飛んでください。

 

Botを作成していきます。
Display nameに、このbotの名前を入れます。Bot handleには識別子を入れます。任意の文字列ならなんでもOK。
Long Descriptionは、ある程度で大丈夫でした。This is test botと入力しました。

Display Name Botの名前
Bot Handle このBotの識別子。任意の文字列に設定
Long Description  このBotの説明文

 

少し下へスクロールすると、Configurationという項目が表示されます。

 

Messaging endpointに、先ほどコピーしておいたDialog Flow側のRequest URLをペーストします。
次に「Create Microsoft App ID and password」を押して、Microsoft App ID とPasswordを登録します。

 

 

証明とシークレットのタブから、パスワードを設定します。
設定が完了したら、Bot作成ページに戻りPaste your app ID below to continueに先ほど発行したMicrosoft App IDをコピペします。
最後に利用規約の同意とRegistarボタンを押してbot作成完了です。

myBotから自身で設定したBot名称をクリックして、作成したBotチャンネルのWeb Chatに入ります。
Editから編集していきます。

※画像ではSkypeが表示されていますが、今回は使わないので気にしなくて大丈夫です。

 

Editから入ったら、以下のような画面が表示されます。

 

Secret keyとEmbed codeとして埋め込みコードが表示されます。
iframeでHTMLに埋め込む事もできます。
iframe埋め込みのsrcの「YOUR_SECRET_HERE」の部分をSecret Keysに置き換える事でDialog Flowと連携させることができます。

とはいえ、今回は、チャット画面をもう少しカスタマイズしたいので、「webchat.js」というライブラリーを利用して、チャットUI画面を作っていきます。

UI画面の作成

こちらのサンプルコードを参考にカスタマイズしてみました。
Bot側の画像を入れてみました。
また、吹き出しの色をユーザーとアバター側で変更してみました。
文字色も変えてみました。

index.html

web chat.jsをCDNで読み込み、divタグにidとして「webchat」を記述することで描画領域を確保できます。
botframework.jsを作成して、チャットボット画面のカスタマイズとBot Framework経由でDialog Flowと連携の設定をしていきます。

botframework.js

window.webchat.renderwechat関数では、Bot Frameworkとの連携をしていきます。
スクリプト内のシークレットキーに、Bot FramworkのSecret keyをコピペします。
ユーザーIDにアプリケーションIDを入力します。
styleOptionsでチャットUIをカスタマイズすることができます。
こちらのリポジトリに変数一覧がまとまっています。
botAvatarImageでは、ボットのアイコン画像を設定しています。
完成したチャット画面は以下のような形になりました。

チャット画面

 

MacOSやiOSのsafariブラウザからアクセスすると、表示が乱れてしまうことがありました。
こちらは、CSSのオーバーライドで対応しました。
私の場合は、safariブラウザで表示すると入力フォームが画面全体に表示されてしまうことがあったので、以下のcssのクラスをオーバーライドしました。

CSSの追記

 

まとめ

今回は、DialogFlowとBotFrameworkを使ってwebベースのチャットボットページを作成しました。 Dialog Flowで対話を設計し、BotFrameworkでUIを設計することで、かなり柔軟なテキストベースのUXを作ることができるようになりました。
チャット形式の体験は、これまで以上にユーザーフレンドリーな体験を提供できるはずの分野なので、今後も要注目です。