モバイルWebアプリのこれまでとこれから

4,753 views

Published on

昨年末に某社セミナーでお話しさせて頂いた資料です。

Published in: Technology

モバイルWebアプリのこれまでとこれから

  1. 1. モバイルWeb アプリケーションの これまでとこれから 2013年12月13日 TAKAOKA Daisuke
  2. 2. About me 高岡大介 Work • • • 外資系SIベンダーを経て研究所へ。 現在はWeb技術研究開発・開発支援など twitter: @dsuket facebook.com/dsuket ピースミール・テクノロジー 講演、技術記事の執筆も Inkpod Web Sencha Touch パーフェクトガイド Organizers AITC CC研究部会 エバンジェリスト
  3. 3. 1. モバイルWebアプリの今 2. モバイルWebアプリ開発 3. これからのモバイルWebアプリ image: Tim Berners-Lee http://www.w3.org/2011/Talks/0222-saudi-tbl/
  4. 4. 1.モバイルWebアプリの今
  5. 5. スマートフォンの普及
  6. 6. スマートフォン普及率 母数: 携帯端末利用者 スマートフォン利用者の経年変化 スマートフォン所有者が半数近くに。 CIAJ 2013年度 携帯電話の利用実態調査
  7. 7. G8スマートフォン普及率 25% 「Our Mobile Planet」2013 Google
  8. 8. 年齢別普及率の推移 若年層ほど所有率、伸び率が高い
  9. 9. デバイス別インターネット利用率 2013.04 ニールセン スマートフォン・メディア利用実態調査レポート PCは横ばい スマートフォンは2倍以上!
  10. 10. スマートフォンの利用状況 2013.04 ニールセン スマートフォン・メディア利用実態調査レポート ブラウザ、アプリ共に、利用時間と頻度が増加。 アプリにブラウザが取られている訳では無い。
  11. 11. スマートフォンとPCの違い Android OS 利用者と PC 利用者の月間一人あたりの利用時間 圧倒的にアプリ中心の使い方。 総アクセス時間は多いが、1回あたりの利用時間は短い。 (1回当たりPC 28分であるのに対し、スマートフォンは9分) 注) 専用サービスを利用するAndroidの利用状況を計測したもの。iOSは入っていない。
  12. 12. スマートフォン普及状況 まとめ
  13. 13. スマートフォン普及状況 まとめ • 携帯の約半分がスマートフォンになった。
  14. 14. スマートフォン普及状況 まとめ • 携帯の約半分がスマートフォンになった。 • 全国普及率は25%、24歳以下では過半数。
  15. 15. スマートフォン普及状況 まとめ • 携帯の約半分がスマートフォンになった。 • 全国普及率は25%、24歳以下では過半数。 • 他の先進国では 50%以上。
  16. 16. スマートフォン普及状況 まとめ • 携帯の約半分がスマートフォンになった。 • 全国普及率は25%、24歳以下では過半数。 • 他の先進国では 50%以上。 • インターネットへのアクセスの1/3以上は スマートフォンから。
  17. 17. 進撃のタブレット
  18. 18. タブレットの出荷台数 2013年、タブレット端末の出荷台数が、デスクトップ PC の出荷台数を初めて上回る見込み。 2014年にはポータブルPCも上回る予想。 IDC - Press Release 26 Mar 2013
  19. 19. タブレット端末 所有率 タブレット端末の所有率 2012 タブレット端末の所有率 2013 1年で20%近くアップ。 若年層ほど所有率が高い。 注)価格.comのユーザーを対象 タブレット端末の所有率(世代別) 価格.comリサーチ: タブレット端末アンケート 2013
  20. 20. タブレットの普及状況
  21. 21. タブレットの普及状況 • 若年層はPCよりもタブレット
  22. 22. タブレットの普及状況 • 若年層はPCよりもタブレット • 特に新興国での普及がめざましい
  23. 23. タブレットの普及状況 • 若年層はPCよりもタブレット • 特に新興国での普及がめざましい • 今後もさらに普及拡大
  24. 24. アプリの状況 Native vs Web
  25. 25. アプリの数とDL数 総数 iOS Android 90万(うちipad 37万) DL数 500億DL (2013年6月) (2013年6月) 80万 480億DL (2013年8月) (2013年5月) 両方合わせると1000億DL。 AndroidがiOSを抜くのは近い。
  26. 26. ハイブリッドアプリ 2016年、企業向けモバイルアプリの半分がWebと ネイティブのハイブリッドアプリに ―米Gartner調べ
  27. 27. ハイブリッドアプリ Gartner Recommends a Hybrid Approach for Business-to-Employee Mobile Apps Consumer/Enterprise Split in 2015
  28. 28. ハイブリッドアプリ Gartner Recommends a Hybrid Approach for Business-to-Employee Mobile Apps Consumer Web 20% Native 40% Hybrid 40% Consumer/Enterprise Split in 2015
  29. 29. ハイブリッドアプリ Gartner Recommends a Hybrid Approach for Business-to-Employee Mobile Apps Consumer Web 20% Native 40% Enterprise Web 30% Hybrid 40% Native 10% Hybrid 60% Consumer/Enterprise Split in 2015
  30. 30. 企業向けモバイルアプリ 企業向けモバイルアプリ市場は約100億円、年率36.6%で拡大の見込み 2012年の企業向けモバイルアプリケーション市場規模は、前年比44.7%増の100億6100万円 と分析。2017年の売上規模は478億400万円で、2012年∼2017年に年平均36.6%で成長する と予測する。一方、2012年の開発ソフトウェアの市場規模は前年比5.4%増の64億8100万円 で、2017年には99億7500万円に達するとみる。2012∼2017年は年平均9.0%で成長すると 予想している。 国内企業向けスマートモバイルアプリケーション/スマートモバイルアプリケーション開発ソフトウェア市場、 売上額予測:2012∼2017年(出典:IDC Japan)
  31. 31. 企業向けモバイルアプリ 企業向けモバイルアプリ市場は約100億円、年率36.6%で拡大の見込み 2012年の企業向けモバイルアプリケーション市場規模は、前年比44.7%増の100億6100万円 と分析。2017年の売上規模は478億400万円で、2012年∼2017年に年平均36.6%で成長する と予測する。一方、2012年の開発ソフトウェアの市場規模は前年比5.4%増の64億8100万円 で、2017年には99億7500万円に達するとみる。2012∼2017年は年平均9.0%で成長すると 予想している。 国内企業向けスマートモバイルアプリケーション/スマートモバイルアプリケーション開発ソフトウェア市場、 売上額予測:2012∼2017年(出典:IDC Japan)
  32. 32. 企業向けモバイルアプリ 企業向けモバイルアプリ市場は約100億円、年率36.6%で拡大の見込み 2012年の企業向けモバイルアプリケーション市場規模は、前年比44.7%増の100億6100万円 と分析。2017年の売上規模は478億400万円で、2012年∼2017年に年平均36.6%で成長する と予測する。一方、2012年の開発ソフトウェアの市場規模は前年比5.4%増の64億8100万円 で、2017年には99億7500万円に達するとみる。2012∼2017年は年平均9.0%で成長すると 予想している。 国内企業向けスマートモバイルアプリケーション/スマートモバイルアプリケーション開発ソフトウェア市場、 売上額予測:2012∼2017年(出典:IDC Japan)
  33. 33. アプリの状況 まとめ
  34. 34. アプリの状況 まとめ • アプリの数はまだまだ増加。
  35. 35. アプリの状況 まとめ • アプリの数はまだまだ増加。 • ハイブリッドアプリが増える。
  36. 36. アプリの状況 まとめ • アプリの数はまだまだ増加。 • ハイブリッドアプリが増える。 • 特に企業向けに導入が進む。BYOD
  37. 37. アプリの状況 まとめ • アプリの数はまだまだ増加。 • ハイブリッドアプリが増える。 • 特に企業向けに導入が進む。BYOD • 2017年には市場規模500億円近く、 その9割はHTML5化
  38. 38. 第三勢力
  39. 39. HTML5をプラットフォームとした 新しいOS、デバイスが台頭
  40. 40. Firefox OS • Mozillaが開発しているスマホOS • HTML5アプリケーションがネイティブで動作。 • ZTE Open が eBayで発売($79.99) • 主に新興国向け。 • 日本ではKDDIも参加を表明
  41. 41. Tizen • サムスン等が主導する TizenプロジェクトのOS。 • HTML5とネイティブの両方でアプリが作成可能。 • Docomoから年内に発売?→ 来年に延期
  42. 42. モバイルWebの今 まとめ
  43. 43. モバイルWebの今 まとめ • スマートフォン、タブレットはますます普及
  44. 44. モバイルWebの今 まとめ • スマートフォン、タブレットはますます普及 • HTML5ハイブリッドアプリ化が進む
  45. 45. モバイルWebの今 まとめ • スマートフォン、タブレットはますます普及 • HTML5ハイブリッドアプリ化が進む • Webをネイティブとしたプラットフォーム が、新興国で広がる可能性あり
  46. 46. モバイルWebの今 まとめ • スマートフォン、タブレットはますます普及 • HTML5ハイブリッドアプリ化が進む • Webをネイティブとしたプラットフォーム が、新興国で広がる可能性あり
  47. 47. モバイルWebの今 まとめ • スマートフォン、タブレットはますます普及 • HTML5ハイブリッドアプリ化が進む • Webをネイティブとしたプラットフォーム が、新興国で広がる可能性あり Webアプリ技術は必須!!
  48. 48. 2. モバイルWebアプリ開発
  49. 49. モバイルWebアプリの特徴
  50. 50. • Webブラウザのみで実行 • インストールレス • HTML5
  51. 51. モバイルWebアプリの種類
  52. 52. モバイルWebアプリの種類 •純粋ブラウザ型 • 標準ブラウザで動くアプリ • インストール不要で手軽
  53. 53. モバイルWebアプリの種類 •純粋ブラウザ型 • 標準ブラウザで動くアプリ • インストール不要で手軽 • ハイブリッド型 • App形式にラップ • デバイス機能にもアクセス可能 • ストアにも出せる
  54. 54. Web App Native App
  55. 55. Pros
  56. 56. Pros • マルチデバイス
  57. 57. Pros • マルチデバイス • Web技術であること
  58. 58. Pros • マルチデバイス • Web技術であること • リアルタイムアップデート
  59. 59. Pros • マルチデバイス • Web技術であること • リアルタイムアップデート • Storeに依存しない • • 内容のアップデートが自由 手数料 (30%) が不要
  60. 60. Cons
  61. 61. Cons • 端末間の差異が割とある
  62. 62. Cons • 端末間の差異が割とある • デバイス, OS機能 が使えない (一部) ✴ カメラ、Bluetooth、バイブ、アドレス帳、カ レンダー、通知などが使えない。
  63. 63. Cons • 端末間の差異が割とある • デバイス, OS機能 が使えない (一部) ✴ カメラ、Bluetooth、バイブ、アドレス帳、カ レンダー、通知などが使えない。 • パフォーマンスの問題 ✴ アクションゲームや3D、サウンドなどは苦手
  64. 64. Cons • 端末間の差異が割とある • デバイス, OS機能 が使えない (一部) ✴ カメラ、Bluetooth、バイブ、アドレス帳、カ レンダー、通知などが使えない。 • パフォーマンスの問題 ✴ アクションゲームや3D、サウンドなどは苦手 • マーケットがない ✴ 課金やプロモーションの問題
  65. 65. HTML5の幻想
  66. 66. HTML5の幻想 マルチプラットフォーム • • OS, デバイスの差が大 個別端末対応は必要
  67. 67. HTML5の幻想 マルチプラットフォーム • • OS, デバイスの差が大 個別端末対応は必要 開発者が多い • • Webアプリを作れるのは小数 ネイティブアプリの方が多い
  68. 68. Webであるメリット URL(URI)でリソースが指せる アプリ内Deep Link すぐに体験 インデックス可能 アプリでも対応中
  69. 69. モバイルWebアプリ 最近の課題
  70. 70. パフォーマンス問題 は過去になりつつある
  71. 71. 5 Myths About Mobile Web Performance JavaScriptのパフォーマン スは急速に改善 ハード/ソフトが改善 アプリのパフォーマンスは JavaScriptのそれとはほと んど無関係 DOM操作、Canvas、 SVGも急速に改善 訳: モバイルウェブパフォーマンスに関する5つの作り話( via: xenophy
  72. 72. 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)
  73. 73. HTML5の主な問題は一般的に信じられているパフォー マンスではなく、むしろプロファイルやデバッ グのためのツール不足と確かなAPIの欠如
  74. 74. 最近の課題 まとめ 普及期に入ってきた 開発ツール・環境が重要 今後はプロセスやワークフローが必要
  75. 75. フレームワーク
  76. 76. 沢山ある
  77. 77. フレームワークへの期待 これまで 豊富なUI 簡単に作れる クロスブラウザ
  78. 78. これからの期待 パフォーマンス 動作環境 統合開発環境
  79. 79. 実質、2択 V/S
  80. 80. 開発環境・ツール
  81. 81. 世はまさに HTML5開発環境 戦国時代
  82. 82. Google Web Designer
  83. 83. Visual Studio 2013
  84. 84. Monaca 国産開発環境サービス ツール自体もHTML5で実装
  85. 85. 開発サポート Tool & Tech
  86. 86. AltJS
  87. 87. CSS PreProcessor
  88. 88. JavaScript Framework
  89. 89. 統合開発ツール群
  90. 90. Debugger Chrome Dev Tools Safari Web Inspector IE11 Dev Tools
  91. 91. 3.これからのモバイルWebアプリ
  92. 92. 1 2年後のモバイルアプリ • ユーザーはAppが好き • しばらくはハイブリッド化が進む • マーケット問題は解決するが、 Store依存・更新の問題は残る。
  93. 93. PCの歴史を振り返る
  94. 94. PCの歴史を振り返る • 90年代 • • Windowsの登場により、PCが爆発的に普及。 個人作成のフリーソフト大流行。Vector、窓の杜、雑誌の付録
  95. 95. PCの歴史を振り返る • 90年代 • • Windowsの登場により、PCが爆発的に普及。 個人作成のフリーソフト大流行。Vector、窓の杜、雑誌の付録 • 2000年代前半 • • 出荷数頭打ち。低価格化が進み総販売額はここをピークに減少。 Google大躍進。
  96. 96. PCの歴史を振り返る • 90年代 • • Windowsの登場により、PCが爆発的に普及。 個人作成のフリーソフト大流行。Vector、窓の杜、雑誌の付録 • 2000年代前半 • • 出荷数頭打ち。低価格化が進み総販売額はここをピークに減少。 Google大躍進。 • 2000年代後半 • • • ノートPCの割合が増加。ネットブックも流行。 Gmail、Google Mapの開始。Web 2.0の時代。 Webサービス、マッシュアップが流行。
  97. 97. PCアプリの今
  98. 98. PCアプリの今 • 個人作成のフリーソフト • ほとんど見なくなった • OS標準機能に取り込まれる • Webサービス(アプリ)が増えた
  99. 99. PCアプリの今 • 個人作成のフリーソフト • ほとんど見なくなった • OS標準機能に取り込まれる • Webサービス(アプリ)が増えた • PCアプリが無くなったわけではない • 複雑、高機能、パフォーマンスが求められるもの • 単独ではない。クラウド連携。
  100. 100. 今のモバイルアプリ 1995-2000-2005 10年前のPC市場に似ている • インストール型アプリが流行。 • アプリの機能がOSに取り込まれている。 • モバイル向けWebアプリの台頭。 • アプリマーケットがキー
  101. 101. 5年後のモバイルアプリ NativeAppとWebAppの棲み分けが進む • 純粋WebAppの復権 • • Utilityや情報提示系はWeb化 ゲームもWeb化(3D、サウンドの問題も解決) • もちろんNativeAppも発展 • • ハイパフォーマンスなゲーム 新しいデバイス、I/F、センサー
  102. 102. サーバーサイド を考える
  103. 103. BaaS (Backend as a Service) •IaaS, PaaS, SaaS → 今年は (m)BaaSの年 • サーバーは益々コモディティ化 http://www.appiaries.com/jp/baas/index.html
  104. 104. BaaS Market 億円 PaaS BaaS 8000 6000 4000 2000 0 2012 2017 2017年にはBaaS市場がPaaSより急成長 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
  105. 105. BaaS Players Sencha Space
  106. 106. AWSも mBaaS参入!? Social Login S3のファイル操作 DynamoDBを操作 push通知
  107. 107. BaaS時代のアプリ • サーバーはJSONを返すAPI • クライアントはそれを組み合わせて サービスを提供 • NativeもWebAppも単なるView
  108. 108. いつか見た構図
  109. 109. Webサービスのリベンジ
  110. 110. Web Service Reloaded
  111. 111. Web Service Reloaded • BasS Store の登場
  112. 112. Web Service Reloaded • BasS Store の登場 • API化が進むことで、疎結合なサービスAPIの連携
  113. 113. Web Service Reloaded • BasS Store の登場 • API化が進むことで、疎結合なサービスAPIの連携 • セマンティックWeb悲願のサービス合成が実現?
  114. 114. 今後のモバイルApp クライアントは単なる ビューへ PCブラウザ, PC App、 モバイルWeb, モバイル Native デバイスやプラットフ ォームを越えたサービ スの合成
  115. 115. 階層的MVC
  116. 116. まとめ
  117. 117. まとめ • 高機能なものはNativeで
  118. 118. まとめ • 高機能なものはNativeで • それ以外はWebアプリ、またはハイブ リッド化が進む。
  119. 119. まとめ • 高機能なものはNativeで • それ以外はWebアプリ、またはハイブ リッド化が進む。 • さらにBaaSが進むと、NativeもWeb も単なるビューへ。
  120. 120. Webサービス新時代へ!
  121. 121. ご静聴ありがとうございました TAKAOKA Daisuke @dsuket

×