Webページにチャットボットを埋め込もう！誰でも簡単に対話型人工無能ボットを作れる「Meya.ai」とは？ ｜ SiTest (サイテスト) ブログ

今年、注目のチャットボット。
LINE, Twitter, Facebook, Slack等
様々なツールと連携できるようにもなり、よく目にすることも増えてきました。

MicroSoftの「りんな」のような、対話型ボットをWebサイトに埋め込みたいですよね。

ただ、難しそうですよね。
そんな課題を解決するのがご紹介する「Meya.ai」です。

実際に作りながら、見ていきましょう。

対話型人工無能ボットを簡単に作成できるプラットフォームです。

人工知能ではなく、人工無能ですが、
エンジニアでなくても、GUI(ブラウザ操作)だけでチャットボットを作成することができます。

もう一つの特長として、Twitter, Slackなどのチャットツールとも連携が容易であり、
Webサイトにチャットボットツールを搭載できるスニペットも生成してくれます。

また、無料で使用できます。
では、実際に作っていきましょう。

まず、下記のURLにアクセス
https://meya.ai/

「GET STARTED」をクリックして、登録画面に進みましょう。

アカウント名とメールアドレスを記入し、[SIGN UP FOR FREE]をクリックします。

アカウント作成が完了しますので、メールを待ちます。

メールの内容を確認して、赤枠からサインイン画面に遷移してください。

パスワードを記入して、「SET PASSWORD」をクリックします。

すると、アカウント画面に遷移するので、
さっそく「CREATE A BOT!」をクリックし、BOTを作っていきましょう。

今回は、「WelcomeBot」テンプレートが用意されているので、そちらを選択します。

チャットボットの名前を決めます。
今回は、[Test Bot]という名前をつけます。
記入後、「CREATE BOT!」をクリックします。

チャットボットが作成されましたので、設定していきましょう。
「EDIT IN BOT STUDIO」をクリックしてください。

チャットボットの設定画面に入ります。
右側赤枠の「Flows」にyml形式で命令が書かれており、
「Components」にPythonで命令の処理が書かれています。

左側の赤枠は、チャットボットをテストすることができます。
テンプレートとして既に、[start(チュートリアル), gif(gif画像を取得), joke(ジョークを取得), weather(天気を取得)]等のキーワードが用意されておりますので、一度、試しに打ってみてください。

中央の赤枠はコードを書き換えたり、生成したりします。
ここでチャットボットを設定していきます。

ざっと説明しましたので、右上の「NEW FLOW」をクリックして、設定していきましょう。

上記のような画面になりますので、
[INTENT TYPE]を[KEYWORD]に、
[SETTINGS]のコードの”KEYWORD”を”testbot”に変更します。

これでKEYWORDの値をチャットでたたくと、そのキーワードに応じたチャットが返ってきます。

その後、右上の[Hide]をクリックします。

上記の画面になりますので、命令文を書いていきます。

まず、[EMPTY TEMPLATE]をクリックしますとテンプレートが出てくると思います。

コードの”your_flow_name”を”testbot”に変更し、
次に、”first:”を削除します。

最後に[CARDS]の中から[Complete Card]をクリックします。

すると、上記のようなコードになります。
今回は、画像を取得し、その画像に対しての質問を答えれるようにボタンを用意してくれる命令にしました。
[Complete Card]だけではなく、さまざまな処理がありますので、是非、試してみてください。

完了すれば、右上の[SAVE]をクリックします。

それでは、右側のチャット画面からテストしてみましょう。
[testbot]と打ち込み、上記のようにかわいいくまさんの画像がでてきており、
ボタンが2つでてきていれば、完了です。

チャットボットはひとまず完成したので、次にWebページに埋め込むためのスクリプトを取得しましょう。
DASHBOARDのIntegrationsからWebを選択します。

上記のような画面がでてきますので、
色を変えられたいなら、Enter settingで変更できますが、
とくに変えられないならそのまま[SAVE]をクリックしてください。

するとCode snippet でスニペットがでてきますので、
[Copy]をクリックして、スニペットを埋め込みたいサイトに埋め込んでください。

実際にスニペット埋め込んだ画面がこちらです。
右下にチャットボットアイコンがでてきています。
こちらをクリックすると、

このように、チャット画面がでてきますね。
Webページに埋め込み完了です！

いかがでしたでしょうか？

「Meya.ai」の概要から、
Webページにチャットボットを埋め込むまでをご紹介しました。

今回はあまり人工無能について触れていませんが、
設定にこだわると簡単に人工無能チャットボットを作れます。

是非、一度使ってみてください。