2017年6月15日開催「クロスプラットフォームアプリ開発のベストプラクティス　～プッシュ通知もBeaconアプリもHTML5で実現〜」での講演資料

1. 1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Monaca7万アプリの事例例に学ぶ
クロスプラットフォーム開発
活⽤用のポイント
アシアル株式会社 塚⽥田亮亮⼀一

2. 2URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
アシアル株式会社
会社概要
• 創業：2002年
• 資本金：1000万円
• 事業所：東京（本社）、サンフランシスコ
• 従業員数：約40名（8国籍）
事業内容
• 開発プラットフォーム事業：開発ツール、UIフレームワーク
• 開発支援事業：アプリ開発、サーバーサイド（PHP）開発
• 教育事業：トレーニング、執筆

3. 3URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
HTML5モバイルアプリ開発基盤
HTML5、JavaScript
でアプリ開発
セットアップ不要の
クラウド開発環境
UIフレームワーク
Onsen UI搭載
安心の日本語サポート
各種開発支援
ツールと連携

4. 4URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
⽇日本で最も普及しているアプリ開発基盤
18万人

5. 5URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
アプリ開発のニーズの変化
アプリビジネスから
事業のデジタル変⾰革を推進するアプリへ
デジタル変⾰革を
推進するアプリ
アプリビジネス

6. 6URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
マルチ
OS
技術者
不足
スピー
ド
開発
コスト
デジタル変⾰革を進める上での課題

7. 7URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
MonacaとMobileFirst PlatformそこでHTML5に注⽬目

8. 8URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
HTML５はクロスプラットフォーム

9. 9URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
HTML5はWeb標準技術

10. 10URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
MonacaとMobileFirst Platform機能制限は？
パフォーマンスは？

11. 11URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
CordovaでWebをモバイルアプリ化
ネイティブコード
HTML
コンテンツ
アプリ本体はHTML5で実装
ネイティブアプリ形式で配布
ハードウェア機能を利利⽤用可能
プラグインでネイティブ
機能を拡張

12. 12URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
プラグインでネイティブ機能拡張
https://cordova.apache.org/plugins/

13. 13URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
CordovaがCPTシェアNo.1
61%
35%
31%
18%
15%
13%
12%
9%
4%
3%
0% 10% 20% 30% 40% 50% 60% 70%
PhoneGap/Cordova
Xamarin
Unity
Qt
Adobe Air
Appcelerator
Corona
Marmelade
Codename One
Live Code
Using this tool Prioritize this tool

14. 14URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
便便利利なバックエンドツールとも連携
プッシュ通知など ビーコン管理

15. 15URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Onsen UI
• 様々なモバイルUIの部品を
iOSとAndroid向けに提供
• 端末のOSにあわせて自動的
にデザインを適用
• 同じソースコードでクロスプ
ラットフォームUIを実現
• Angular1・2、jQueryなど
各種フレームワークに対応
⾼高いUI/UXを表現するUIコンポーネント群

16. 16URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Web技術者がアプリ開発を担う世界

17. 17URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
MonacaとMobileFirst PlatformMonacaを活用した
デジタル変革事例

18. 18URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
MonacaとMobileFirst Platform顧客接点の変革

19. 19URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.

20. 20URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
機能は残⾼高確認のみで⾼高評価
• ユーザ⾏行行動を徹底的に分析
• 単機能に絞ることで銀⾏行行アプリでは
トップクラスのユーザー評価
• デビットカード利利⽤用
時のUX向上

21. 21URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
⽼老老舗企業が顧客とのコミュニケーション変⾰革

22. 22URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
独⾃自メッセージングアプリを開発
バイヤーと顧客とのコミュニケーションを円滑滑化
リリース後3ヶ⽉月で2,000万円の売上実現
開発者 1名

23. 23URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
MonacaとMobileFirst Platform製品の
デジタル変革

24. 24URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
タニタヘルスプラネット
• PCから手入力健康情報管理のWebサイトを運営
+

25. 25URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
タニタヘルスプラネット
• 体組成計連携の健康管理アプリを2ヶ月で開発
• BluetoothやNFCを使って自動取り込み
• 体組成計をクラウドサービスまで拡張

26. 26URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
JINS MEME SDK Plugin

27. 27URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
MonacaとMobileFirst Platform働き方の
デジタル改革

28. 28URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
アプリ開発内製化によるスピード開発

29. 29URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
Webシステムの知識識でローコストに業務⾰革新
短期間に3つのモバイルアプリをリリース
現場写真アップロード簡易易電話帳出勤簿
アプリ開発
完全内製化

30. 30URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
モバイルアプリ開発・運⽤用環境を構築
・DBサーバ、ファイルサーバ連携
・ユーザ認証
・アプリ利用ログ取得
アプリ配信
・アプリのデバイスへの配信
・デバイス管理
・モバイルアプリ開発（iOS, Android)
・スマホ実機での動作確認ツールMDM/MAM
ツール
アプリ開発
BYOD
mBaaS 社内DB

31. 31URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
モバイルによるNPOのデジタル変⾰革

32. 32URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
NPOフュージョン⻑⾧長池
• 152の公園管理業務
• メンテナンス状況の把握が課題

33. 33URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
スマートパークアイ導⼊入効果
• 公園整備作業の⽇日々の進捗管理理
• 紙の報告書作成作業を全廃
• 設備トラブル報告、希少植物報告など
新たな⽤用途展開
• システムの外販に成功
開発者1名

34. 34URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
MonacaとMobileFirst Platform今、連勝記録で話題

35. 35URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
開発
未経験者

36. 36URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
棋譜⼊入⼒力力のデジタル化
リアルタイムの対局中継を実現

37. 37URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
クロスプラットフォーム開発活⽤用ポイント
• Web標準技術を採⽤用することで既存の
開発チームでアプリ開発
（機能制限はほぼない）
• 少⼈人数の開発チームで短期間にアプリ
をリリース
• ビジネスラインからのニーズに応え、
顧客のUXや従業員の働き⽅方を変⾰革

38. 38URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
まずは無料料アカウントで！
https://ja.monaca.io/

39. 39URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
• Monaca⼊入⾨門編
• ⽇日時：6⽉月28⽇日（⽔水） 10:30〜～12:00
• 参加費：5,400円
• Onsen UI⼊入⾨門編
• ⽇日時：6⽉月28⽇日（⽔水） 14:00〜～16:00
• 参加費：5,400円

40. 40URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
40URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
全国約40社のMonaca開発パートナーが
アプリ開発のご支援をいたします

41. 41URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.
ご清聴ありがとうございました