Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to これからのモバイルWebと最新動向
Similar to これからのモバイルWebと最新動向 (20)
More from yoshikawa_t
Recently uploaded
Recently uploaded (8)
これからのモバイルWebと最新動向
- 1. これからのモバイルWebと最新動向 2015/10/9 CEATEC Toru Yoshikawa (@yoshikawa_̲t)
- 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
- 7. http://flurrymobile.tumblr.com/post/115191864580/apps-solidify-leadership-six-years-into-the-mobile モバイルにおけるユーザーの 消費時間割合 ネイティブアプリ 86% モバイルWeb 14%
- 8. http://flurrymobile.tumblr.com/post/115191864580/apps-solidify-leadership-six-years-into-the-mobile モバイルにおけるユーザーの 消費時間内訳 ゲーム 32% ソーシャル 28% ブラウザ 14%
- 9. もっとも有名なニュース Facebook「HTML5に賭けたのは失敗」 TechCrunch Disrupt 2012, SF マーク・ザッカーバーグ⽒氏が「HTML5に賭けたのは失敗」と発⾔言し、同社 のアプリをネイティブに書き直した
- 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. ネイティブアプリの問題 ランキング外ではそもそも⽬目に触れる機会がない 宣伝・広告費の増⼤大 ブースト広告などに挙げられるランキング操作など プラットフォームに依存するリスク 審査などによるリジェクト リリースに時間が掛かる ⼿手数料料 利利⽤用率率率、離離脱率率率の問題
- 14. 3つの⼿手法 Deeplink/Universal Links App Indexing App Links
- 15. Deeplink/Universal Links 本来は、Webページのトップではなく、下層の他のページへのリンクのことを指す⾔言葉葉 アプリの⽂文脈では、アプリの中の個別のページへ直接遷移することを指す 例例えば、商品の広告があり、リンクをクリックするとアプリのトップではなく、直接ア プリの中の商品ページへ遷移するような動き アプリ TOP アプリ 商品検索索 アプリ 商品詳細・ 購⼊入
- 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. App Indexing アプリのコンテンツを検索索結果に表⽰示できる 検索索結果から直接アプリを起動できる 現在は同コンテンツのウェブサイトが必要
- 19. Webの良良い点を 取り込もうとする流流れ Webは、URIによってすべてのWebページが⼀一意 のアドレスを持ち、⾃自由に移動できる 同じように、アプリでもこれまでの閉じた箱庭の 中だけではなく、⾃自由に往来し連携できる世界に （In-‐‑‒App Browserのように逆に囲い込もうとす る流流れもあります）
- 20. モバイルWebの最新動向
- 21. Web VS ネイティブ 従来からWebが劣劣っていると⾔言われてい た3つのポイント UX（主にスピード／パフォーマンス） オフライン リエンゲージメント
- 23. Web VS ネイティブ 実際に⽐比べてみてください ネイティブ（左）、Web（右） ※いずれもホーム画⾯面にアイコンを追加
- 24. Webとネイティブの差は かなり縮まっている OS／ブラウザの最適化やハードウェアの進化に よって最新のデバイスであれば、既にネイティブ と⽐比べても遜⾊色がない 単純な表⽰示やスクロールなどはかなりスムーズ （細かいアクションや多くのアニメーションなど はもちろんネイティブ有利利）
- 25. ネイティブの良良い点を 取り込もうとする流流れ UX オフライン リエンゲージメント
- 26. UX ホーム画⾯面への追加 インストールバナーの表⽰示 フルスクリーン表⽰示（URLバーの⾮非表⽰示） その他テーマの適⽤用 http://googledevjp.blogspot.jp/2015/04/service-‐‑‒worker-‐‑‒google-‐‑‒developers-‐‑‒ summit.html http://www.w3.org/TR/appmanifest/ WebApp Manifest
- 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
- 32. Service Worker オフラインWebアプリケーションのためのAppCache に代わる仕様 Webアプリのローカルプロキシとして、バックグラウ ンドプロセスで動作する 個別ファイルごとにキャッシュするかどうかを JavaScriptから制御できる パワフルなAPIであるため、今のところhttps上でのみ 動作する
- 33. Service Workerの3つの機能 Offline Fetch APIとCache APIを持ち、HTTPリクエストをフッ クして任意のJavaScriptを実⾏行行できる Push Notification Push APIでサーバー側からのPush通信を受けとって通知 することができる Background Sync ネットワークに接続した際に動作してデータの同期を⾏行行う
- 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. Service Worker self.onfetch = function(e) { e.respondWidth( caches.match(e.request).then( function(response){ return response || fetch(e.request); })); }; ・sw.js HTTPリクエストをフックして、キャッシュにマッチする場合は キャッシュを返し、そうでない場合は通常通りリクエストする
- 39. Demo Google I/O 2015 https://events.google.com/io2015/ Push Demo https://simple-‐‑‒push-‐‑‒demo.appspot.com/
- 40. Service Workerの事例例 Google I/O 2015 Facebook Pinterest Medium
- 41. Service Workerの今後 Stream APIの追加 Service Workerの相互連携などについて議論論 etc…
- 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/
- 44. ハイブリッドアプリ AndroidのWebViewのレンダリングエンジンがChromium(Blink)化されて OS⾮非依存に Crosswalk CordovaにChromium(Blink/V8）を内蔵して、古いOSでも同じ挙動、最新 の機能を利利⽤用できるようになる React Native React.jsの⽂文法・構⽂文でネイティブアプリを作成できる Electron HTML/CSS/JavaScriptでデスクトップアプリが書ける
- 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. まとめ