1. いまさら聞けないHTML5概要
2015/7/4
HTML5カンファレンス鹿児島 2015
Toru Yoshikawa (@yoshikawa_t)

2. Who?
html5j 代表／html5j ビギナー部 副部⻑⾧長
Google Developer Experts (Chrome)
HTML5 Experts.jp エキスパートNo.3
Web先端技術味⾒見見部 (顧問)／⽇日本
jQuery Mobileユーザー会 (管理理⼈人)／
Sublime Text 2 Japan Users Group (管
理理⼈人)などなど
Blog: http://d.hatena.ne.jp/pikotea/
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t

3. HTML5とは？

4. HTML5とは？
1999年年に勧告された HTML4.01 の15年年ぶりのアップデート
スマートフォン、組み込み、家電、TV、カーナビ、デジタル
サイネージなど様々な業界から注目されている
2014年年10⽉月28⽇日に勧告（正式な仕様となった）
元々は、WHATWG の Web Applications 1.0 と Web
Forms 2.0という仕様が W3C に採⽤用されたもの

8. 広義のHTML5と
狭義のHTML5

10. https://platform.html5.org/
広義のHTML5=次世代Web標準

11. HTML5が解決する
これまでのWebの問題
ブラウザの互換性の問題
⽂文書の意味が不不明確
Webアプリとしての機能が不不⾜足している問題

12. HTML5が実現するもの
よりセマンティックな
コンテンツプラットフォーム
よりリッチな
アプリケーションプラットフォーム

13. ネイティブ
Flash
!
HTML4.01までのWeb
!
HTML

14. ネイティブ
これからのWeb
!
HTML5
CSS3
JavaScript

15. HTML5によってWebアプリの実現
可能な範囲が⼤大きく広がっている

16. 仕様の⼀一部を
ピックアップして紹介します

17. HTML5の大まかなカテゴリ
Semantics
Offline & Storage
Multimedia
3D, Graphics & Effects
Connectivity
Device Access
Performance & Integration
Styling (CSS3)

18. 仕様の一部を
ピックアップして紹介します
Semantics
Offline & Storage
Multimedia
3D, Graphics & Effects
Connectivity
Device Access
Performance & Integration
Styling (CSS3)

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

20. Offline & Storage
Demo
• HTML5 Terminal
• online/offline events

21. HTML5 Terminal
http://www.htmlfivewow.com/demos/terminal/terminal.html

22. online/offline events
http://html5-‐‑‒demos.appspot.com/static/navigator.onLine.html

23. 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）
*表記は実装が不完全または、実装古い可能性

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

25. Demo
• Blowing apart fragments of video
• Using WebSRT to create video captions
• HTML5 Wow Visualizer
• Soundtrap
Multimedia

26. Blowing apart fragments of video
http://craftymind.com/factory/html5video/CanvasVideo.html

27. HTML5 Wow Visualizer
http://www.htmlfivewow.com/demos/audio-‐‑‒visualizer/index.html

28. Soundtrap
https://www.soundtrap.com/

29. http://smus.com/ultrasonic-networking/
Web Audio API
ULTRASONIC NETWORKING ON THE WEB

30. 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）
*表記は実装が不完全または、実装古い可能性

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

32. Hello Racer
http://helloracer.com/webgl/

33. EVE online
http://www.eveonline.com/universe/spaceships/curse/

34. 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）
*表記は実装が不完全または、実装古い可能性

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

36. WebSocket
Browser Quest
http://browserquest.mozilla.org/

37. WebRTC(getUserMedia)
Webcam Toy
http://webcamtoy.com/ja/

38. WebRTC
WebRTC Chat on SkyWay
https://chat.skyway.io/

39. WebSocket
#slack
https://slack.com/

40. 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
Notifications
- 22
6
(-)
22
(4.4)
25
WebRTC
(P2P)
- 22 -
23
(4.4)
18
括弧の表記はモバイル（Safari " iOS、Chrome " Android）
*表記は実装が不完全または、実装古い可能性

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

42. Device Orientation
Google Gravity
http://mrdoob.com/projects/chromeexperiments/google-‐‑‒gravity/

43. Gamepad API
Doodle Pacman
https://www.google.com/doodles/30th-‐‑‒anniversary-‐‑‒of-‐‑‒pac-‐‑‒man

44. Web Speech API
https://www.google.com/intl/ja/chrome/demos/speech.html

45. 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）
*表記は実装が不完全または、実装古い可能性

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

47. border-‐‑‒radius
http://slides.html5rocks.com/#rounded-‐‑‒corners

48. 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）
*表記は実装が不完全または、実装古い可能性

49. ここで紹介した以外でも多くの仕様
があり、今も追加され続けています

50. 注目の最新仕様

51. 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/

52. 従来のサードパーティ製
コンポーネントを読み込む場合
…
<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を付けて作成する必要が
ある

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

54. Service Workers
オフラインWebアプリケーションのためのAppCacheに代わる
仕様（個別ファイルごとにキャッシュするかどうかをJavaScript
から制御できる）
Webアプリのローカルプロキシとして、バックグラウンドプロ
セスで動作する
Push APIで、ブラウザを⽴立立ち上げていなくても、サーバープッ
シュによる通知が可能
Background Syncでバックグラウンドでデータ同期
http://html5experts.jp/myakura/8365/

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

56. HTML5の広がり

57. モバイルにおけるHTML5

58. Firefox OS

59. ゲーム機におけるHTML5

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

61. テレビ／家電におけるHTML5
Opera TVSmartTV

62. Hybridcast

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

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

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

66. ハードウェア

67. Webの可能性は⼤大きく、
その世界は広がっている。

68. Dive Into Web!!

69. Thank you!!
( @yoshikawa_t )