2014/12/12に開催されたCSAJセミナーでの講演資料です。 http://www.csaj.jp/seminar/2014/1212_seminar.html

1. HTML5開発最前線
2014/12/12
モバイルソリューション研究会
Toru Yoshikawa (@yoshikawa_t)

2. Who?
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t
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/

3. Agenda
広がる、つながるHTML5
注⽬目の最新仕様
モバイルの現状とこれからの課題
※ HTML5 = 次世代Web標準技術

4. HTML5 勧告

5. HTML5 勧告について
HTML5は、2014年年10⽉月28⽇日に勧告（正式な仕様として公
開）
しかしながら開発者にとってインパクトの⼤大きいものでは
なく、既に馴染んでいる仕様のスナップショットと捉えて
いる
世間的な認知、特許等の問題から対外的な説得⼒力力は増した
現在もHTML5.1及び次世代Web標準技術は、⽇日々新しい
仕様が追加され、検討されている

6. 広がる、つながるHTML5

7. デスクトップだけでなく様々な
デバイスに広がるHTML5
モバイル／ハイブリッドアプリ
電⼦子書籍リーダー
ゲーム機
テレビ／家電
デジタルサイネージ
⾃自動⾞車車

8. モバイルにおけるHTML5

9. Firefox OS

10. 電⼦子書籍リーダーにおけるHTML5

11. ゲーム機におけるHTML5

12. Unreal Engine 3を
HTML5に移植
Unreal Engine 3はC++で
記述されたゲームエンジン
わずか5⽇日で移植終了了
Emscripten
asm.js
http://www.youtube.com/watch?v=XsyogXtyU9o#t=24
http://www.4gamer.net/games/032/G003263/20130328081/

13. テレビ／家電におけるHTML5
SmartTV Opera TV

14. Hybridcast

15. Hybridcast
http://html5experts.jp/yusuke-naka/2810/

16. デジタルサイネージにおけるHTML5
HTML5のサイネージ（カヤック）

17. お台場のリアルスコープブースに
設置されたサイネージ
http://www.slideshare.net/hirumakazuya/html5-25625340

18. ⾃自動⾞車車におけるHTML5
富士通テン
QNX CAR
Tizen IVI

19. 様々なデバイスとつながる
HTML5

20. デバイスとつながる（API）
DAP (Device APIs Working Group)
Battery Status API
Network Information API
Ambient Light Events
Proximity Events
Vibration API
Menu API
Network Service Discovery
SysApps (System Applications Working Group)
Alarm API
Contacts API
Messaging API
Telephony API
Raw Sockets API
Bluetooth API
Browser API
Calendar API
Device Capabilities API
Idle API
Media Storage API
Network Interface API
Secure Elements API
System Settings API
WebApps (Web Applications Working Group)
Clipboard API and events
Fullscreen API
Input Method (IME) API
Pointer Lock API
Gamepad API

21. デバイスとつながる
（ハードウェア／コントローラー）
Open Web Board
Tessel
Espruino
Leap Motion
Kinect
Arduino
Intel PerC
Rasberry Pi
MYO
XBee
Ubi interactive

22. ロボット
「Romo」
http://www.romotive.jp/
「Double」
http://www.doublerobotics.com/

23. ULTRASONIC NETWORKING ON THE WEB
http://smus.com/ultrasonic-networking/

24. Network Service Discovery API
家庭内の機器をネットワークを通じて接続する
http://www.w3.org/TR/discovery-api/

25. WebRTC
Hello Chrome, itʼ’s Firefox calling!
https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/
http://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html

26. The Physical Web
http://google.github.io/physical-web/

27. HTML5はWebだけでなく、様々なデバイスの
アプリケーションプラットフォームとなりつつある。
また、そういったデバイスが⾝身近にあることで
Webの利利⽤用⽅方法も変化している。

28. 注目の最新仕様

29. WebRTC
WebRTC = Web Real-‐‑‒Time Communications
ブラウザ上でリアルタイムコミュニケーションを実現するための仕様
双⽅方向性のあるコミュニケーションを必要とする様々なアプリケー
ションを開発できる
ビデオ／⾳音声チャット
テキストの共同編集
ゲーム
etc...

30. WebSocketとWebRTC
WebSocketは、リアルタイムな双⽅方向通信を実
現する仕様
Ajaxのように単⽅方向、単⼀一データのやり取りでは
なく、⼀一度度コネクションを確⽴立立すれば⾃自由にデー
タをやり取りできる
WebSocketで既にリアルタイム双⽅方向通信は実
現しているが、WebRTCとの違いは何か？

31. WebSocket

