Magic3で作るチャットボットシステム

#チャットボットについて
チャットとはWebブラウザ上で人間を相手にして対話することですが、相手がAIなど自動化されたプログラムの場合は相手のことをチャットボットと言います。ボットはプログラムの意味です。
旧来のWebサイトは基本的にアクセスする人がサイト内のページを移動し、自分でコンテンツを参照していくシステムです。現実世界のお店のように分からないことを聞ける店員は存在していません。
Webサイトにチャットの仕組みを取り込み、訪れた人々と直接対応することは可能になりましたが、人間が常に待機しなければならないのは不便です。そこでさらに進んで自動対応するチャットボットのシステムが登場しました。
チャットボットシステムがあれば、人が待機することなくいつでも訪問者の相手をしてくれるバーチャルな店員を配置することができます。訪問者からすると、聞きたいときにいつでも相手をしてくれる店員がいることでサイト内を探す手間や時間が大幅に省け、目的に的確な情報を取得できるようになります。

ここではオープンソースCMSのMagic3を使ってチャットボットのサイトを構築する方法を解説していきます。
以下のようにWebサイト画面上に乗っかる形でチャット画面が起動し、対話できるシステムになります。

#システムの仕組み

チャットボットを実現するには「質問に対しての返答」を生成するための対話パターンをあらかじめ登録する必要があります。対話機能にはドコモ社のRepl-AIというサービスを使用します。無料から使用できます。
Magic3はプログラミング知識がまったくなくても使用できるプログラミングレスのCMSです。ウィジェットという機能部品をマウス操作で画面に配置するだけでサイトに様々な機能を追加できます。今回のシステムではRepl-AIと連携し画面にチャットエリアを表示するRepl-AIチャットボットウィジェットを使用します。

全体的な仕組みとしては、以下の図のようにRepl-AIが対話内容を処理し、Magic3がブラウザ画面の表示制御を行い、両者の連携でチャットボットのシステムが動作します。

#デモシステムの構築
ここでは主にRepl-AIの無料のアカウントを取得して、既存のMagic3システムと連携させるまで行います。
Magic3のインストール作業やRepl-AIでの会話データ作成の解説は行いません。

##Repl-AIに登録
Repl-AIの公式サイト(https://repl-ai.jp/ )に行き、右上の登録ボタンからRepl-AIに登録しアカウントを取得します。

ログインするとダッシュボード画面が表示されます。
まずはプロジェクト名「sample」を追加し、さらにボットID「sample」でボットの追加まで行います。

詳しい説明はこちらにあります。(https://repl-ai.jp/howto/start )

対話パターンのまとまりはシナリオという単位でまとめられます。
デフォルトで登録されているテスト用のシナリオのうち、今回は「挨拶(aisatsu)」を使用します。

Magic3側で必要とする情報は、ボットID、シナリオID、開発者向けAPIキーです。
ボットIDとシナリオIDは半角文字で正確に設定します。それ以外の日本語のタイトル的な名前は任意で結構です。

「挨拶(aisatsu)」のシナリオを選択すると対話フローを編集する画面が表示されます。対話データを設定を変更したり追加したりできます。

#Magic3の設定
Magic3側のシステムの設定を行います。作業はRepl-AIチャットボットウィジェットを画面構成用の画面にドロップして、Repl-AIとの接続情報を設定するだけです。
尚、この解説の内容はMagic3のバージョンv3.0.1以降に対応しています。

##サンプルデータのインストール
Repl-AIチャットボットは独立したチャットエリアを作成するのでコンテンツ内容に関係なくMagic3の任意のページ上で動作しますが、テンプレートの型に制限があります。
ここではサンプルデータ「wiki_init」で作成したサイト上にチャットボットを表示します。
管理画面のメインメニューから「メンテナンス」をクリックし、さらにサブメニューから「DB管理 － データインストール」を選択します。「wiki_init」を選択し「インストール」ボタンを押します。

###テンプレート型について
Repl-AIチャットボットウィジェットのデザインは使用するテンプレートのCSSに依存しているので、使用可能なテンプレートの型に制限があります。Themler型(T)またはBootstrap型(B)テンプレートに対応しています。画面構成の画面で「T」または「B」のテンプレートが選択できます。

##ウィジェットの配置
画面構成の画面からページにウィジェットを配置し、ウィジェット設定画面で設定を行います。
画面構成の画面の初期状態ではRepl-AIチャットボットウィジェットが一覧上に表示されないので表示されるように設定を行います。

1. 管理画面のメインメニューから「ウィジェット管理」をクリックし、「ウィジェット一覧」画面を開きます。
2. 「ウィジェット一覧」画面上部にある「+」ボタンを押して「-」に変更します。「操作」欄にオプションボタンが表示されます。さらに「稼働ウィジェットのみ表示」のチェックをはずしてすべてのウィジェットを表示させます。
3. Repl-AIチャットボットの行の「配置」欄にチェックを入れ、右側にある「行の更新」ボタンを押して設定を更新します。

ウィジェットを配置します。
管理画面メインメニューから「PC画面」をクリックし画面構成の画面に遷移します。
ウィジェット一覧の「その他」カテゴリーにRepl-AIチャットボットウィジェットが表示されるようになるので、画面の配置ブロックにドロップします。どの配置ブロックにドロップしても動作します。ここでは「left」ブロックに配置します。配置をウィジェットの右下のアイコンをクリックしてウィジェット設定画面を起動します。

ウィジェット設定画面の設定を行います。
ボットIDには「sample」、シナリオIDには「aisatsu」というIDがデフォルトで入っているのでそのまま使用します。開発者向けAPIキーだけ取得したアカウントのキーを設定して、「新規追加」ボタンを押します。設定はこれで終了です。

#動作確認

「プレビュー」ボタンからフロント画面を起動してみます。チャットボットからのメッセージが表示されればMagic3とRepl-AIのシステムの連携は無事完了です。

さらにチャットエリア下部の入力エリアに適当に入力し「送信」ボタンを押してみます。チャットボットからの返事が返ってきます。
対話データにない情報がチャットボットに送られた場合は「NOMATCH」で返ってきます。実際の対話データ作成ではRepl-AIの管理画面から「NOMATCH」の部分のデータを作り込んでいきます。

#終わりに

以上でMagic3を使ったチャットボットシステムが完成しました。
「チャットボット」という言葉の理屈だけを聞いてもなかなか本当の使い道は理解できないものです。実際に動かしてみると役に立つ発想もいろいろ出てくると思います。
ぜひ、トライしてみてください。

#参考
####横浜市資源循環局
http://www.city.yokohama.lg.jp/shigen/sub-shimin/dashikata/
Magic3は使用されていませんが、ゴミ分別の案内機能がRepl-AIで作成されているサイトです。

####Magic3ドキュメント
http://doc.magic3.org

####Repl-AI対話シナリオの作り方
https://qiita.com/tanakaworld/items/80bcb6f559d7a0ac94a9