チャットボットこんにちは、AI研究所、駆け出し研究員のリョウタです。今回は、自分作ったチャットボットと会話できるようにする方法として、Webサイトに直接埋め込んで使える「カスタムチャット画面」の作成方法をご紹介します。チャットボットを導入したいけど、どうやって会話が成立するのかわからない人は是非読んでみてください。Workを、Dialogflowとの連携のためにIntegrationの中の一つ、「Skype」と使用して作成します。Frameworkというサービスです。Frameworkはマイクロソフト社が2016年ごろに発表したサービスでSkypeと連携することでチャットボットを作成することが可能になります。無料でアカウント作成が可能でマイクロソフト社のクラウドサービスであるAzureとも親和性を持っています。FrameworkとDialogflowの連携のために、SkypeのIntegrationを使用します。Payloadの記事にも記載しましたが、Dialogflowは数多くの外部アプリケーションに接続し、Dialogflowで作成したテキスト内容を簡単にアウトプットすることが出来ます。チャットボット作成方法それでは早速やってみましょう!まずDialogflowで新規エージェントを作成します。Dialogflowの基本的な使用方法は、過去の記事「チャットボットの簡単な作り方」を御覧ください。response.」のチェックをONにしてください。responseなどの回答内容をSKYPE側でも出力する、という設定になります。responseなどの回答内容を設定することも可能です。話が少しそれましたが、次のステップに進みます。account)のリンクから作成してください。作成が出来ましたら、下記のリンクからbotを作成します。https://dev.botframework.com/bots/newパラメータを入力していきます。「*」マークがついているとこを必須項目になります。name・・・Botの名前になります。お好みのお名前を入力してください。handle・・・BotのIDのネームになります。今回は特に使用しないので何でもOKです。description・・・Botの説明文です。自由に記載してしまって問題ないです。パスワードを生成」というページにジャンプします。「アプリ名」、「アプリID」の二つの項目に既に入力したアプリの名前と自動発行されるIDが入力されています。アプリIDの文字列はコピーしておいてください(後ほど使用します。)次に「アプリパスワードを生成して続行」のボタンを押すとパスワードが発行されます。注意すべき点はこのタイミングでしか文字列全てを閲覧することが出来ないので、必ずどこかにコピーして控えておいてください。パスワードを保存したら「終了してボットのフレームワークに戻る」をクリックしてください。【毎月開催】ビジネスマンに好評なチャットボットセミナーはこちらから!補足もしパスワードを控える作業を忘れたまま保存してしまった場合は、新たにパスワードを再発行する必要があります。手順は以下の通りです。1BotをRegisterを押して作成完了した後、Botのページ上部のSETTINGをクリックしてください。2移動するとBotのパラメータを設定した画面に移ります。password」をクリックしてください。3下記の画面に遷移しましたら、「アプリケーションシークレット」の項目に旧パスワードがあります。こちらを削除ボタンを押して削除(1)、その後「新しいパスワードを生成」を押して新規パスワードを発行、改めてコピーしてください。最後に最下部にある「保存」のボタンをクリックすればパスワードの再設定は完了です。ここまで完了したら、一度Dialogflowに戻って下さい。下記のIntegrationの画面で、「Skype」のボタンをONにします。すると下記のような画面が出てきます。IDとpasswordをペーストしてください。URL」に記載されているURLをコピーしてください。上記の設定が完了しましたら右下にある「START」を押し、有効化します。Frameworkのページに戻ります。URL」からコピーしたURLをペーストします。...」のラジオボタンにチェックを入れて、左下のRegisterをクリックして完了です。表示されればOKです。Test」のボタンをクリックしてください。するとこんな画面が右側に出てきます。ここにインテンツで入力したテキストを打ってみましょう。今までの流れが正しく出来ていれば、反応します。最後にhtmlテンプレートを作成してみましょう。Chatの「Edit」をクリックしてください。Line」に移動します。codeの文字列をhtmlのiframeのsrcにタグとして書き加えることで利用することが可能です。htmlテンプレート試しにiframeのhtmlテンプレートを作ってみます。keysのいずれかを記入します。保存したら早速htmlファイルを開いてみましょう。Chatの時と同じように表示されればOKです。インテンツに書いた内容も問題なく出力できています。Work、を使用してWebサイトなどに使えるhtmlのテンプレートを作成してみました。実際にECサイトなどでお問い合わせフォームなどでチャットボットを導入し、利用している企業が増えてきています。(楽天カード(https://www.rakuten-card.co.jp/)などがあります)。チャットボットの導入事例もたくさん出て行きているので、皆さんも自身が作成したチャットボットを使ってWebページ上にチャット画面を表示することが簡単にできると思います!iframeでのサンプルhtmlを使ったテンプレートの作成でしたが、このような仕組みでdialogflowと連携してチャット画面を作成し、チャットボットと会話をすることができるということを理解いただけたれば幸いです。入門セミナーを実施しています。セミナーを通して、チャットボットの仕組みを学ぶことができ、さらに、Dialogflowを習得し、実際にチャットボットを作成しホームページやLINE、Facebookなどでチャットボットを活用できるようになります!「チャットボットを使って業務を効率化したい」「チャットボットの作成方法を知りたい」という方にオススメのセミナーです。事務経験を経て、2016年9月よりAI研究所に入所。AIセミナー責任者、講師。AIについての幅広い知識を持ち、人に分かりやすく伝える技術を持つ。AIを事業や仕事に取り入れる方法について日々講義しています。RESERVED.ご希望のコースを選択してください。自分でコースを自由にカスタマイズする。