32. WebRTC

33. WebSocketとの違い
WebRTCは、P2P通信を利利⽤用して端末間の相互接
続が可能
サーバーを経由しないため、⾼高速な通信ができる
WebRTCでは、データ通信⽅方式がUDPのため品質
よりもリアルタイム性を重視したデータに適して
いる（再送制御は可能なため、正確なデータ通信
ができないわけではない）

34. WebRTCの2つの仕様
「Media Capture and Streams（getUserMedia）」
ローカルのカメラやマイクからストリームデータを取得
する仕様
「WebRTC 1.0: Real-‐‑‒time Communication Between
Browsers」
主にP2P通信のための仕様が定義されている

35. Demo
http://webcamtoy.com/ja/

36. WebRTCの事例例
https://chat.skyway.io/
https://www.twilio.com/
http://plivo.com/
https://peercdn.com/

37. WebRTC(ORTC)の事例例
Skype for Web
http://blogs.skype.com/2014/11/14/please-welcome-skype-for-web-beta/

38. Web Components
Web上の個々のコンポーネントを
パーツ化して⾃自由に利利⽤用できるよ
うにする
Custom Elements、HTML
Imports、Templates、Shadow
DOMなどの4つの仕様を組み合わ
せた総称
Polymer/Material Design、x-‐‑‒tags
などのライブラリが既にある
http://html5experts.jp/series/
web-‐‑‒components-‐‑‒2/
http://webcomponents.org/

39. 従来のサードパーティ製
コンポーネントを読み込む場合
…
<link rel="stylesheet" src="xxx.css">
…
<div class="xxx">
<div class="xxx-yyy"></div>
<div class="xxx-yyy"></div>
</div class="xxx">
…
<script src="jquery.ui.xxx.js">
依存性を気にしながら様々なファイルを読み込む
ライブラリは名前が被らないようなclassを付けて作成する必要が
ある

40. WebComponents
…
<link rel="import" href="xxx.html">
!
…
<custom-xxx>…</custom-xxx>
HTML Importsで外部コンポーネントを読み込み
カスタムタグでコンポーネントを利利⽤用する

41. Polymer Design Tools
https://www.polymer-project.org/tools/designer/

42. Component Kitchen
http://component.kitchen/

43. 対応状況
Templates
HTML Import
Custom Elements
Shadow DOM

44. Service Workers
オフラインWebアプリケーションのためのAppCache
に代わる仕様
Webアプリのローカルプロキシとして、バックグラウ
ンドプロセスで動作する
個別ファイルごとにキャッシュするかどうかを
JavaScriptから制御できる
http://html5experts.jp/myakura/8365/

