人工知能搭載アプリもMonacaで実現！顔認識機能を使ったハイブリッドアプリをご紹介

2016年6月21日 に開催された、アシアル株式会社さま主催の「Monacaソリューションセミナー 〜HTML5ハイブリッドアプリ開発、成功の秘訣を一挙公開〜」に登壇させていただいた際の発表資料です。

弊社登壇メンバー：
SynApps Tabletエバンジェリスト 伊藤 伸晃
SynApps Tabletエバンジェリスト・開発PM 西間木 将矢

【SynApps Tabletのブログ記事】
国内初！顔で常連認識を行うO2O×人工知能型 Monacaアプリ
https://goo.gl/2i31ER

【SynApps Tablet公式ページ】
http://goo.gl/uvwRgf

Transcript

1. Headwaters Page0 Copyright © 2016, Headwaters. All Right Reserved. Copyright © 2016, Headwaters. All Right Reserved. 人工知能搭載アプリもMonacaで実現！ 顔認識機能を使ったハイブリッドアプリをご紹介
2. Headwaters Page1 Copyright © 2016, Headwaters. All Right Reserved. 　アウトライン n  １．会社のご紹介 –  （株）ヘッドウォータースの会社概要と強みについて n  ２．Monacaアプリデモンストレーション –  顔認識機能を使ったハイブリッドアプリ例 n  ３．Monacaアプリ開発について
3. Headwaters Page2 Copyright © 2016, Headwaters. All Right Reserved. 　アウトライン n  １．会社のご紹介 –  （株）ヘッドウォータースの会社概要と強みについて n  ２．Monacaアプリデモンストレーション –  顔認識機能を使ったハイブリッドアプリ例 n  ３．Monacaアプリ開発について
4. Headwaters Page3 Copyright © 2016, Headwaters. All Right Reserved. 会社概要 株式会社ＪＡＬインフォテック 様 日産自動車株式会社 様 大東建託株式会社 様 株式会社よしもとクリエイティブエージェンシー 様 ブックオフオンライン株式会社 様 株式会社ドン・キホーテ 様
5. Headwaters Page4 Copyright © 2016, Headwaters. All Right Reserved. モノ 人工知能 AIと様々なデバイスをつなぐ SynApps(シナップス)
6. Headwaters Page5 Copyright © 2016, Headwaters. All Right Reserved. 簡単に接続可能！ ＡＩや顔認識と様々なデバイスをつなぐ SynApps(シナップス)
7. Headwaters Page6 Copyright © 2016, Headwaters. All Right Reserved. ＡＩや顔認識と様々なデバイスをつなぐ SynApps(シナップス)
8. Headwaters Page7 Copyright © 2016, Headwaters. All Right Reserved. 　アウトライン n  １．会社のご紹介 –  （株）ヘッドウォータースの会社概要と強みについて n  ２．Monacaアプリデモンストレーション –  顔認識機能を使ったハイブリッドアプリ例 n  ３．Monacaアプリ開発について
9. Headwaters Page8 Copyright © 2016, Headwaters. All Right Reserved. 顔認識を活用したアプリのご紹介 １．顔認識して 常連さんを自動判別！ ３．常連さん一人一人に合わせたおすすめ ２．常連さんならではの 「いつもの」メニュー ４．常連さんだけのお得なクーポン！
10. Headwaters Page9 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（初回ご来店時の利用イメージ）
11. Headwaters Page10 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（初回ご来店時の利用イメージ）
12. Headwaters Page11 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（初回ご来店時の利用イメージ）
13. Headwaters Page12 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（初回ご来店時の利用イメージ）
14. Headwaters Page13 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（初回ご来店時の利用イメージ）
15. Headwaters Page14 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（初回ご来店時の利用イメージ）
16. Headwaters Page15 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（2回目以降のご来店イメージ）
17. Headwaters Page16 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（2回目以降のご来店イメージ）
18. Headwaters Page17 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（2回目以降のご来店イメージ）
19. Headwaters Page18 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（2回目以降のご来店イメージ）
20. Headwaters Page19 Copyright © 2016, Headwaters. All Right Reserved. デモンストレーション（2回目以降のご来店イメージ）
21. Headwaters Page20 Copyright © 2016, Headwaters. All Right Reserved. 顔認識を活用するための3つの準備 １．SynAppsで アプリ登録 ３．Monaca で UI デザインをカスタマイズ ２．SynAppsで メニュー登録 SynApps と Monaca を使えば、 簡単に 人工知能アプリ も構築可能。
22. Headwaters Page21 Copyright © 2016, Headwaters. All Right Reserved. 顔認識を活用するための3つの準備 １．SynAppsで アプリ登録
23. Headwaters Page22 Copyright © 2016, Headwaters. All Right Reserved. 顔認識を活用するための3つの準備 ２．SynAppsで メニュー登録
24. Headwaters Page23 Copyright © 2016, Headwaters. All Right Reserved. 顔認識を活用するための3つの準備 ３．Monaca で UI デザインをカスタマイズ
25. Headwaters Page24 Copyright © 2016, Headwaters. All Right Reserved. 　アウトライン n  １．会社のご紹介 –  （株）ヘッドウォータースの会社概要と強みについて n  ２．Monacaアプリデモンストレーション –  顔認識機能を使って常連客にアプローチするO2Oアプリ n  ３．Monacaアプリ開発について
26. Headwaters Page25 Copyright © 2016, Headwaters. All Right Reserved. 弊社のMonacaアプリ開発について Monacaアプリ開発事業 2012年 Monacaアプリ開発開始 　　　　　 自社アプリなどで活用 2013年 受託開発にてMonacaを利用開始 2014年 Monacaパートナー 〜 現在 国内TOPのアプリ開発実績 豊富なMonacaアプリ開発実績
27. Headwaters Page26 Copyright © 2016, Headwaters. All Right Reserved. 弊社のMonaca開発についてご紹介（成功のポイント） １．UI/UX プロトタイピング開発 ３．継続的な開発体制 ２．HWSチーム開発 DevOps ４．Monacaアプリの操作感
28. Headwaters Page27 Copyright © 2016, Headwaters. All Right Reserved. UI/UX プロトタイピング開発でユーザファーストな開発を実現！ ・ 作る前にアウトプットイメージを共有 　→ クライアント / 開発チーム双方 ・ 開発前の動作検証で無駄な機能をはじく ・ 最初： POPなどのプロトタイピングツール 　モック作成後： Monaca デバッガー ・ ユーザテストを実施し、高速な改善PDCA 　→ WEBベースの方がやりやすい 成功のPOINT ①
29. Headwaters Page28 Copyright © 2016, Headwaters. All Right Reserved. Monacaアプリ チーム開発 DevOps ・ ソースコード管理： Git / GitLab ・ エディタ： PHPStorm ・ 開発環境： Monaca Localkit ・ 動作確認： Monaca デバッガー 　　　　　　　　 Monaca カスタムデバッガー ・ その他ツール： 　　　　　　　　 DeployGate 　　　　　　　　 　　　　　→ リリースビルド版アプリ配布 　　　　　　　　 Backlog （課題管理） 　　　　　　　　 ChatWork （コミュニケーション） 成功のPOINT ②
30. Headwaters Page29 Copyright © 2016, Headwaters. All Right Reserved. WEBエンジニアによる継続的なアプリ開発体制 WEB系の技術で Android / iOSアプリに対応可能 　・ ネイティブエンジニアを囲うコストを抑えられる。 　・ エンジニアのアサインメントが柔軟に対応できる。 WEBエンジニア： 2〜3名 （サーバサイドの開発もできる） デザイナー： 1名 （HTMLモックまで作成してもらう） PM： 1名 成功のPOINT ③
31. Headwaters Page30 Copyright © 2016, Headwaters. All Right Reserved. Monacaアプリの操作感（UIパーツをコンポーネント化して利用） サクサクと動く。 → デモアプリがありますので、相談会の際に 　　お声掛けいただければと思います。 ・ デバイスの性能の向上 ・ OnsenUIを始めライブラリ、プラグインが充実 ・ 弊社で構築したUIパーツをコンポーネント化して利用 成功のPOINT ④
32. Headwaters Page31 Copyright © 2016, Headwaters. All Right Reserved. Copyright © 2016, Headwaters. All Right Reserved. Monacaを使って、多様なデバイス、 バックエンドシステムと効率的に連携して、 スマートなアプリ開発の未来を作りましょう！