これからのモバイルWebと最新動向

これからのモバイルWebと最新動向

1. 1. これからのモバイルWebと最新動向 2015/10/9   CEATEC   Toru  Yoshikawa  (@yoshikawa_̲t)
2. 2. Who? html5j  代表   Google  Developer  Experts  (Chrome)   HTML5  Experts.jp  副編集⻑⾧長兼エキスパー ト   html5j  ビギナー部（副部⻑⾧長）／Web先端 技術味⾒見見部  (顧問)／⽇日本jQuery  Mobile ユーザー会  (管理理⼈人)／Sublime  Text  2   Japan  Users  Group  (管理理⼈人)などなど   Blog:  http://d.hatena.ne.jp/pikotea/ 吉川  徹  /  Toru  Yoshikawa   @yoshikawa_̲t
3. 3. agenda モバイルアプリの隆盛・ネイティブシフト   モバイルWebの最新動向   ハイブリッドアプリとその他の動向   まとめ
4. 4. モバイルアプリ隆盛の時代   ネイティブシフト
5. 5. http://blog.appfigures.com/app-stores-growth-accelerates-in-2014/ アプリストアにおける   登録アプリの数
6. 6. http://blog.appfigures.com/app-stores-growth-accelerates-in-2014/ 登録アプリの増加率率率
7. 7. http://flurrymobile.tumblr.com/post/115191864580/apps-solidify-leadership-six-years-into-the-mobile モバイルにおけるユーザーの   消費時間割合 ネイティブアプリ  86%   モバイルWeb  14%
8. 8. http://flurrymobile.tumblr.com/post/115191864580/apps-solidify-leadership-six-years-into-the-mobile モバイルにおけるユーザーの   消費時間内訳 ゲーム  32%   ソーシャル  28%   ブラウザ  14%
9. 9. もっとも有名なニュース   Facebook「HTML5に賭けたのは失敗」 TechCrunch  Disrupt  2012,  SF   マーク・ザッカーバーグ⽒氏が「HTML5に賭けたのは失敗」と発⾔言し、同社 のアプリをネイティブに書き直した
10. 10. ゲーム業界では、ネイティ ブシフトの動きが顕著 グリー決算説明会 　ネイティブシフト断⾏行行…
 （http://gamebiz.jp/?p=133519）   【DeNA決算説明会】国内ゲーム事業はネイティブアプリ シフトがより鮮明に
 （http://gamebiz.jp/?p=143793）   サイバーエージェントがAmeba事業の⼤大改⾰革、⼈人員を半 減しネイティブアプリや⾳音楽ストリーミングなど新領領域に
 （http://jp.techcrunch.com/2014/07/24/ jp20140724cyberagent/）
