Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
完全負け組なモバイルWebが
• • • • •
これから復活する(多分)
「The Next Generation Mobile Web(Google I/O 2015)」レポート
第58回HTML5とか勉強会
2015.6.13
Perfo...
ふろしき
モバイルWebばっかりエンジニア
・html5jパフォーマンス部
・日本Cordovaユーザー会
- 自己紹介 -
モバイルWeb
ダメダメ過ぎて
生きるのが辛い…
Java
Swift HTML5
なぜ、ダメダメ?
ダメダメな理由 - その1
ブックマークが役に立たない
デスクトップPC
ノートPC
個々のアプリの機能は大きく
一つで多くのユースケースのカバー
アプリ
ユース
ケース
ユース
ケース
ユース
ケース
デスクトップPC
ノートPC
ブラウザのブックマーク機能は
PC上のアプリの扱われ方と相性が良かった
ブラウザ
Web
サイト
Web
サイト
Web
サイト
モバイル
しかし、モバイルは
一つアプリ≒一つのユースケース
アプリ
アプリ
アプリ
ユース
ケース
ユース
ケース
ユース
ケース
≒
≒
≒
モバイル
ブラウザのブックマーク機能は
モバイルのアプリの使われ方と合わない
アプリ
ブラウザ
アプリ
Web
サイト
Web
サイト
Web
サイト
遠い…
遠い…
遠い…
ダメダメな理由 - その2
閉じられたら何もできない
PCは使う時だけ起動されていた
ブラウザも同じタイミングで起動された
デスクトップPC
ノートPC
作業中 作業無し
アプリ停止アプリ起動
PC停止PC起動
PCとその上のアプリは
ライフタイムが殆ど変わらなかった
デスクトップPC
ノートPC
作業中 作業無し
ブラウザ閉じるブラウザ開く
PC停止PC起動
モバイルは常に起動されユーザに寄り添い
アプリもまた、常時ユーザと寄り添う
モバイル
作業中 作業無し
アプリ起動
モバイル起動
作業復活
通知!
しかし、Webは閉じられたら何もできない
モバイルの使われ方とは合わない
作業中 作業無し
ブラウザ開く
モバイル起動
作業復活
ならず!!
ブラウザ閉じる
モバイル
ダメダメな理由 - その3
パフォーマンスが悪い
デスクトップPC
ノートPC
PCはハードウェアも通信リソースも潤沢
Webのオーバヘッドも吸収できる
モバイル
モバイルは省エネが求められ制限が多い
Webのオーバヘッドは時に邪魔になる
Webはモバイルに
向いていないというのか…
けど、けど我々はッ
Webという自由な世界で
人々にサービスを
提供し続けたい!!
Googleはその答えを探っているようです
The Next Generation Mobile Web
Google I/O 2015
モバイルに適したWebを作るために
開発者が行うべき3つのこと
Mobile UI
モバイルに適したUISTEP.1
Mobile Lifetime
モバイルに適したライフタイム
STEP.2
Mobile Performance
モバイルに適...
STEP.1
Mobile UI
モバイルに適したUIでWebを扱おう!!
ホームスクリーンへ
ランチャーアイコンを配置し
Web
Web
アプリ
アプリ
ほげほげ ふがふが ぴよぴよ ふーばー
アイコンをタップ時には
モバイル専用のUIで起動させよう!!
ほげほげ ふがふが ぴよぴよ ふーばー
ぴよぴよ
どうやって!?
Web Application Manifest
・WebアプリでモバイルUIを
 扱うためのWeb標準。
・Apache Cordovaで慣らされ
 ManifoldJSでも使われる。
・Chrome M39(2014.10)からは、
 ホー...
