橋香代子Twitter4Facebook47はてブ3Pocket3LINE機械学習やAIといったキーワードが盛り上がりを見せています。AIを用いたサービスをフルスクラッチで開発するのは難しそうですが、最近は画像認識や翻訳といったAIテクノロジーを気軽に扱えるAPIやライブラリが存在しています。UIを使って、雑談を楽しめる簡単なチャットボットの仕組みを作ってみたいと思います。つくるもの完成品はこのようになります。画面下部のメッセージボックスからメッセージを送信すると、botが雑談を返してくれます。API|PRODUCT|A3RTから簡単に取得できるので、準備をしておきましょう。Minimum」を使って作成します。「JS/CSSコンポーネントの追加と削除」に進み、jQueryをインストールしておきます。それではチャット画面を作成していきましょう。内に以下のコードを記述します。以下のCSSを記述します。#ccc;}すると以下のような画面が作られます。画面のベースはできたので、次は送信ボタンを押したときの挙動について書いていきます。メッセージを送信するごとに、<ons-list></ons-list>の中に<ons-list-item></ons-list-item>が増えていく実装になります。自分の送信内容を表示するまずは自分が送信した内容が画面に表示されるようにスクリプトを書いていきます。元の入力内容は削除$("#message").val("")});});これで、テキストを入力して送信ボタンを押すと自分のメッセージが表示されるようになりました。APIのサイトを見ると、サンプルのリクエストを確認できます。参考として、ターミナルソフトからサンプルのリクエストを送信したときの結果を紹介しておきます。"query=おはよう"上記のように送信すると、以下のようなレスポンスが返却されます。"おはようございます"}],}それでは、アプリからAjaxで上記のリクエストを送信します。KEYとAPIのエンドポイントを定義しておきます。KEYに置き換える必要があります。{............});AjaxでAPIを呼ぶときの処理は次の通りです。chatbot</span></ons-list-item>`);}).fail(function(data){alert('失敗しました。');});パラメータとしてAPIKeyと自分が送信したメッセージの内容を送っています。レスポンスステータスが200(成功)で返ってきたら、画面の左側にAIからの返事を表示させています。今回は簡易サンプルということで、例外処理は省略します。スクリプトの全体はこのようになります。chatbot</span></ons-list-item>`);}).fail(function(data){alert('失敗しました。元の入力内容は削除$("#message").val("")});});この状態で何か送ってみると...AIから返事が返ってきました!最後にメッセージの見た目をちょっとだけ修正しておきます。#eee;}簡易雑談ボットの完成です。いかがでしたでしょうか?AIというと難しく感じてしまいますが、こんなに簡単なAPIが提供されているとアイディア次第で自分でも何か作れそうですよね。MonacaとOnsenUIを使えばさくっとプロトタイピングができます。他にもいろんなAPIが揃っていますので是非試してみてください。今回のコードはmoongift/monaca-with-a3rt-talk-apiにアップロードしてあります。実装時の参考にしてください。橋香代子アシアルコミュニティサポート。2014年にセブ島で英語とプログラミングの研修を受けてアパレル販売員からWEBフロントエンジニアにキャリアチェンジ、2017年からMOONGIFTにジョイン。MOONGIFTでDevRelやコミュニティサポートを手がけるかたわら、個人事業主としてWEBの受託開発も行っている。