Microsoft Bot FrameworkでWebサイトに自作チャットボットを導入してみた

このエントリーをはてなブックマークに追加

最近のチャットボットブームをうけて、自分のページにもチャットボットを埋め込みたい…なんて思った人も少なくないはず。

じつはMicrosoft Bot Frameworkを使えば、マナミさんのように、Webサイトに受け答え可能なチャットボットを埋め込む事が簡単にできちゃいます。



しかもMicrosoft Bot Frameworkといえば、AIとの連携を前提で作られているので、これから盛り上がることは間違い無し。使い方を覚えておいて損はありません。もちろんデフォルトでは人工無脳なんですけどね。

実際に埋め込んでみると、こんな感じです。

WebChatを使ったボット埋め込みのイメージ

Microsoft Bot Frameworkには、Skype, FacebookMessenger, Slack, Kik… などなど。さまざまなChannelがデフォルトで用意されています。そして、そのなかにWebChatというiframeタグでチャットボットを埋め込める仕組みが用意されているんです。設定は簡単にできます。

WebChatを使ったWebページへチャットボットの埋め込み方を順を追って説明します!

本来はまず、ページに埋め込みたいチャットボットを作成しなくちゃいけないんですが、「MicrosoftBotFrameworkを使ってHelloWorldやってみた!」系の記事は既にたくさんあるので、今回はチャットボットの作り方・登録の仕方は割愛します。

個人的には、こちらの記事がとてもわかりやすかったのでお薦めです。
Microsoft Bot Framework BotConnector BotをSlackから利用する | hrendoh’s memo

2016/7/12追記:上記は古いバージョンのコードなので注意です……

WebChatの設定

チャットボットを作成したら、Microsoft Bot Frameworkのサイトへログインし、「My Bots」をクリックして、作成したチャットボットの管理画面へ。

「Add another channel」から、「WebChat」を追加します。

ボット管理画面

ボタンをクリックして、secretキーを発行します。このあたりFBMessengerBotの作成では必要となるキーが多くめんどくさいですが、シンプルなので助かりますね。

コードの発行

問題なくsecretキーと埋め込みコードが表示されるはずです。ここでコピペしてもいいんですが、念のため一旦設定を完了しておきます。

secretコードと埋め込みコード

埋め込みコードの取得

ページに埋め込むためのコードが取得できるようになったので、改めてゲットしましょう。

ボット管理画面

コードとSecretキーが表示されるので、コピペします。埋め込みコード内のYOUR_SECRET_HEREの部分は、ご自身のSecretキーに置き換えてくださいね。

Secretコードと埋め込みコード

埋め込んでみて、動作しているか確認

ページに埋め込んでみてチャットボックスが表示されたら、実際に動いているかメッセージを送って、確かめます。

WebChatを使ったボット埋め込みのイメージ

チャットボットが正常に動けば成功です!

ちなみに、今回作成したものはこちらで確認することができます。是非是非あそんでみてください!遊び方はリンク先にて紹介しています。

ちなみにUIを自分で作りたい場合は?

「んー、なんかUIがイマイチだなー」とコレジャナイ感をいだく方は、チャットボットをREST APIとして使えるDirect Line APIを使えば、UIを自分でつくり込むこともできます。
Direct Line APIについても記事を書く予定なのでお楽しみに!

Microsoft Bot Frameworkの存在からみるチャットボット作成のハードル

チャットボット自体を作る敷居も少しずつ下がってきていますが、チャットボットをページに埋め込んだり、他のサービスと連携させたり…といった環境構築の敷居もどんどん下がってきています。

これからWebページ上でのチャットUIって増えてくるはず。流れに乗り遅れないように、早め早めに試してみていろいろ考えたいものですね。