Embed Size (px)
DESCRIPTION
昨年末に某社セミナーでお話しさせて頂いた資料です。
Citation preview
モバイルWebアプリケーションのこれまでとこれから
2013年12月13日TAKAOKA Daisuke
高岡大介
Work
• 外資系SIベンダーを経て研究所へ。• 現在はWeb技術研究開発・開発支援など• 講演、技術記事の執筆も
About me
twitter: @dsuketfacebook.com/dsuket
Inkpod Web Sencha Touchパーフェクトガイド
AITC CC研究部会エバンジェリストOrganizers
ピースミール・テクノロジー
1. モバイルWebアプリの今
2. モバイルWebアプリ開発
3. これからのモバイルWebアプリ
image: Tim Berners-Lee http://www.w3.org/2011/Talks/0222-saudi-tbl/
1.モバイルWebアプリの今
スマートフォンの普及
スマートフォン普及率
CIAJ 2013年度 携帯電話の利用実態調査
スマートフォン利用者の経年変化
スマートフォン所有者が半数近くに。
母数: 携帯端末利用者
G8スマートフォン普及率
「Our Mobile Planet」2013 Google
25%
年齢別普及率の推移
若年層ほど所有率、伸び率が高い
デバイス別インターネット利用率
2013.04 ニールセン スマートフォン・メディア利用実態調査レポート
PCは横ばいスマートフォンは2倍以上！
スマートフォンの利用状況
ブラウザ、アプリ共に、利用時間と頻度が増加。アプリにブラウザが取られている訳では無い。
2013.04 ニールセン スマートフォン・メディア利用実態調査レポート
スマートフォンとPCの違い
圧倒的にアプリ中心の使い方。総アクセス時間は多いが、1回あたりの利用時間は短い。（1回当たりPC 28分であるのに対し、スマートフォンは9分）
注) 専用サービスを利用するAndroidの利用状況を計測したもの。iOSは入っていない。
Android OS 利用者と
PC 利用者の月間一人あたりの利用時間
スマートフォン普及状況 まとめ
スマートフォン普及状況 まとめ
•携帯の約半分がスマートフォンになった。
スマートフォン普及状況 まとめ
•携帯の約半分がスマートフォンになった。•全国普及率は25％、24歳以下では過半数。
スマートフォン普及状況 まとめ
•携帯の約半分がスマートフォンになった。•全国普及率は25％、24歳以下では過半数。•他の先進国では 50％以上。
スマートフォン普及状況 まとめ
•携帯の約半分がスマートフォンになった。•全国普及率は25％、24歳以下では過半数。•他の先進国では 50％以上。•インターネットへのアクセスの1/3以上はスマートフォンから。
進撃のタブレット
タブレットの出荷台数
IDC - Press Release 26 Mar 2013
2013年、タブレット端末の出荷台数が、デスクトップ PC の出荷台数を初めて上回る見込み。2014年にはポータブルPCも上回る予想。
タブレット端末 所有率
タブレット端末の所有率 2013タブレット端末の所有率 2012
価格.comリサーチ: タブレット端末アンケート 2013タブレット端末の所有率（世代別）
1年で20％近くアップ。若年層ほど所有率が高い。
注）価格.comのユーザーを対象
タブレットの普及状況
タブレットの普及状況
•若年層はPCよりもタブレット
タブレットの普及状況
•若年層はPCよりもタブレット•特に新興国での普及がめざましい
タブレットの普及状況
•若年層はPCよりもタブレット•特に新興国での普及がめざましい•今後もさらに普及拡大
アプリの状況Native vs Web
アプリの数とDL数
両方合わせると1000億DL。AndroidがiOSを抜くのは近い。
総数 DL数iOS 90万（うちipad 37万）
（2013年6月）500億DL（2013年6月）
Android 80万（2013年8月）
480億DL（2013年5月）
ハイブリッドアプリ
2016年、企業向けモバイルアプリの半分がWebとネイティブのハイブリッドアプリに―米Gartner調べ
ハイブリッドアプリGartner Recommends a Hybrid Approach for Business-to-Employee Mobile Apps
Consumer/Enterprise Split in 2015
ハイブリッドアプリGartner Recommends a Hybrid Approach for Business-to-Employee Mobile Apps
Web20%
Hybrid40%
Native40%
Consumer
Consumer/Enterprise Split in 2015
ハイブリッドアプリGartner Recommends a Hybrid Approach for Business-to-Employee Mobile Apps
Web20%
Hybrid40%
Native40%
Consumer
Web30%
Hybrid60%
Native10%
Enterprise
Consumer/Enterprise Split in 2015
企業向けモバイルアプリ
国内企業向けスマートモバイルアプリケーション／スマートモバイルアプリケーション開発ソフトウェア市場、売上額予測：2012～2017年（出典：IDC Japan）
2012年の企業向けモバイルアプリケーション市場規模は、前年比44.7％増の100億6100万円と分析。2017年の売上規模は478億400万円で、2012年～2017年に年平均36.6％で成長すると予測する。一方、2012年の開発ソフトウェアの市場規模は前年比5.4％増の64億8100万円で、2017年には99億7500万円に達するとみる。2012～2017年は年平均9.0％で成長すると予想している。
企業向けモバイルアプリ市場は約100億円、年率36.6％で拡大の見込み
企業向けモバイルアプリ
国内企業向けスマートモバイルアプリケーション／スマートモバイルアプリケーション開発ソフトウェア市場、売上額予測：2012～2017年（出典：IDC Japan）
2012年の企業向けモバイルアプリケーション市場規模は、前年比44.7％増の100億6100万円と分析。2017年の売上規模は478億400万円で、2012年～2017年に年平均36.6％で成長すると予測する。一方、2012年の開発ソフトウェアの市場規模は前年比5.4％増の64億8100万円で、2017年には99億7500万円に達するとみる。2012～2017年は年平均9.0％で成長すると予想している。
企業向けモバイルアプリ市場は約100億円、年率36.6％で拡大の見込み
企業向けモバイルアプリ
国内企業向けスマートモバイルアプリケーション／スマートモバイルアプリケーション開発ソフトウェア市場、売上額予測：2012～2017年（出典：IDC Japan）
2012年の企業向けモバイルアプリケーション市場規模は、前年比44.7％増の100億6100万円と分析。2017年の売上規模は478億400万円で、2012年～2017年に年平均36.6％で成長すると予測する。一方、2012年の開発ソフトウェアの市場規模は前年比5.4％増の64億8100万円で、2017年には99億7500万円に達するとみる。2012～2017年は年平均9.0％で成長すると予想している。
企業向けモバイルアプリ市場は約100億円、年率36.6％で拡大の見込み
アプリの状況 まとめ
アプリの状況 まとめ
•アプリの数はまだまだ増加。
アプリの状況 まとめ
•アプリの数はまだまだ増加。•ハイブリッドアプリが増える。
アプリの状況 まとめ
•アプリの数はまだまだ増加。•ハイブリッドアプリが増える。•特に企業向けに導入が進む。BYOD
アプリの状況 まとめ
•アプリの数はまだまだ増加。•ハイブリッドアプリが増える。•特に企業向けに導入が進む。BYOD•2017年には市場規模500億円近く、その9割はHTML5化
第三勢力
HTML5をプラットフォームとした新しいOS、デバイスが台頭
Firefox OS
• Mozillaが開発しているスマホOS• HTML5アプリケーションがネイティブで動作。• ZTE Open が eBayで発売（$79.99）• 主に新興国向け。• 日本ではKDDIも参加を表明
Tizen
• サムスン等が主導する TizenプロジェクトのOS。• HTML5とネイティブの両方でアプリが作成可能。• Docomoから年内に発売？→ 来年に延期
モバイルWebの今 まとめ
モバイルWebの今 まとめ
•スマートフォン、タブレットはますます普及
モバイルWebの今 まとめ
•スマートフォン、タブレットはますます普及• HTML5ハイブリッドアプリ化が進む
モバイルWebの今 まとめ
•スマートフォン、タブレットはますます普及• HTML5ハイブリッドアプリ化が進む•Webをネイティブとしたプラットフォームが、新興国で広がる可能性あり
モバイルWebの今 まとめ
•スマートフォン、タブレットはますます普及• HTML5ハイブリッドアプリ化が進む•Webをネイティブとしたプラットフォームが、新興国で広がる可能性あり
モバイルWebの今 まとめ
•スマートフォン、タブレットはますます普及• HTML5ハイブリッドアプリ化が進む•Webをネイティブとしたプラットフォームが、新興国で広がる可能性あり
Webアプリ技術は必須！！
2. モバイルWebアプリ開発
モバイルWebアプリの特徴
•Webブラウザのみで実行•インストールレス•HTML5
モバイルWebアプリの種類
モバイルWebアプリの種類
•純粋ブラウザ型• 標準ブラウザで動くアプリ• インストール不要で手軽
モバイルWebアプリの種類
•純粋ブラウザ型• 標準ブラウザで動くアプリ• インストール不要で手軽•ハイブリッド型• App形式にラップ• デバイス機能にもアクセス可能• ストアにも出せる
Web AppNative App
Pros
Pros•マルチデバイス
Pros•マルチデバイス•Web技術であること
Pros•マルチデバイス•Web技術であること•リアルタイムアップデート
Pros•マルチデバイス•Web技術であること•リアルタイムアップデート• Storeに依存しない• 内容のアップデートが自由• 手数料 (30%) が不要
Cons
Cons• 端末間の差異が割とある
Cons• 端末間の差異が割とある• デバイス, OS機能(一部)が使えない
✴ カメラ、Bluetooth、バイブ、アドレス帳、カレンダー、通知などが使えない。
Cons• 端末間の差異が割とある• デバイス, OS機能(一部)が使えない
✴ カメラ、Bluetooth、バイブ、アドレス帳、カレンダー、通知などが使えない。
• パフォーマンスの問題✴ アクションゲームや3D、サウンドなどは苦手
Cons• 端末間の差異が割とある• デバイス, OS機能(一部)が使えない
✴ カメラ、Bluetooth、バイブ、アドレス帳、カレンダー、通知などが使えない。
• パフォーマンスの問題✴ アクションゲームや3D、サウンドなどは苦手
• マーケットがない✴ 課金やプロモーションの問題
HTML5の幻想
HTML5の幻想
マルチプラットフォーム• OS, デバイスの差が大• 個別端末対応は必要
HTML5の幻想
マルチプラットフォーム• OS, デバイスの差が大• 個別端末対応は必要開発者が多い• Webアプリを作れるのは小数• ネイティブアプリの方が多い
Webであるメリット
URL(URI)でリソースが指せるアプリ内Deep Link
すぐに体験
インデックス可能
アプリでも対応中
モバイルWebアプリ最近の課題
パフォーマンス問題は過去になりつつある
5 Myths About Mobile Web Performance
JavaScriptのパフォーマンスは急速に改善
ハード/ソフトが改善
アプリのパフォーマンスはJavaScriptのそれとはほとんど無関係
DOM操作、Canvas、SVGも急速に改善
訳: モバイルウェブパフォーマンスに関する５つの作り話( via: xenophy
How can HTML5 compete with Native?
1.Q2 Developer Economics survey (6,000 respondents, 2013).
2.30,000+ Android apps
3.qualitative interviews with 32 developers, industry experts and tool vendors.
4.Analysis and taxonomy of 42 HTML5 tools
In Japanease (via InfoQ)
HTML5の主な問題は一般的に信じられているパフォーマンスではなく、むしろプロファイルやデバッグのためのツール不足と確かなAPIの欠如
最近の課題 まとめ
普及期に入ってきた開発ツール・環境が重要
今後はプロセスやワークフローが必要
フレームワーク
沢山ある
フレームワークへの期待
これまで豊富なUI
簡単に作れる
クロスブラウザ
これからの期待
パフォーマンス
動作環境
統合開発環境
実質、2択
V/S
開発環境・ツール
世はまさにHTML5開発環境戦国時代
GoogleWeb Designer
Visual Studio 2013
Monaca
国産開発環境サービスツール自体もHTML5で実装
開発サポートTool & Tech
AltJS
CSS PreProcessor
JavaScript Framework
統合開発ツール群
DebuggerChrome Dev Tools
Safari Web Inspector
IE11Dev Tools
3.これからのモバイルWebアプリ
1~2年後のモバイルアプリ
•ユーザーはAppが好き•しばらくはハイブリッド化が進む•マーケット問題は解決するが、Store依存・更新の問題は残る。
PCの歴史を振り返る
PCの歴史を振り返る• 90年代• Windowsの登場により、PCが爆発的に普及。
• 個人作成のフリーソフト大流行。Vector、窓の杜、雑誌の付録
PCの歴史を振り返る• 90年代• Windowsの登場により、PCが爆発的に普及。
• 個人作成のフリーソフト大流行。Vector、窓の杜、雑誌の付録
• 2000年代前半 • 出荷数頭打ち。低価格化が進み総販売額はここをピークに減少。
• Google大躍進。
PCの歴史を振り返る• 90年代• Windowsの登場により、PCが爆発的に普及。
• 個人作成のフリーソフト大流行。Vector、窓の杜、雑誌の付録
• 2000年代前半 • 出荷数頭打ち。低価格化が進み総販売額はここをピークに減少。
• Google大躍進。
• 2000年代後半• ノートPCの割合が増加。ネットブックも流行。
• Gmail、Google Mapの開始。Web 2.0の時代。
• Webサービス、マッシュアップが流行。
PCアプリの今
PCアプリの今
• 個人作成のフリーソフト• ほとんど見なくなった• OS標準機能に取り込まれる• Webサービス（アプリ）が増えた
PCアプリの今
• 個人作成のフリーソフト• ほとんど見なくなった• OS標準機能に取り込まれる• Webサービス（アプリ）が増えた• PCアプリが無くなったわけではない• 複雑、高機能、パフォーマンスが求められるもの• 単独ではない。クラウド連携。
10年前のPC市場に似ている• インストール型アプリが流行。• アプリの機能がOSに取り込まれている。• モバイル向けWebアプリの台頭。• アプリマーケットがキー
1995-2000-2005今のモバイルアプリ
5年後のモバイルアプリ
NativeAppとWebAppの棲み分けが進む
•純粋WebAppの復権• Utilityや情報提示系はWeb化• ゲームもWeb化（3D、サウンドの問題も解決）•もちろんNativeAppも発展• ハイパフォーマンスなゲーム• 新しいデバイス、I/F、センサー
サーバーサイドを考える
BaaS (Backend as a Service)
•IaaS, PaaS, SaaS→ 今年は (m)BaaSの年
•サーバーは益々コモディティ化
http://www.appiaries.com/jp/baas/index.html
BaaS Market
0
2000
4000
6000
8000
2012 2017
PaaS BaaS億円
Gartner Says Worldwide Platform as a Service Revenue Is on Pace to Reach $1.2 Billion
Backend as a Service (BaaS) Market worth $7.7 Billion by 2017
2017年にはBaaS市場がPaaSより急成長
BaaS Players
Sencha Space
AWSも mBaaS参入！？
push通知
Social LoginS3のファイル操作
DynamoDBを操作
BaaS時代のアプリ•サーバーはJSONを返すAPI•クライアントはそれを組み合わせてサービスを提供
•NativeもWebAppも単なるView
いつか見た構図
Webサービスのリベンジ
Web Service Reloaded
Web Service Reloaded
• BasS Store の登場
Web Service Reloaded
• BasS Store の登場• API化が進むことで、疎結合なサービスAPIの連携
Web Service Reloaded
• BasS Store の登場• API化が進むことで、疎結合なサービスAPIの連携• セマンティックWeb悲願のサービス合成が実現？
今後のモバイルApp
クライアントは単なるビューへPCブラウザ, PC App、モバイルWeb, モバイルNative
デバイスやプラットフォームを越えたサービスの合成
View
階層的MVC
まとめ
まとめ
•高機能なものはNativeで
まとめ
•高機能なものはNativeで•それ以外はWebアプリ、またはハイブリッド化が進む。
まとめ
•高機能なものはNativeで•それ以外はWebアプリ、またはハイブリッド化が進む。
•さらにBaaSが進むと、NativeもWebも単なるビューへ。
Webサービス新時代へ！
ご静聴ありがとうございました
TAKAOKA Daisuke@dsuket
