人口知能チャットボットをWebページに埋め込む!


こんにちは。kawaです。

今回は、ユーザーローカル社の人工知能チャットボットをWebページに埋め込む方法をご紹介したいと思います。プログラミングは少し使いますが、初心者でも割と簡単にできますよ!

用意するものはこちら。
・Microsoft Azureのアカウント
ここからMicrosoft Azureのアカウントを作ってください。ある程度の範囲内なら無料で使えます。

・ユーザーローカル社の人工知能ボット
こちらから登録できます。メールでAPIキーが送られてくるので、それを使用します。詳しくは前回の記事へ。

お疲れ様です。準備は整いました!無料で、割と手軽に登録できますよね。

 


それでは早速、Webページにチャットボットを埋め込む作業に移っていきましょう。

まずはBot Serviceの作成です。Microsoft Azureのポータルから、「新規」(+のマーク)をクリックし、
「Marketplaceを検索」の窓で「Bot Service」を検索しましょう。
(BotとServiceの間にスペースを入れないと検索結果が出てこないので注意!)

 

検索結果に出てきた「Bot Service」を選択し、「作成」ボタンをクリックするとアプリ情報の入力を求められます。適当に設定してください。

作ったアプリは「App Service」に表示されますので、クリックしましょう。(表示されない時は画面左上の更新ボタンをクリック)

 

Microsoft App IDの作成を求められるので、「Create Microsoft App ID password」ボタンからアプリIDとパスワードを作成しましょう。

フォームにパスワードを入力すると、言語とテンプレートの設定ができるようになります。

 

今回はC#とBasicを選びます。

「Create bot」ボタンをクリックすると、botの作成が始まります。2~3分かかるので、カントリーマアムでも食べながら待ちましょう。ていうかカントリーマアムって年々小さくなってませんか??

 


さて、これでボットサービスができました。画面右上にある「Test」(青色のボタン)をクリックすると、ボットを試すことができます。今はただおうむ返しをするだけの状態です。

ここからこのボットサービスをユーザーローカルの人工知能ボットと連携させていきましょう。変更を加えるファイルは1つだけ!
messagesフォルダの中にあるEchoDialog.csxを編集します。

このままコピペして、APIキーの部分だけ自分が作った人工知能チャットボットのAPIキーを記入してください。Saveボタンを押したら、もう一度チャットボットに話しかけてみましょう。

ちゃんと人工知能が返答してくれていますね!うまくいかない時は、Saveボタンをもう一度押したり、一度App Service一覧ページに戻って改めてボットの開発ページを開いてみてください。


最後に、このチャットボットをWebページに埋め込みます。

 

CHANNELSタブを開いて、「Web Chat」のeditページを開きます。

Add new siteをクリックするとサイト名の入力を求められるので、適当に名前をつけてください。

Embed codeとシークレットキーが発行されました!これをコピーして、任意のWebページに貼り付ければOKです。

簡単にhtmlを書くとこんな感じですね。シークレットキーの部分は先ほど生成されたものに変えてください。これをブラウザで表示させると…

こんな感じ。人工知能はちょっとお高いお菓子が好きなんですね。

 

次回は「人工知能にもうちょっと自分好みの返答をさせよう!」というテーマで書きたいと思います。こちらもぜひ読んでみてくださいねー。

それでは、kawaでした!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です