Milkcocoaと人工知能チャットボットを使ってMonacaアプリを作ってみた♪

こんにちわ。伊藤です!!

「Monacaアプリを作ってみよう!」 シリーズとして、
今回は自動会話機能のAIエンジンを利用したリアルタイムチャットアプリを作ってみました。

今回やること

今回は、会社紹介用のアプリにチャット機能を搭載することを目的にします。
Monacaアプリなので、もちろんHTML5でAndroidとiPhoneアプリ両方対応できるようにします。

  • 会社紹介アプリにFacebookメッセンジャーのようなチャット窓口を設置する。
  • リアルタイムでメッセージのやりとりができること。
  • 人工知能を使って自動でメッセージの返信ができること。
  • HTML5を使ってワンソースで、AndroidとiPhoneアプリが構築できること。

利用するサービス(API/フレームワーク)

構築に時間をかけずに実現したいので、素敵な外部サービスを利用します!!

① Milkcocoa | リアルタイムアプリ・IoTやるならMilkcocoa

Pub/Sub通信でリアルタイムにデータのやりとりをするために、Milkcocoaを利用します。
サンプルのチャットUIがあるので、簡単にチャットサポートが導入できます。

Milkcocoaを利用すると、自前でサーバを準備せずに弊社が提供するクライアントSDKを介してデータの保存、更新、取得またPub/Sub通信を行うことが出来ます。通信はTLS暗号化され、保存されたデータは自動的にレプリケーションされます。クライアントからの通信はErlangサーバにて処理され、多くのトランザクションに対応することが出来ます。(Milkcocoa 公式HPより)

milkcocoa

公式サイトへ

② ユーザーと自動で対話するチャットボット(ユーザーローカル人工知能ボットAPI)

チャットしてもなかなか返信が返ってこないと悲しいので、
ユーザローカルさんが提供している自動会話APIを利用して、自動で返信できるようにします。

ユーザーが入力した日本語のメッセージに対して自然な受け答えや雑談を返信するAIエンジンです。ユーザーローカルが保有している膨大なテキストデータをもとに応答するため、独り言のようなちょっとしたつぶやきに対しても多様なバリエーションの会話を実現できるため、ボットとの雑談を楽しむことができます。単純な返答だけではなく、過去の対話内容にあわせたテーマで会話させる、といった指定も可能です。(人工知能チャットボット 公式HPより)

user_local

公式サイトへ

③ HTML5ハイブリッドアプリプラットフォーム Monaca

HTML5でAndroid、iPhone両方対応したアプリを作ります!

Monacaを使うと、Web制作者・開発者が、既存のスキルセットですぐにiOSやAndroidに対応したモバイルアプリ開発を始められます。(Monaca 公式HPより)

monaca

公式サイトへ

つくってみましょう!!

MilkcocoaとMonacaでチャットアプリを作る

Milkcocoaの設定

1)会員登録
2)Milkcocoaにアプリを新規作成
3)公式サイトのサンプルの手順通りに権限や接続許可設定を修正
参照:https://mlkcca.com/document/start-js.html
参照:http://blog.mlkcca.com/frontend/chat-support-plugin/

Monacaアプリの準備

1)ローカルにプロジェクトを作成
 Monacaのローカルキットを利用して新規プロジェクトを作成
 参照:https://docs.monaca.io/ja/manual/development/monaca_localkit/
4)Monacaのローカルキットにてアプリを実行します。

ユーザーローカル人工知能ボットAPIを利用して、自動返信できるようにする

チャットボットを使う

1)会員登録
 http://ai.userlocal.jp/
2)milkcocoaのデータストレージから任意のデータを取得
 https://mlkcca.com/document/api-js.html
3)最新のデータを取得

dataStore.stream().size(1).next(function(err, data) {
  // 最新のデータ
  var newData = data[0].value.content;
  console.log(newData);
});

4)チャットボットに取得した最新データを送信
 エンドポイント(GET または POST)
‘https://chatbot-api.userlocal.jp/api/chat’
 入力パラメーター
  ・key : アクセストークン[必須]   ・message : 入力メッセージ[必須]  ’https://chatbot-api.userlocal.jp/api/chat?key=発行したAPIキー&message=最新のデータ’
5)返却された文言を担当者として送信
  ’content’ : 送信したいデータ,
  ’publisher’ : ‘担当者として送信’

dataStore.push({ 'content' : data["result"], 'publisher' : 'operator' }, function(err, pushed){
  //サーバに到達
  console.log(pushed);
}, function(err) { //"Permission denied" or "limit exceeded" });

会社紹介アプリにFacebookメッセンジャーのようなチャット窓口が出来ました!!

1)チャットが閉じている時

チャットが閉じている時は、Facebookメッセンジャーのようにしたの方にチャットパネルが待機します。

2)チャット開いた時

チャットパネルをタップすると、チャットが開きます。

3)メッセージ入力/送信

メッセージを入力すると、リアルタイムで管理者にメッセージを送信することが可能です。
Milkcocoa管理画面にログインすると、ユーザとリアルタイムチャットができます。

4)メッセージ受信

人工知能チャットボットが自動で返信をしてくれます!
Milkcocoa管理画面から、直接メッセージを返信することも可能です。

まとめ

外部の素敵サービスを使うことで、簡単にFacebookメッセンジャー風のチャット窓口が、会社紹介アプリに設置できました!
ぜひ皆様も参考に作ってみてください♪

Monacaでのリアルタイムチャットアプリのお問い合わせ

お問い合わせはこちら

コメントを残す

メールアドレスが公開されることはありません。