11. 11. ランキング上位に⼊入らなければ儲からない   インストールしているアプリの平均  36   過去30⽇日に使⽤用したアプリの数  8   80%  のアプリが3⽇日で使われなくなる @andrewchen (http://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is- normal-and-that-the-best-apps-do-much-better/) Our Mobile Planet (https://think.withgoogle.com/mobileplanet/) ネイティブアプリは   ゼロサムゲーム
12. 12. ネイティブアプリの問題 ランキング外ではそもそも⽬目に触れる機会がない   宣伝・広告費の増⼤大   ブースト広告などに挙げられるランキング操作など   プラットフォームに依存するリスク   審査などによるリジェクト   リリースに時間が掛かる   ⼿手数料料   利利⽤用率率率、離離脱率率率の問題
13. 13. Webの良良い点を   取り込もうとする流流れ ランキング外ではそもそも⽬目に触れる機会がない
 ↓   Webからの検索索や、リンク等から辿れることで アプリへの導線をよりスムーズかつ、機会を増や し、より良良いアプリとのマッチングを⽬目指す
14. 14. 3つの⼿手法 Deeplink/Universal  Links   App  Indexing   App  Links
15. 15. Deeplink/Universal  Links 本来は、Webページのトップではなく、下層の他のページへのリンクのことを指す⾔言葉葉   アプリの⽂文脈では、アプリの中の個別のページへ直接遷移することを指す   例例えば、商品の広告があり、リンクをクリックするとアプリのトップではなく、直接ア プリの中の商品ページへ遷移するような動き アプリ   TOP アプリ   商品検索索 アプリ   商品詳細・ 購⼊入
16. 16. Deeplink/Universal  Links <activity android:name="com.example.android.GizmosActivity" android:label="@string/title_gizmos" > <intent-filter android:label="@string/filter_title_viewgizmos"> <action android:name="android.intent.action.VIEW" /> <!-- Accepts URIs that begin with "http://example.com/gizmos” --> <data android:scheme="http" android:host="example.com" android:pathPrefix="/gizmos" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> </intent-filter> </activity> https://developers.google.com/app-‐‑‒indexing/webmasters/app?hl=ja Android  マニフェスト  ファイル
17. 17. App  Indexing アプリのコンテンツを検索索結果に表⽰示できる   検索索結果から直接アプリを起動できる   現在は同コンテンツのウェブサイトが必要
18. 18. App  Links Facebookからのリンクに直接アプリを起動するための仕組み   Deeplinkを提供し、アプリ間の連携を促す
19. 19. Webの良良い点を   取り込もうとする流流れ Webは、URIによってすべてのWebページが⼀一意 のアドレスを持ち、⾃自由に移動できる   同じように、アプリでもこれまでの閉じた箱庭の 中だけではなく、⾃自由に往来し連携できる世界に   （In-‐‑‒App  Browserのように逆に囲い込もうとす る流流れもあります）
20. 20. モバイルWebの最新動向
21. 21. Web  VS  ネイティブ 従来からWebが劣劣っていると⾔言われてい た3つのポイント   UX（主にスピード／パフォーマンス）   オフライン   リエンゲージメント
22. 22. Webのスピード／パフォーマンスが 遅いというのはもはや過去の話
23. 23. Web  VS  ネイティブ
 実際に⽐比べてみてください ネイティブ（左）、Web（右）   ※いずれもホーム画⾯面にアイコンを追加
24. 24. Webとネイティブの差は   かなり縮まっている OS／ブラウザの最適化やハードウェアの進化に よって最新のデバイスであれば、既にネイティブ と⽐比べても遜⾊色がない   単純な表⽰示やスクロールなどはかなりスムーズ   （細かいアクションや多くのアニメーションなど はもちろんネイティブ有利利）
25. 25. ネイティブの良良い点を   取り込もうとする流流れ UX   オフライン   リエンゲージメント

26. 26. UX ホーム画⾯面への追加   インストールバナーの表⽰示   フルスクリーン表⽰示（URLバーの⾮非表⽰示）   その他テーマの適⽤用 http://googledevjp.blogspot.jp/2015/04/service-‐‑‒worker-‐‑‒google-‐‑‒developers-‐‑‒ summit.html http://www.w3.org/TR/appmanifest/ WebApp  Manifest
27. 27. WebApp  Manifest ホーム画⾯面への追加
28. 28. WebApp  Manifest フルスクリーン
29. 29. WebApp  Manifest インストールバナーの表⽰示
30. 30. WebApp  Manifest { "name": "Kinlan's Amazing Application ++", "short_name": "Kinlan's Amaze App", "icons": [ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone" } <link rel="manifest" href="/manifest.json"> index.html manifest.json
31. 31. オフライン,  リエンゲージメント オフラインで動作   プッシュ通知によるリエンゲージメント Service  Worker
32. 32. Service  Worker オフラインWebアプリケーションのためのAppCache に代わる仕様   Webアプリのローカルプロキシとして、バックグラウ ンドプロセスで動作する   個別ファイルごとにキャッシュするかどうかを JavaScriptから制御できる   パワフルなAPIであるため、今のところhttps上でのみ 動作する
33. 33. Service  Workerの3つの機能 Offline
    Fetch  APIとCache  APIを持ち、HTTPリクエストをフッ クして任意のJavaScriptを実⾏行行できる   Push  Notification
    Push  APIでサーバー側からのPush通信を受けとって通知 することができる   Background  Sync
    ネットワークに接続した際に動作してデータの同期を⾏行行う
34. 34. サーバー Webページ SWのアーキテクチャ   オンライン時 SW Cache HTTPリクエスト Background Sync でデータ同期 データをRW
35. 35. サーバー Webページ SWのアーキテクチャ   オフライン時 SW Cache データをRW Cacheからデータを 取得して返す
36. 36. Webページ SW サーバー SWのアーキテクチャ   SW⾮非対応ブラウザ Cache 本来のHTTPリクエスト のままで同じ
37. 37. Service  Worker if (navigator.serviceWorker) { navigator.serviceWorker.register( './sw.js', {scope: '.'} ).then(function() { return cache.addAll(['index.html', ...]); }, ... } ・サイトのJavaScript   Service  Workerとしてsw.jsを登録し、cache.addAllで最初の キャッシュを保存する
38. 38. Service  Worker self.onfetch = function(e) { e.respondWidth( caches.match(e.request).then( function(response){ return response || fetch(e.request); })); }; ・sw.js   HTTPリクエストをフックして、キャッシュにマッチする場合は キャッシュを返し、そうでない場合は通常通りリクエストする
39. 39. Demo Google  I/O  2015
 https://events.google.com/io2015/   Push  Demo
 https://simple-‐‑‒push-‐‑‒demo.appspot.com/
40. 40. Service  Workerの事例例 Google  I/O  2015   Facebook   Pinterest   Medium
41. 41. Service  Workerの今後 Stream  APIの追加   Service  Workerの相互連携などについて議論論   etc…
42. 42. Show  more… 「Service  Worker  で作る  最新モバイル  ウェブ  エクスペリエ ンス  -‐‑‒  Google  Developers  Summit  まとめ」
 http://googledevjp.blogspot.jp/2015/04/service-‐‑‒worker-‐‑‒ google-‐‑‒developers-‐‑‒summit.html   「Service  Workerとその周辺API  駆け⾜足紹介」
 http://www.slideshare.net/kinukox/service-‐‑‒workerapi   「【Service  Worker最前線】仕様策定の現場で何が議論論されて いるのか？」
 https://html5experts.jp/kinuko/16537/
43. 43. ハイブリッドアプリと   その他の動向
44. 44. ハイブリッドアプリ AndroidのWebViewのレンダリングエンジンがChromium(Blink)化されて OS⾮非依存に   Crosswalk
 CordovaにChromium(Blink/V8）を内蔵して、古いOSでも同じ挙動、最新 の機能を利利⽤用できるようになる   React  Native
 React.jsの⽂文法・構⽂文でネイティブアプリを作成できる   Electron
 HTML/CSS/JavaScriptでデスクトップアプリが書ける
45. 45. JavaScriptを⾼高速に動作さ せるための取り組み WebAssembly  /  asm.js
 どのWebブラウザでも実⾏行行可能なバイナリフォーマッ ト（他⾔言語をコンパイルして実⾏行行できるようにする）   SIMD.js
 JS上でベクトル演算を⾏行行うための仕様 http://inside.pixiv.net/entry/2015/07/28/230317 http://www.publickey1.jp/blog/15/webassembly.html
46. 46. まとめ
47. 47. まとめ ネイティブアプリも銀の弾丸ではない。様々な⽋欠 点もあり、それを埋めようとしている   モバイルWebもネイティブアプリの良良いところを 積極的に取り組んでおり、多くの点でお互いの差 は⼩小さくなっている
48. 48. ネイティブアプリとモバイル Webは⾞車車の両輪輪である
49. 49. ベストな選択は？ ネイティブアプリ？モバイルWeb？それともハイブ リッドアプリ？   お互いが共に違いを埋める形で進化しているのな ら、得⼿手不不得⼿手があるだけで、あとはよりコンテン ツに適したものを選ぶべき（ネイティブが流流⾏行行って いるからネイティブという選択はNG）   当たり前の答えと思うなかれ。何を選ぶのかはこれ からより難しく、重要になっていくのではないかと
50. 50. Thank  you!! (@yoshikawa_̲t)