Monacaセミナー資料

1. Bringing More People To Apps
Web標準技術で
iOS、Android両対応アプリを開発
〜Monacaのモバイルアプリスピード開発事例より〜
アシアル株式会社
塚田亮一

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

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

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

5. Bringing More People To Apps
企業戦略のコア
デジタルトランスフォーメーション
顧客接点
の変革
製品
の変革
ワークスタイル
の変革
ITの力で変革をもたらす

6. Bringing More People To Apps
アプリビジネスから
DX推進のためのアプリへ
DXを推進する
モバイルアプリ
アプリビジネス

7. Bringing More People To Apps
アプリ開発に取り組む上での
課題
モバイルエンジニアの不足
iOS/Androidでことなる開発言語
UI/UXへの高い要求
開発・メンテナンスの速度
既存の開発パートナーとのミスマッチ

8. Bringing More People To Apps
DX推進型のアプリ開発
プロジェクトへの要求
 iOS、Android、（Windows）対応必須
 市場変化に対応するスピーディーな開発
 既存システムと既存データの連携
 ビジネスラインや顧客からの要求の理解
アプリ開発専業企業とのミスマッチ

9. Bringing More People To Apps
アプリ開発
内製化
新しい
開発パートナー
の開拓

10. Bringing More People To Apps
新しい開発手法

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

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

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

14. 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

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

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

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

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. Monaca活用事例の紹介

24. 顧客接点の変革事例

25. Bringing More People To Apps
事例：ジャパンネット銀行
残高確認アプリ
• iOS、Androidをワンソースで開発
• Onsen UIでネイティブと遜色ないUIを実現

26. Bringing More People To Apps
他の銀行アプリと何が違うのか？

27. Bringing More People To Apps
機能は残高確認のみ！

28. Bringing More People To Apps
事例：テレビ朝日
みんながカメラマン
• 映像投稿サービス
• Webサイトのみで展開していたがアプリ要望対応後
投稿数が増加
• 局レポーターも利用

29. Bringing More People To Apps
事例：プロルート丸光
• 老舗企業の営業部門主導のアプリ開発
「海外のお客様に売れ筋情報を伝えたい」
• ビジネスチャットアプリを独自開発

30. Bringing More People To Apps
事例：プロルート丸光
• プロジェクト概要
• 体制：営業企画1名、開発者1名
• 期間：構想からリリースまで５ヶ月
• ポイント
• プロトタイプ開発から現場を巻き込む
• リリース後の利用が活発
• 効果
• 顧客とのやりとりが格段に向上
• アプリ経由の売上が開始3ヶ月で数千万円
• シャドーIT問題も解決

31. 製品変革事例

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

33. ワークスタイル変革事例

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

35. Bringing More People To Apps
事例：NPOフュージョン長池
• 3人の専属職員で152の公園管理業務
• メンテナンス状況の把握が課題

36. Bringing More People To Apps
事例：NPOフュージョン長池
• 造園職人向けに業務報告アプリを開発
• 地元のフリーランスエンジニアとの共同プ
ロジェクト
• 1年間かけて紙の報告書を全廃

37. その他スピード開発事例

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

39. Bringing More People To Apps
HTML5モバイルアプリ開発
活用ポイント
 iOS、Android同時開発
 既存のシステム資産の活用
 既存の開発チームでのアプリ開発
 UIフレームワークや開発支援ツールを有
効活用
アプリ内製化に有効な開発手法

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

41. Bringing More People To Apps
まずは体験してみましょう！

42. Bringing More People To Apps
11月14日
秋葉原UDXに集結

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