最近のチャットボットブームをうけて、自分のページにもチャットボットを埋め込みたい…なんて思った人も少なくないはず。
じつはMicrosoft Bot Frameworkを使えば、マナミさんのように、Webサイトに受け答え可能なチャットボットを埋め込む事が簡単にできちゃいます。
しかもMicrosoft Bot Frameworkといえば、AIとの連携を前提で作られているので、これから盛り上がることは間違い無し。使い方を覚えておいて損はありません。もちろんデフォルトでは人工無脳なんですけどね。
実際に埋め込んでみると、こんな感じです。
Microsoft Bot Frameworkには、Skype, FacebookMessenger, Slack, Kik… などなど。さまざまなChannelがデフォルトで用意されています。そして、そのなかにWebChatというiframeタグでチャットボットを埋め込める仕組みが用意されているんです。設定は簡単にできます。
WebChatを使ったWebページへチャットボットの埋め込み方を順を追って説明します！
個人的には、こちらの記事がとてもわかりやすかったのでお薦めです。
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キーが表示されるので、コピペします。埋め込みコード内のYOUR_SECRET_HEREの部分は、ご自身のSecretキーに置き換えてくださいね。
埋め込んでみて、動作しているか確認
ページに埋め込んでみてチャットボックスが表示されたら、実際に動いているかメッセージを送って、確かめます。
チャットボットが正常に動けば成功です！
ちなみに、今回作成したものはこちらで確認することができます。是非是非あそんでみてください！遊び方はリンク先にて紹介しています。
ちなみにUIを自分で作りたい場合は？
「んー、なんかUIがイマイチだなー」とコレジャナイ感をいだく方は、チャットボットをREST APIとして使えるDirect Line APIを使えば、UIを自分でつくり込むこともできます。
Direct Line APIについても記事を書く予定なのでお楽しみに！
Microsoft Bot Frameworkの存在からみるチャットボット作成のハードル
チャットボット自体を作る敷居も少しずつ下がってきていますが、チャットボットをページに埋め込んだり、他のサービスと連携させたり…といった環境構築の敷居もどんどん下がってきています。
これからWebページ上でのチャットUIって増えてくるはず。流れに乗り遅れないように、早め早めに試してみていろいろ考えたいものですね。
