2016年8月26日開催の「モバイルアプリ開発ソリューションセミナー」での講演資料です

1. Bringing More People To Apps
Monaca事例から学ぶ
HTML5モバイルアプリの活用ポイント
アシアル株式会社
塚田亮一

2. Bringing More People To Apps
本日のお話
1. まずはプロトタイピング！
2. サーバサイドはmBaaSで開発いらず！
肝心のアプリ開発はどうする？？？

3. Bringing More People To Apps
アシアル株式会社
会社概要
• 創業：2002年
• 資本金：1000万円
• 事業所：東京（本社）、サンフランシスコ
• 従業員数：約40名（8国籍）
事業内容
• 開発プラットフォーム事業：開発ツール、UIフレームワーク
• 開発支援事業：アプリ開発、サーバーサイド（PHP）開発
• 教育事業：トレーニング、執筆

4. Bringing More People To Apps
HTML5モバイルアプリ開発基
盤
Monaca
HTML5、JavaScript
でアプリ開発
セットアップ不要の
クラウド開発環境
UIフレームワーク
Onsen UI搭載
安心の日本語サポート

5. 日本で最も普及している
モバイルアプリ開発環境の一つ
15万人

6. Bringing More People To Apps
アプリビジネスから
ビジネスのためのアプリへ
企業向け
モバイルアプリ
消費者向け
モバイルアプリ

7. Bringing More People To Apps
モバイルアプリでビジネスを牽引
 マーケティングや業務システムのアプリ化
 アプリそのもので売上を得るものではない
 業務やクライアントの理解が重要な分野
 クロスプラットフォーム対応が必須
 消費者の端末でサービスは変えられない
 BYOD、プラットフォーム依存のリスク
 主役は事業部門
 市場環境の変化に対応する開発スピードが求められる

8. Bringing More People To Apps
アプリ開発に取り組む上での
課題
iOS/Androidでことなる開発言語
UIデザインへの高い要求
エンジニアが圧倒的に不足
厳しいコスト要求

9. Bringing More People To Apps
HTML5を活用した
Cross-Platform開発

10. Bringing More People To Apps
HTML5はモバイル開発No.1
出典: Developer Economics 2014 Q3
構築技術のなかで圧倒的に
高いマインドシェアを獲得

11. Bringing More People To Apps
Cordovaとは
ネイティブコード
HTML
コンテンツ
アプリ本体はHTML5で実装
ネイティブアプリ形式で配布
ハードウェア機能を利用可能
Pluginでネイティブ機能を拡張

12. Bringing More People To Apps
Cross Platformツールのシェア
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
Vision Mobile Analysis of Cross-Platform Development, July 2015

13. Bringing More People To Apps
ビジネス向けではCordova
ソリューションがリーダー
Source: Gartner (June 2016)

14. Bringing More People To Apps
でもこんなこと言ってる人
いましたね、、、
『HTML5に賭けたの
は失敗』
2012年にHTML5から
ネイティブ化へ

15. Bringing More People To Apps
HTML5ハイブリッドアプリ
が当時抱えていた課題
1. アプリに機能制限がでてしま
うのではないか？
2. アプリのパフォーマンスが低
いのではないか？

16. Bringing More People To Apps
PluginでネイティブAPI利用
Cordova公式
サイトで探す
自作する

17. Bringing More People To Apps
事例：タニタヘルスプラネット
• 体組成計連携の健康管理アプリを2ヶ月で開発
• Bluetoothを使って専用の体組成計からデータを自動
で受け取ることが可能

18. Bringing More People To Apps
端末の大幅な進化
初代Xperia Xperia Z 5
発売日: 2010年4月
Android 1.6 (後に2.1)
1GHz シングルコアCPU
384MBメモリー
ベンチマークスコア: 3361
発売日: 2016年6月
Android 6.0
2GHz クワッド(8)コアCPU
3GBメモリー
ベンチマークスコア: 52084
5年間で20倍もの
スピードアップ
WebviewのChronium化
Crosswalkの登場

19. Bringing More People To Apps
HTML５ハイブリッドアプリ向け
UIフレームワークの登場

20. Onsen UI
• OSに応じてUIを切り替え＋
CSSで簡単カスタマイズ
• ハイパフォーマンスなUIを実現
• JSフレームワークに非依存
• Apache License
▷ http://ja.onsen.io/

21. 完全なクロスプラットフォーム
を実現
• Web技術でiOSとAndroidのUIを同時に開発
• ページ遷移アニメーションやエフェクトもOS毎に最適化

22. 豊富なUIコンポーネント
を利用可能
• 各コンポーネントはタグで指定するだけで利用可能
• デザインのカスタマイズはCSSで

23. Bringing More People To Apps
事例：ジャパンネット銀行
残高確認アプリ
• Onsen UIでネイティブと遜色ないUIを実現
• アセット暗号化プラグインでソースコードを隠蔽

24. Webサービス・既存システムの
アプリ化事例

25. Bringing More People To Apps
事例：ニジボックス
レシポ！
• エンジニア1名実高数2週間程度でアプリを完成
• Monacaデバッガーを使ったユーザーテストでUI改善

26. Bringing More People To Apps
事例：長野銀行
NaganoBank Total Assist Book
• システム検討から導入までわずか10ヶ月
• 当初はiPadだが、将来を見据えた戦略
印刷機能は別アプリ化することでメンテコスト削減

27. LOBからの要求による
アプリ開発事例

28. Bringing More People To Apps
事例：プロルート丸光
• 老舗企業の営業部門主導のアプリ開発
• mBaaSを活用したビジネスチャットアプリ
• 構想から5ヶ月でサービスイン

29. アプリのテンプレート化事例

30. Bringing More People To Apps
事例：神戸デジタルラボ様
店舗誘導
お知らせ機能
店舗在庫確認
レビュー機能
行動分析
クラウド
（サービス共通基盤）
ポイント
カード
追加機能①
WEB
API
追加機能② 追加機能③スマホアプリ
アンケート
• セミオーダー型の店舗販促アプリをサービス展開
• 機能は組み合わせ、UIデザインは自由にカスタマイズ

31. Bringing More People To Apps
HTML5モバイルアプリ開発
活用ポイント
 iOS、Android同時開発
 既存のシステム資産の活用
 既存の開発チームでのアプリ開発
 UIフレームワークや開発支援ツールを有
効活用
ビジネスの変化に合わせた
スピード感あるアプリ開発を実現

32. Bringing More People To Apps
まずは初めて見ましょう！

33. Bringing More People To Apps
アプリ開発のご相談も
受付中

34. Bringing More People To Apps
ご清聴ありがとうございまし
た