機械学習やAIといったキーワードが盛り上がりを見せています。
AIを用いたサービスをフルスクラッチで開発するのは難しそうですが、最近は画像認識や翻訳といったAIテクノロジーを気軽に扱えるAPIやライブラリが存在しています。
今回は、リクルートが提供する人工知能API群A3RTTalk APIとOnsen UIを使って、雑談を楽しめる簡単なチャットボットの仕組みを作ってみたいと思います。

つくるもの

完成品はこのようになります。
画面下部のメッセージボックスからメッセージを送信すると、botが雑談を返してくれます。

画像8

API KEYの取得

まずはA3RTのAPIを使用するためのAPI KEYを取得します。API発行|Talk API|PRODUCT|A3RTから簡単に取得できるので、準備をしておきましょう。

画像1

チャット画面作成

新規プロジェクトを「Onsen UI V2 JS Minimum」を使って作成します。
プロジェクトが起動したら、「設定」 > 「JS/CSSコンポーネントの追加と削除」に進み、jQueryをインストールしておきます。

それではチャット画面を作成していきましょう。
まずは <body></body> 内に以下のコードを記述します。

続いて、css/style.css に以下のCSSを記述します。

すると以下のような画面が作られます。

画像3

送信ボタン押下時の挙動

画面のベースはできたので、次は送信ボタンを押したときの挙動について書いていきます。
メッセージを送信するごとに、
<ons-list></ons-list>
の中に
<ons-list-item></ons-list-item>
が増えていく実装になります。

自分の送信内容を表示する

まずは自分が送信した内容が画面に表示されるようにスクリプトを書いていきます。

これで、テキストを入力して送信ボタンを押すと自分のメッセージが表示されるようになりました。

画像4

ボットからの返事を表示する

いよいよA3RT Talk APIの出番です。
A3RT Talk APIのサイトを見ると、サンプルのリクエストを確認できます。

参考として、ターミナルソフトからサンプルのリクエストを送信したときの結果を紹介しておきます。

上記のように送信すると、以下のようなレスポンスが返却されます。

それでは、アプリからAjaxで上記のリクエストを送信します。
APIを呼ぶ前に、あらかじめ取得していたAPI KEYとAPIのエンドポイントを定義しておきます。
your api key の部分は自分が取得したAPI KEYに置き換える必要があります。

AjaxでAPIを呼ぶときの処理は次の通りです。

パラメータとしてAPIKeyと自分が送信したメッセージの内容を送っています。
レスポンスステータスが200(成功)で返ってきたら、画面の左側にAIからの返事を表示させています。
今回は簡易サンプルということで、例外処理は省略します。

スクリプトの全体はこのようになります。

この状態で何か送ってみると…

AIから返事が返ってきました!

画像5

最後にメッセージの見た目をちょっとだけ修正しておきます。

画像6

簡易雑談ボットの完成です。


いかがでしたでしょうか?
AIというと難しく感じてしまいますが、こんなに簡単なAPIが提供されているとアイディア次第で自分でも何か作れそうですよね。
さらにMonacaとOnsenUIを使えばさくっとプロトタイピングができます。

他にもいろんなAPIが揃っていますので是非試してみてください。

今回のコードはmoongift/monaca-with-a3rt-talk-apiにアップロードしてあります。実装時の参考にしてください。