Recommended
More Related Content
What's hot
What's hot (20)
Similar to 完全負け組なモバイルWebが、これから復活する(多分)
Similar to 完全負け組なモバイルWebが、これから復活する(多分) (20)
Recently uploaded
Recently uploaded (9)
完全負け組なモバイルWebが、これから復活する(多分)
- 1. 完全負け組なモバイルWebが • • • • • これから復活する(多分) 「The Next Generation Mobile Web(Google I/O 2015)」レポート 第58回HTML5とか勉強会 2015.6.13 Performance on RAIL Service Workers Push & Notification
- 3. モバイルWeb
- 5. なぜ、ダメダメ？
- 21. Googleはその答えを探っているようです The Next Generation Mobile Web Google I/O 2015
- 22. モバイルに適したWebを作るために 開発者が行うべき3つのこと Mobile UI モバイルに適したUISTEP.1 Mobile Lifetime モバイルに適したライフタイム STEP.2 Mobile Performance モバイルに適したパフォーマンス STEP.3 User Contents
- 25. アイコンをタップ時には モバイル専用のUIで起動させよう!! ほげほげ ふがふが ぴよぴよ ふーばー ぴよぴよ
- 26. どうやって!?
- 27. Web Application Manifest ・WebアプリでモバイルUIを 扱うためのWeb標準。 ・Apache Cordovaで慣らされ ManifoldJSでも使われる。 ・Chrome M39(2014.10)からは、 ホームスクリーン起動時にも利用可に!! http://www.w3.org/TR/appmanifest/
- 28. Add to Home Screen manifest.json ほげほげ ふがふが ぴよぴよ ふーばー index.html ・タイトル ・リンク先URL ・IconファイルURL ・UI制限 参照
- 29. index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="manifest" href="manifest.json"> <title>ぴよぴよ</title> ・・・ Chrome M39+
- 30. manifest.json Chrome M39+ { "name": "Manifest Sample", "icons": [ { "src": "launcher-icon-0-75x.png", "sizes": "36x36", "type": "image/png", "density": "0.75" }, ], "start_url": "index.html", "display": "standalone", "orientation": "landscape" } … ← iconファイルURL ← 開始URL ← ブラウザUIの有無 ← 縦/横の制限
- 31. index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="/icon.png"> <title>ぴよぴよ</title> ・・・ Chrome M31∼M38 (一昔前のやり方)
- 34. Notification Are The Next Platform. — Anish Acharya, TechCrunch これからのプラットフォームは 通知機能だ!!
- 37. どうやって!?
- 38. Service Workers
- 39. Service Workers バックグラウンドでイベントを受付けて 何かしらの処理を実行できるWeb標準。 http://www.w3.org/TR/service-workers/ Push API http://www.w3.org/TR/push-api/ プッシュサービスからのプッシュイベントを 受付けて、メッセージを読み込めるWeb標準。 Notifications API https://notifications.spec.whatwg.org/ モバイルの通知を実現するLiving Standard。 Permission APIの仕様が固まるとWeb標準になる?
- 40. プッシュ サービス ネットワーク push events ① clear push subscription ③ ぴよぴよ 5分前 【悲報】あなたがいつになってもAPI 22 を使ってくれないから、ドロイド君が グレてしまったようです。 通知画面 Service Workers ブラウザが閉じていても 裏で動いている show notification ②
- 44. When is performance ‘good enough’? When the user can’t perceive it. — Don Draper 十分なパフォーマンスとは ユーザがそれを意識しないことである
- 45. どうやって!?
- 46. ブラウザの中の人は モバイルWebを速くしようと戦っている!! Oil-pan Discardable memory TurboFan CSS Writer rewrite Slimming Paint Intelligent session restore DOM serialization Scheduler SaneScript SoundScript Fast line layout Ganesh Code caching Script Streaming Service Worker IndexedDB Optimization image-rendering:pixelated Media power reduction Animated GIF optimization Memory Coordinator Remove Animated GIF paint storm Unified BeginFrame Scheduling Threaded GPU Rasterization Partial Swap
- 48. RAIL R : Reaction, Response A : Animation I : Idle L : Load これでユーザは、ストレスフリーになれる!!
- 53. もっと詳しく!?
- 55. 最後に
- 56. モバイルWebの未来はダメダメじゃない 希望を持って生きようじゃないか!! 1. モバイルに適したUIを! Web Application Manifest/Add to Homescreen 2. モバイルに適したライフタイムを! ServiceWorkers/Notification/Push 3. モバイルに適したパフォーマンスを! Performance on RAIL
- 57. ほげほげ ふがふが ぴよぴよ ふーばー 入り口は ホームスクリーンから Service Workers Web サーバー Push サービス アセット (キャッシュ) ① メッセージ ②③ ④ 通知 HTMLアプリを 送っておく Push パフォーマンスはRAILで!! モバイルWebの未来はダメダメじゃない 希望を持って生きようじゃないか!!