AI研究所 - AI(人工知能)に脅かされないために、AI(人工知能)を作る側の人間になる -

HOME  >  自分で作ったチャット画面で、チャットボットと会話できるようにする方法

公開日:2018.09.07 

自分で作ったチャット画面で、チャットボットと会話できるようにする方法

カテゴリー: AI(人工知能)の作り方

こんにちは、AI研究所、駆け出し研究員のリョウタです。

今回は、Webサイトに直接埋め込んで使える「カスタムチャット画面」の作成方法をご紹介します。
カスタムチャット画面を表示するために、MicrosoftのBot Frame Workを、Dialogflowとの連携のためにIntegrationの中の一つ、「Skype」と使用して作成します。

今回使用するのは、マイクロソフト社のMicrosoft Bot Frameworkというサービスです。
Microsoft Bot Frameworkはマイクロソフト社が2016年ごろに発表したサービスでSkypeと連携することでチャットボットを作成することが可能になります。
無料でアカウント作成が可能でマイクロソフト社のクラウドサービスであるAzureとも親和性を持っています。

https://dev.botframework.com/
(※海外の公式サイト)

Microsoft Bot FrameworkとDialogflowの連携のために、SkypeのIntegrationを使用します。前回のLINEのCustom Payloadの記事にも記載しましたが、Dialogflowは数多くの外部アプリケーションに接続し、Dialogflowで作成したテキスト内容を簡単にアウトプットすることが出来ます。

それでは早速やってみましょう!

まずDialogflowで新規エージェントを作成します。

新規エージェントを作成

インテンツを作成し、出力したい質問と回答をTraining phrasesとResponses に入力してください。
Dialogflowの基本的な使用方法は、過去の記事「チャットボットの簡単な作り方」を御覧ください。

出力したい質問と回答を入力-1

出力したい質問と回答を入力-2

Responsesの「+」マークを押し、Skypeを設定し、下の画像のように
「Use response from the DEFAULT tab as the first response.」のチェックをONにしてください。

Skypeを設定-チェックをON

※こちらはDEFAULTに記載したText responseなどの回答内容をSKYPE側でも出力する、という設定になります。逆を言えば、こちらをオフにしてSKYPEのタブの中で個別にText responseなどの回答内容を設定することも可能です。

Skypeを設定

話が少しそれましたが、次のステップに進みます。

マイクロソフト社のアカウント(無料)を( Microsoft account)のリンクから作成してください。

作成が出来ましたら、下記のリンクからbotを作成します。
https://dev.botframework.com/bots/new

パラメータを入力していきます。「*」マークがついているとこを必須項目になります。

① Bot profile

Display name・・・Botの名前になります。お好みのお名前を入力してください。

Bot handle・・・BotのIDのネームになります。今回は特に使用しないので何でもOKです。

Long description・・・Botの説明文です。自由に記載してしまって問題ないです。

Bot profile

② Configuration

・Messaging endpoint
・Register your bot with Microsoft to generate a new App ID and password
・Paste your app ID below to continue

ここまで設定できたら、このBotで使用するアプリケーションのApp ID と password を作成しましょう。
「Create Microsoft App ID and password」というリンクがあるのでそちらをクリック、「アプリ ID とパスワードを生成」というページにジャンプします。

「アプリ名」、「アプリID」の二つの項目に既に入力したアプリの名前と自動発行されるIDが入力されています。アプリIDの文字列はコピーしておいてください(後ほど使用します。)

アプリ ID とパスワードを生成

次に「アプリパスワードを生成して続行」のボタンを押すとパスワードが発行されます。注意すべき点はこのタイミングでしか文字列全てを閲覧することが出来ないので、必ずどこかにコピーして控えておいてください。

パスワード発行画面

パスワードを保存したら「終了してボットのフレームワークに戻る」をクリックしてください。


※補足:
もしパスワードを控える作業を忘れたまま保存してしまった場合は、新たにパスワードを再発行する必要があります。手順は以下の通りです。

① BotをRegisterを押して作成完了した後、Botのページ上部のSETTINGをクリックしてください。

SETTINGをクリック

② 移動するとBotのパラメータを設定した画面に移ります。
中段にあるConfigurationにある「Manage Microsoft App ID and password」をクリックしてください。