Add to Home Screen
manifest.json
ほげほげ ふがふが ぴよぴよ ふーばー
index.html
・タイトル
・リンク先URL
・IconファイルURL
・UI制限
参照
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-widt...
manifest.json
Chrome M39+
{
"name": "Manifest Sample",
"icons": [
{
"src": "launcher-icon-0-75x.png",
"sizes": "36x36",
"t...
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-widt...
https://developer.chrome.com/multidevice/android/installtohomescreen
STEP.2
Mobile Lifetime
Webをモバイルに適したライフタイムで動かそう!!
Notification Are
The Next Platform.
— Anish Acharya, TechCrunch
これからのプラットフォームは
通知機能だ!!
ブラウザが閉じられても
バックグラウンドで待機させて
ぴよぴよ
ほげほげ ふがふが ぴよぴよ ふーばー
何か起きた時に
ユーザへそれを通知しよう!!
ぴよぴよ 5分前
【悲報】あなたがいつになってもAPI 22
を使ってくれないから、ドロイド君が
グレてしまったようです。
どうやって!?
Service Workers
Service Workers
バックグラウンドでイベントを受付けて
何かしらの処理を実行できるWeb標準。
http://www.w3.org/TR/service-workers/
Push API
http://www.w3.org/TR...
プッシュ
サービス
ネットワーク
push
events
①
clear push
subscription
③
ぴよぴよ 5分前
【悲報】あなたがいつになってもAPI 22
を使ってくれないから、ドロイド君が
グレてしまったようです。
通知画...
https://developers.google.com/web/updates/2015/03/
push-notificatons-on-the-open-web
https://developers.google.com/web/updates/2015/03/
push-notificatons-on-the-open-web
時代はBackground Syncですね
ごめんなさい。
STEP.3
Mobile Performance
モバイルに適したパフォーマンスにチューンしよう!!
When is performance
‘good enough’?
When the user
can’t perceive it.
— Don Draper
十分なパフォーマンスとは
ユーザがそれを意識しないことである
どうやって!?
ブラウザの中の人は
モバイルWebを速くしようと戦っている!!
Oil-pan
Discardable memory
TurboFan
CSS Writer rewrite
Slimming Paint
Intelligent session ...
RAIL
開発者が実践すべきことは
Webのパフォーマンスモデル
RAIL
R : Reaction, Response
A : Animation
I : Idle
L : Load
これでユーザは、ストレスフリーになれる!!
R : Reactionは100ms未満で!
A : Animationは16.67ms未満で!
I : Idleは50ms未満で!
L : Loadは1,000ms未満で!
もっと詳しく!?
大好評連載中
http://gihyo.jp/dev/serial/01/web-rail
最後に
モバイルWebの未来はダメダメじゃない
希望を持って生きようじゃないか!!
1. モバイルに適したUIを!

Web Application Manifest/Add to Homescreen
2. モバイルに適したライフタイムを!

Ser...
ほげほげ ふがふが ぴよぴよ ふーばー
入り口は
ホームスクリーンから
Service
Workers
Web
サーバー
Push
サービス
アセット
(キャッシュ)
①
メッセージ ②③
④
通知
HTMLアプリを
送っておく
Push
パフ...
フラグメントの問題が
解決されたらね…
Googleさん
期待しています!!
Thank You!
ふろしき
 @_furoshiki
Upcoming SlideShare
Loading in …5
×

完全負け組なモバイルWebが、これから復活する(多分)

51,710 views

Published on

Googleさんならきっと、やってくれる(多分)

Published in: Technology
  • Be the first to comment

完全負け組なモバイルWebが、これから復活する(多分)

  1. 1. 完全負け組なモバイルWebが • • • • • これから復活する(多分) 「The Next Generation Mobile Web(Google I/O 2015)」レポート 第58回HTML5とか勉強会 2015.6.13 Performance on RAIL Service Workers Push & Notification
  2. 2. ふろしき モバイルWebばっかりエンジニア ・html5jパフォーマンス部 ・日本Cordovaユーザー会 - 自己紹介 -
  3. 3. モバイルWeb
  4. 4. ダメダメ過ぎて 生きるのが辛い… Java Swift HTML5
  5. 5. なぜ、ダメダメ?
  6. 6. ダメダメな理由 - その1 ブックマークが役に立たない
  7. 7. デスクトップPC ノートPC 個々のアプリの機能は大きく 一つで多くのユースケースのカバー アプリ ユース ケース ユース ケース ユース ケース
  8. 8. デスクトップPC ノートPC ブラウザのブックマーク機能は PC上のアプリの扱われ方と相性が良かった ブラウザ Web サイト Web サイト Web サイト
  9. 9. モバイル しかし、モバイルは 一つアプリ≒一つのユースケース アプリ アプリ アプリ ユース ケース ユース ケース ユース ケース ≒ ≒ ≒
  10. 10. モバイル ブラウザのブックマーク機能は モバイルのアプリの使われ方と合わない アプリ ブラウザ アプリ Web サイト Web サイト Web サイト 遠い… 遠い… 遠い…
  11. 11. ダメダメな理由 - その2 閉じられたら何もできない
  12. 12. PCは使う時だけ起動されていた ブラウザも同じタイミングで起動された デスクトップPC ノートPC 作業中 作業無し アプリ停止アプリ起動 PC停止PC起動
  13. 13. PCとその上のアプリは ライフタイムが殆ど変わらなかった デスクトップPC ノートPC 作業中 作業無し ブラウザ閉じるブラウザ開く PC停止PC起動
  14. 14. モバイルは常に起動されユーザに寄り添い アプリもまた、常時ユーザと寄り添う モバイル 作業中 作業無し アプリ起動 モバイル起動 作業復活 通知!
  15. 15. しかし、Webは閉じられたら何もできない モバイルの使われ方とは合わない 作業中 作業無し ブラウザ開く モバイル起動 作業復活 ならず!! ブラウザ閉じる モバイル
  16. 16. ダメダメな理由 - その3 パフォーマンスが悪い
  17. 17. デスクトップPC ノートPC PCはハードウェアも通信リソースも潤沢 Webのオーバヘッドも吸収できる
  18. 18. モバイル モバイルは省エネが求められ制限が多い Webのオーバヘッドは時に邪魔になる
  19. 19. Webはモバイルに 向いていないというのか… けど、けど我々はッ
  20. 20. Webという自由な世界で 人々にサービスを 提供し続けたい!!
  21. 21. Googleはその答えを探っているようです The Next Generation Mobile Web Google I/O 2015
  22. 22. モバイルに適したWebを作るために 開発者が行うべき3つのこと Mobile UI モバイルに適したUISTEP.1 Mobile Lifetime モバイルに適したライフタイム STEP.2 Mobile Performance モバイルに適したパフォーマンス STEP.3 User Contents
  23. 23. STEP.1 Mobile UI モバイルに適したUIでWebを扱おう!!
  24. 24. ホームスクリーンへ ランチャーアイコンを配置し Web Web アプリ アプリ ほげほげ ふがふが ぴよぴよ ふーばー
  25. 25. アイコンをタップ時には モバイル専用のUIで起動させよう!! ほげほげ ふがふが ぴよぴよ ふーばー ぴよぴよ
  26. 26. どうやって!?
  27. 27. Web Application Manifest ・WebアプリでモバイルUIを  扱うためのWeb標準。 ・Apache Cordovaで慣らされ  ManifoldJSでも使われる。 ・Chrome M39(2014.10)からは、  ホームスクリーン起動時にも利用可に!! http://www.w3.org/TR/appmanifest/
  28. 28. Add to Home Screen manifest.json ほげほげ ふがふが ぴよぴよ ふーばー index.html ・タイトル ・リンク先URL ・IconファイルURL ・UI制限 参照
  29. 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. 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. 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 (一昔前のやり方)
  32. 32. https://developer.chrome.com/multidevice/android/installtohomescreen
  33. 33. STEP.2 Mobile Lifetime Webをモバイルに適したライフタイムで動かそう!!
  34. 34. Notification Are The Next Platform. — Anish Acharya, TechCrunch これからのプラットフォームは 通知機能だ!!
  35. 35. ブラウザが閉じられても バックグラウンドで待機させて ぴよぴよ ほげほげ ふがふが ぴよぴよ ふーばー
  36. 36. 何か起きた時に ユーザへそれを通知しよう!! ぴよぴよ 5分前 【悲報】あなたがいつになってもAPI 22 を使ってくれないから、ドロイド君が グレてしまったようです。
  37. 37. どうやって!?
  38. 38. Service Workers
  39. 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. 40. プッシュ サービス ネットワーク push events ① clear push subscription ③ ぴよぴよ 5分前 【悲報】あなたがいつになってもAPI 22 を使ってくれないから、ドロイド君が グレてしまったようです。 通知画面 Service Workers ブラウザが閉じていても 裏で動いている show notification ②
  41. 41. https://developers.google.com/web/updates/2015/03/ push-notificatons-on-the-open-web
  42. 42. https://developers.google.com/web/updates/2015/03/ push-notificatons-on-the-open-web 時代はBackground Syncですね ごめんなさい。
  43. 43. STEP.3 Mobile Performance モバイルに適したパフォーマンスにチューンしよう!!
  44. 44. When is performance ‘good enough’? When the user can’t perceive it. — Don Draper 十分なパフォーマンスとは ユーザがそれを意識しないことである
  45. 45. どうやって!?
  46. 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
  47. 47. RAIL 開発者が実践すべきことは Webのパフォーマンスモデル
  48. 48. RAIL R : Reaction, Response A : Animation I : Idle L : Load これでユーザは、ストレスフリーになれる!!
  49. 49. R : Reactionは100ms未満で!
  50. 50. A : Animationは16.67ms未満で!
  51. 51. I : Idleは50ms未満で!
  52. 52. L : Loadは1,000ms未満で!
  53. 53. もっと詳しく!?
  54. 54. 大好評連載中 http://gihyo.jp/dev/serial/01/web-rail
  55. 55. 最後に
  56. 56. モバイルWebの未来はダメダメじゃない 希望を持って生きようじゃないか!! 1. モバイルに適したUIを!
 Web Application Manifest/Add to Homescreen 2. モバイルに適したライフタイムを!
 ServiceWorkers/Notification/Push 3. モバイルに適したパフォーマンスを!
 Performance on RAIL
  57. 57. ほげほげ ふがふが ぴよぴよ ふーばー 入り口は ホームスクリーンから Service Workers Web サーバー Push サービス アセット (キャッシュ) ① メッセージ ②③ ④ 通知 HTMLアプリを 送っておく Push パフォーマンスはRAILで!! モバイルWebの未来はダメダメじゃない 希望を持って生きようじゃないか!!
  58. 58. フラグメントの問題が 解決されたらね…
  59. 59. Googleさん 期待しています!!
  60. 60. Thank You! ふろしき  @_furoshiki

×