45. Service Workers
完全なオフラインアプリケーションにも、⼀一部キャッシュのみ
の利利⽤用も可能な柔軟でプログラマブルな仕様
⼀一部のデータをキャッシュから表⽰示して、後から差し替えると
いったことも可能
例例）⽊木曜⽇日になったらすべての画像を猫画像に差し替えるコード
this.addEventListener('fetch', function (event) {
if (event.request.context === 'image' &amp;&amp; new Date().getDay === 4) {
event.respondWith(
caches.match('/kitten.jpg');
)
}

46. 対応状況
実装中（一部仕様のみ実装済み）
https://jakearchibald.github.io/isserviceworkerready/

47. 主要な仕様の実装状況

48. Offline & Storage
• Application Cache … オフラインアプリケーション
• Web Storage … 簡易易ローカルストレージ
• Indexed Database … KVS型のローカルデータベース
• File APIs … ファイルの読み書き
• File System API … アプリから利利⽤用できるファイル領領
域
• online/offline events … オン/オフライン状態の把握

49. Offline & Storage
Application
Cache 10 3.5 4
(3.2)
4
(2.1) 10.6
Web Storage 8 3.5 4
(3.2)
4
(2.1) 10.5
Indexed Database 10* 10 7.1
(8*)
23
(4.4) 15
File APIs 10 3.6 6
(6.1)
13
(4.4) 11.1
File System API - - - 13
(4.4) 15
online/offline
events 9 3.5* 5
(4.3)
14
(2.3) 15
括弧の表記はモバイル（Safari $ iOS、Chrome $ Android）
*表記は実装が不完全または、実装古い可能性

50. Multimedia
• video/audio … 動画/⾳音楽再⽣生
• WebVTT … 字幕・トラック情報を追加
• Web Audio API … ⾳音声処理理・合成
• HTML Media Capture … メディアの取込み
（WebRTCのgetUserMediaへ移⾏行行しつつあります）

51. Multimedia
video 9 3.5 4
(3.2)
4
(2.3) 10.5
audio 9 3.5 4
(4.1)
4
(2.3) 10.5
WebVTT 10 31 6
(7.1)
18
(4.4) 15
Web Audio - 25 6
(6.1)
10
(4.4) 15
getUserMedia - 17 - 21
(4.4) 18
括弧の表記はモバイル（Safari $ iOS、Chrome $ Android）
*表記は実装が不完全または、実装古い可能性

52. Graphics, 3D & Effects
• Canvas … 2Dグラフィックス
• WebGL … 3Dグラフィックス
• SVG … ベクターグラフィックス

53. Graphics, 3D & Effects
Canvas 9 2 3.1
(3.2)
4
(3) 9.6
WebGL 11 4* 5.1*
(8)
18
(4.4) 12*
SVG 9 3 3.2
(3.2)
4
(4.4) 9.6
括弧の表記はモバイル（Safari $ iOS、Chrome $ Android）
*表記は実装が不完全または、実装古い可能性

54. Realtime / Connectivity
• WebSocket … リアルタイム双⽅方向通信
• Server-‐‑‒Sent Events … サーバープッシュ可能な通信（ロ
ングポーリング/Cometを仕様化）
• Web Messaging … Webページ間のメッセージ交換
• XMLHttpRequest(Level2) … クロスドメイン通信やバイ
ナリデータが送れるように
• Notifications … デスクトップに通知
• WebRTC … ⾳音声/動画でリアルタイムコミュニケーショ
ンを⾏行行う

55. Realtime / Connectivity
WebSocket 10 11 7
(6.1)
16
(4.4) 12.1
Server-Sent
Events - 6 5
(4.1)
6
(4.4) 11
Web Messaging
(Cross-document) 8* 3 4
(3.2)
4
(2.1) 9.6
XMLHttpRequest
(Level2) 10 4 5
(5.1)
7
(3) 12
Web
- 22 6
Notifications (-)
22
(4.4) 25
WebRTC
(P2P) - 22 - 23
(4.4) 18
括弧の表記はモバイル（Safari $ iOS、Chrome $ Android）
*表記は実装が不完全または、実装古い可能性

56. Device Access
• Geolocation API … GPS情報を取得
• Web Speech API… ⾳音声⼊入⼒力力
• Device Orientation …デバイスの向きや傾きを取得
• Contacts API … アドレス帳へのアクセス
• Calendar API … カレンダー情報の取得
• Battery Status API … バッテリーの状態を取得
• Network Information API … 通信環境の情報を取得
• USB, Bluetooth など

57. Device Access
Geolocation API 9 3.5 5
(3.2)
5
(2.1) 10.6
Web Speech API - - 7*
(7.1*)
31*
(4.4*) -
Device
Orientation 11 6 -
(4.3)
7
(3) 15
Battery Status
API - 10* - 38
(4.4) 25
Network
Information API - 12 - -
(2.2*) -
括弧の表記はモバイル（Safari $ iOS、Chrome $ Android）
*表記は実装が不完全または、実装古い可能性

58. Styling (CSS3)
• CSS3 Selectors … :first-‐‑‒child/:nth-‐‑‒child(odd)など、便便利利
な擬似クラスなどが増えた
• border-‐‑‒radius … ⾓角が丸く
• text-‐‑‒shadow/box-‐‑‒shadow … 影がつく
• gradient … グラデーション
• Webfonts … 外部フォントを扱えるように
• Transforms … 変形
• Transitions/Animations … CSSだけでアニメーションが可能

59. Styling (CSS3)
CSS3 selectors 9 3.5 3.2
(3.2)
4
(2.1) 9.6
CSS3 Border-radius 9 3 3.1
(3.2)
4
(2.1) 10.5
CSS Gradients 10 3.6 5.1
(5.1)
10
(4) 11.6
@font-face Web fonts 9 3.5 3.2
(4.3)
4
(4) 10.1
CSS3 Transforms 9 3.5 3.1
(3.2)
4
(2.1) 10.5
CSS3 Transitions 10 4 3.1
(3.2)
4
(2.1) 10.5
CSS3 Animation 10 5 4
(3.2)
4
(4) 12
括弧の表記はモバイル（Safari $ iOS、Chrome $ Android）
*表記は実装が不完全または、実装古い可能性

60. モバイルの現状と
これからの課題

61. モバイルの現状
2014年年の端末出荷台数は当然ながらPCに⽐比べて
モバイル（スマフォ＋タブレット）が8倍
（Gatner）
2017年年には、タブレット単体でPCの出荷台数を
抜く（Gatner）
インターネットトラフィックシェアは、2014年年7
⽉月を堺に逆転（Intelligent Positioning）

62. http://www.intelligentpositioning.com/blog/2014/01/mobile-and-tablet-traffic-set-to-overtake-desktop-by-mid-
2014/

63. ネイティブとHTML5
Facebookのザッカーバーグが「HTML5は時期尚早
だった」（http://www.publickey1.jp/blog/12/html5html5.html）
サイバーエージェントがネイティブアプリに注⼒力力
（http://jp.techcrunch.com/2014/07/24/jp20140724cyberagent/）
機能的にはアプリのほとんどは、HTML5での実装
が可能なものにも関わらずネイティブアプリが強い
モバイルアプリの隆盛とハイブリッドアプリの登場

64. Webアプリ（HTML5）に
⾜足りないものはなにか？

65. mobile vision

67. API
モバイルアプリ（Andorid、US）のうち、61% が
APIが⾜足りないためにネイティブアプリを選択して
いる
しかし、Power Management APIとWifi APIが実装
されていれば、そのうちの 21% はWebアプリを選
択する
ちょっとした⼀一部機能でAPIが⾜足りない状況

69. 最⼤大の問題は
Performance
既にデスクトップでは、⼗十分なパフォーマンスがある
モバイルはスマートフォンの1/5の性能である
ハードとブラウザの進化によって⽇日々パフォーマンス
は向上しているものの、まだまだ過渡期できちんとし
た作り込みが必要
パフォーマンスを向上して、ネイティブアプリに近づ
ける努⼒力力が必要

70. Google I/O 2014の
”Mobile Web performance auditing”を
中⼼心に参考になるTipsを紹介
!
同じセッションを題材にしたHTML5 Expert.jpの記事
http://html5experts.jp/furoshiki/8582/

71. パフォーマンスチューニング
2つの視点
Page Load … ページのローディング、表⽰示まで
のチューニング
Runtime … ページ中の動作を60fpsで実現する
ためのチューニング

72. Page Load
ページのローディング

73. Page Load
リソースの最適化
リクエスト数を抑える
リダイレクトを避ける
レンダリングの優先度度

74. リソースの最適化
Webサイトのサイズのうち63%は画像
画像を⼩小さくすれば多くの通信容量量を削減することができる
貧弱なモバイル回線ではとても重要
ツールを利利⽤用する
JPEG: jpegtran、jpegoptim
PNG: OptiPNG、PNGOUT
（私はMacでImageAlpha、ImageOptimを使ってます）
その他、JS、CSSファイルのminifyなど

75. リクエスト数を抑える
モバイル回線ではHTTPリクエストは⾮非常に⾼高コスト
電波状況にもよるが、1リクエスト増えたら200ms〜～
1000ms増えてもおかしくない
JS、CSSの結合など
画像の結合（CSS Sprite）
JS、CSS、画像の埋め込み（data URL）など

76. DNSプリフェッチ
<link rel="dnp-prefetch" href="example.com">
!
事前にDNS Lookupを済ませてキャッシュしておく
別ドメインへのアクセスがある場合は⾼高速化できる
かも（SNSボタン等）

77. リダイレクトを避ける
モバイルサイトへのリダイレクトなどを避ける
同⼀一のURLで複数のUAに対応したり、レスポンシブに
する

78. WebPageTest
http://www.webpagetest.org/

79. WebPageTestの結果

80. Page Load
Page Loadで重要なのは、ファーストビューが描
画されるまでの時間（画⾯面外のレンダリングや画
像の読込みなどは体感速度度には影響しない）
WebPageTestでは、「Speed Index」が良良い指
標になる

81. WebPageTestの結果
White screen Visually complete

82. Speed Index

83. Speed Index
なるべく早くページの大部分を表示するとスコアが高い

84. レンダリングの優先度度
レンダリングをブロックするリソースを取り除く
ファーストビューのリソースを再優先に
画像の遅延読込みなど（Lazy Loadなど）
スクロールしなければ表⽰示されない領領域は後回しに
プログレッシブJPEG、インターレースPNGを使う

85. Optimizing the Critical Rendering Path
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

86. Runtime
60Hz > 60fps > 16ms

87. Runtime
アニメーションにおいて過度度な装飾を抑える
requestAnimationFrameを使う
DOMアクセスの最適化
メモリの最適化（JavaScript）

88. PageSpeed Insight
http://developers.google.com/speed/pagespeed/insights/

90. ネイティブとの差を埋めて
よりよいHTML5ライフを

91. Thank you!!
( @yoshikawa_t )
!
Question?