Manage Microsoft App ID and passwordをクリック

③ 下記の画面に遷移しましたら、「アプリケーションシークレット」の項目に旧パスワードがあります。
こちらを削除ボタンを押して削除(①)、その後「新しいパスワードを生成」を押して新規パスワードを発行、改めてコピーしてください。

旧パスワード削除-新しいパスワードを生成

最後に最下部にある「保存」のボタンをクリックすればパスワードの再設定は完了です。

再設定完了


さて、ここまで完了したら、一度Dialogflowに戻って下さい。

下記のIntegrationの画面で、「Skype」のボタンをONにします。

SkypeボタンをON

すると下記のような画面が出てきます。「Microsoft App ID」「Microsoft App Password」の欄に、先ほどコピーしたMicrosoft Bot FrameworkのApp IDとpasswordをペーストしてください。また「Request URL」に記載されているURLをコピーしてください。

URLをコピー

上記の設定が完了しましたら右下にある「START」を押し、有効化します。

再びMicrosoft Bot Frameworkのページに戻ります。Configurationの項目の中に「Messaging endpoint」という欄がありました、ここに先ほどの「Request URL」からコピーしたURLをペーストします。

コピーしたURLをペースト

上記が完了しましたら、一番下の「Admin」の項目の中にある「I agree that my use of the Bot Framework …」のラジオボタンにチェックを入れて、左下のRegisterをクリックして完了です。

完了

Bot Creating と表示されればOKです。

それではチャットがちゃんとできるかテストしてみましょう!

作成したBotのページに飛んだら、右上にある「← Test」のボタンをクリックしてください。

Testボタンをクリック

するとこんな画面が右側に出てきます。ここにインテンツで入力したテキストを打ってみましょう。今までの流れが正しく出来ていれば、反応します。

インテンツで入力したテキストを打つ

では最後にhtmlテンプレートを作成してみましょう。

Botのページに移動し、下記「Connect to channels」という項目の中にあるWeb Chatの「Edit」をクリックしてください。

Editをクリック

すると下記の画面、「Configure Direct Line」に移動します。
ここにあるSecret keysのいずれか、及びEmbed codeの文字列をhtmlのiframeのsrcにタグとして書き加えることで利用することが可能です。

Configure Direct Line

試しにiframeのhtmlテンプレートを作ってみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>iframe_Skype</title>

<link rel="stylesheet" type="text/css" href="style.css">

<!--[if lt IE 9]>
<!--
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
-->

<![endif]-->
</head>
<body>

<iframe src='<iframe src='https://webchat.botframework.com/embed/test_html?s=YOUR_SECRET_HERE' width="450" height="700" ></iframe>


</div>
</body>
</html>

※<iframe></iframe>タブとしてにコピーしてきたEmbed codeをペースト、「YOUR_SECRET_HERE」の部分にSecret keysのいずれかを記入します。

保存したら早速htmlファイルを開いてみましょう。
下記のようにTest Chatの時と同じように表示されればOKです。インテンツに書いた内容も問題なく出力できています。

iframe_html

今回は、DialogflowにあるIntegrationの中の一つ、「Skype」、MicrosoftのBot Frame Work、を使用してWebサイトなどに使えるhtmlのテンプレートを作成してみました。
ECサイトなどで問い合わせフォームなどをチャットボットなどで利用している企業様がよく見られます(楽天カード(https://www.rakuten-card.co.jp/)などがあります)。
そういった形で自身が作成したWebページ上にチャット画面を表示もできると思います。

今回はiframeでのサンプルhtmlを使ったテンプレートの作成でしたが、このような仕組みでdialogflowと連携してチャット画面を作成できる、ということを理解いただけたれば幸いです。

ご覧いただきありがとうございました!

タグ:


参考になったら「いいね!」と「シェア」をお願いします!!

このエントリーをはてなブックマークに追加
AI(人工知能)入門セミナー開催中
AI(人工知能)入門セミナー AI(人工知能)入門セミナー

AI入門ブログの中の人

AI研究所 研究スタッフ
通称:マサミ
アメリカ・サンフランシスコにある情報メディアの専門学校を卒業。大手金融会社での事務経験を経て、2016年9月よりAI研究所に入所。見習い研究員として、AI技術を日々勉強中。

Facebookページ