産業技術大学院大学「IT特論（第4学期・正規科目）」で利用したスライドです。

1. 産業技術大学院大学「IT特論（第4学期・正規科目）」
HTML5から始まる技術革新
日本オープン・ウェブ・アソシエーション 理事
若狭 正生

2. 自己紹介
若狭 正生（わかさ
@wks
まさお）
• 日本オープン・ウェブ・アソシエーション
理事
• TV系メディア企業で仕事
• html5jスタッフ / html5j TV部 副部長 / OSGeo
財団日本支部 運営委員 / CodeForJapan コア
グループ所属 / アカデミーキャンプ スタッフ

3. バックグラウンド
• ISDN/ADSL時代に動画配信を行う企業など多数
渡り歩く
• Webページ関連のコンサルタントからサーバの
実際の導入、Webコンテンツの制作、Flash制作
やサーバサイドプログラミングなど幅広く活躍
• 他にコミュニティ活動を通じ、最先端の情報を
収集している
• 趣味は役に立たないくだらないものを作る

4. バックグラウンド
このヘルメットとか
作りました

5. 日本オープン・ウェブ・アソシエーション
• html5jの法人側の組織
• 毎月100人規模の勉強会を開催
• 11/30 に 2000人を10日間で集めてカン
ファレンスを開催
• W3Cや総務省とも連携

6. アジェンダ
• 前半
– HTML5の歴史/標準化について。
– HTML5の概要を説明。
– HTML5の機能をデモを踏まえて。
• 後半
– 通信技術の変革がおこる？
– 変わり続けるWeb技術
– 僕らが未来に対してできること。

7. ※注意
HTML5というカテゴリから、
ちょっとズレた話が含まれます

8. HTML5の歴史
2014年に正式勧告を目指している
実はまだ”正式”という形ではない
でも、ちまたではHTML5という単語が溢れ
実際にみなさんが触る事ができる技術
これは何なのだろうか？

9. Webのざっくりした歴史
ソフトウェア
Web技術
1974
TCP/IP
1989
ティム・バーナーズ=リーによって
WorldWideWebが提案
1991
WorldWideWeb
1999
Flash Player 4
2000
ActionScript 登場
2001
Internet Explorer 6
2004
Firefox 1
2005
ADSLの浸透
Google Maps
2007
Android / iOS 登場
2008
Google Chrome 1
Google Gears

10. HTML5の歴史
W3C
WHATWG
WWWに関わる標準化を推進
Apple,Mozilla,Opera,
Googleらベンダーによって設立
1997
HTML4.0 ドラフト
2000
XHTML1.0 ドラフト
2002
XHTML2.0 ドラフト
2004
HTML4の発展を提案→却下
WHATWGの設立
2007
HTML5の共同策定
2008
HTML5 ドラフト
2014
正式勧告(予定)

11. HTML5と標準化の道のり
2000年代にはいくつものWebの技術がブラウザに
プラグインという形で実装され、出ては消えてを
行い淘汰されていった。
ただ、リッチなコンテンツが出るにつれ、URLに
アクセスすればすべての情報が見れるというWeb
の最大の利点において、矛盾点が増して行く。

12. HTML5と標準化の道のり
しかし、Webの標準化団体であるW3Cはリッチな
コンテンツに関しては定義せず、XHTMLなどのセ
マンティックの方向性を目指していた。
これに危惧したブラウザベンダは現実に
そった内容に対して定義してほしいと提案
するが、
W3Cより却下される

13. HTML5と標準化の道のり
そして、ブラウザベンダーは独自でWHATWGとい
う団体を立ち上げ未来のWebはこうあるべきと検
討し、それを実装していくという行動にでる。
このときに定義していったものがのちの
HTML5
の原型になっていく。

14. HTML5と標準化の道のり
一方、W3C側は既存のWebを作り替えようと下位
互換性が無いXHTML2.0が失敗に終わっていく。
W3CはWHATWGと連携を図り、
HTML4の発展を共同で策定するという方向
に大きく方向転換

15. HTML5と標準化の道のり
1. 仕様を検討
2. ブラウザベンダーがベンダープレフィック
ス等をつけ先行実装
3. 仕様を詰める
4. 他のブラウザも実装する
5. 仕様として勧告
仕様が確定したころにはブラウザ実装は完了

16. HTML5と標準化の道のり
標準化される利点
• 仕様に準拠していればどのようなブラウ
ザや機器でも動作する
• 利用してる技術が突然使えなくなるなど
のリスクが少なくなるため、安心感から
実装が加速する

17. HTML5 概略
これまでのWebの問題点
• ブラウザの互換性の問題
– 10年も前の技術のIE6が幅をきかせていたり
• 文章の意味付けが不明確
– Tableをレイアウトとして・・など表現力が不足
のため、見た目とタグのちぐはぐが生まれる
• アプリとして機能不足
– ブラウザ内に保存するにはCookieくらいしかない
などサーバに依存しなければいけない

18. HTML5 概略
目指すもの
• よりセマンティックな
コンテンツプラットフォーム
• よりリッチな
アプリケーションプラットフォーム

19. HTML5によって変わる構造(前)
コンテンツ
Web技術
アプリ
ブラウザ
OS

20. HTML5によって変わる構造(後)
コンテンツ
Web技術
アプリ
ブラウザ
OS

21. HTML5の機能
Semantics
Offline & Storage
Multimedia
3D, Graphics & Effects
Connectivity
Device Access
Performance & Integration
Styling (CSS3)

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

23. Offline & Storage
https://drive.google.com/

24. Offline & Storage
http://html5-demos.appspot.com/static/navigator.onLine.html

25. Multimedia
•
•
•
•
video/audio … 動画/⽤
楽再⽤
WebVTT … 字幕・トラック情報を追加
Web Audio API … ⽤
声処理・合成
HTML Media Capture … メディアの取込
み

26. Multimedia
http://craftymind.com/factory/html5video/CanvasVideo.html

27. Multimedia
http://www.htmlfivewow.com/demos/audio-visualizer/index.html

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

29. Graphics, 3D & Effects
http://helloracer.com/webgl/

30. Graphics, 3D & Effects
http://www.eveonline.com/universe/spaceships/curse/

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

32. Realtime / Connectivity
http://chrome.com/maze/

33. Realtime / Connectivity
http://browserquest.mozilla.org/

34. Realtime / Connectivity
http://webcamtoy.com/ja/

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

36. Device Access
http://www.mrdoob.com/projects/chromeexperiments/google-gravity/

37. Device Access
https://www.google.com/intl/ja/chrome/demos/speech.html

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

39. Styling (CSS3)
http://slides.html5rocks.com/#rounded-corners

40. Styling (CSS3)
http://lea.verou.me/css3patterns/

41. 実装状況
ただし、すべての機能がすべてのブラウザ
で実装されてるとは限りません。
http://caniuse.com/

42. 前半まとめ
• HTML5は実装側からあがってきた現実と
未来の両輪を考えたものである
• 標準化されることでどの環境でも実行で
きるようになり、より使われるようにな
る
• 機能がかなり充実していっているが、現
時点では実装は確認しながら利用せざる
を得ない

43. アジェンダ
• 前半
– HTML5の歴史/標準化について。
– HTML5の概要を説明。
– HTML5の機能をデモを踏まえて。
• 後半
– 通信技術の変革がおこる？
– 変わり続けるWeb技術
– 僕らが未来に対してできること。

44. 通信技術に変革がおこる？
TCP/IPが考えられて40年近く経つが、未だ現役で
昔と変わらない使われ方をしている。Webが進化
しても基盤が古いままという矛盾。
ここまで構築されてしまったネットワーク
網には他のものを流すにはコストがかかる

45. 通信技術に変革がおこる？
• HTTP/1.1 とは？
Browser
Server
つないでいいですか？
いいですよ！
これください。
どうぞ！
届きました！！
では切ります。

46. 通信技術に変革がおこる？
• SPDY
– １回に１つではなく、１回のコネクション中に複
数データを入れることで、オーバーヘッドを削減
つないでいいですか？
いいですよ！
これとこれとこれと..
どうぞ！
届きました！！
では切ります。

47. 通信技術に変革がおこる？
• Websocket
– １回つないだらそれを切断せず使い続ける
– チャットのような双方向通信などに利用される
つないでいいですか？
いいですよ！
これどうぞ
これどうぞ
これどうぞ
これどうぞ
終わりました！
では切ります。

48. 通信技術に変革がおこる？
• WebRTC
– ブラウザ間でP2Pの通信ができる
Server
経由
Browser
Server
直接
Browser
Browser
Browser

49. 変わり続けるWeb技術
1991年にブラウザが出てきてから、ずっと
Web技術＝ブラウザ上でURLを叩いてアク
セスするもの
実は、Web技術は
いろんな所で使われ始めています。

50. アプリケーションとWeb技術
•
•
•
•
•
Windows8アプリ
ChromeApps
FirefoxOS
Tizen
スマートフォンアプリ(PhoneGap等)
and more..

51. アプリケーションとWeb技術
Windows8アプリ
参考 http://www.atmarkit.co.jp/fdotnet/special/ie10review01/ie10review01_01.html

52. アプリケーションとWeb技術
FirefoxOS
ネイティブアプリ(例えば
電話アプリ)でさえも
Web技術で作られている。

53. ゲーム機とWeb技術
• Nintendo Web Framework
• Unity ( WiiU & Playstation & Xbox )
and more..

54. ゲーム機とWeb技術
•
Nintendo Web Framework
参考 http://www.4gamer.net/games/032/G003263/20130328113/

55. カーナビとWeb技術
•
•
•
•
•
•
富士通テン
Tizen IVI
Genivi
Webinos
QNX
KDDI研究所
and more..

56. カーナビとWeb技術
富士通テン
参考 http://www.nikkan.co.jp/news/nkx0420131025beai.html

57. カーナビとWeb技術
Tizen IVI
参考 https://www.youtube.com/watch?v=HN2qL_meAek

58. テレビとWeb技術
• Hybridcast
• SmartTV
• OperaTV
and more..

59. テレビとWeb技術
Sony BRAVIA (Opera TV Store)
参考 http://www.sony-mea.com/TVP-LCD-TV/feature/Sony-Entertainment-Network/498176

60. テレビとWeb技術
Hybridcast
参考 http://html5experts.jp/yusuke-naka/2810/

61. 電子書籍とWeb技術
• Kindle Cloud Reader
• Kobo Cloud Reader

62. 電子書籍とWeb技術
Web技術が使えるデバイスとならば連動と利便
性を考え利用されている。
例：
PCで10ページまで見たら
スマートフォンで自動的に10ページから読める
（iOS等30%取られる課金システムを回避ためとも）

63. 遠隔操作とWeb技術
• LiveShell
• ガラポンTV
• ChromeCast

64. 遠隔操作とWeb技術
本体にはほぼ操作する部分が存在しない
リアルタイム通信をWebの標準技術の
WebsocketやWebRTCを用いて実装
-> UI部分は容易に作れるWeb画面を使う
-> スマートフォンなどの機器からも操作可能

65. 僕らが未来に対してできること。
ブラウザやWeb技術などは利用するだけで、も
う水のように提供され続けていくもの。
ブラウザを開発する、Web技術を
加速させるためには
実は僕らにできることが沢山あります。

66. 僕らが未来に対してできること。
• Working Group
W3Cが現在策定してる仕様の種がメーリ
ングリストでやりとりされています。誰
でも参加が可能です。

67. 僕らが未来に対してできること。
• Test the Web Forward
W3Cが策定したHTML5の仕様にブラウザ
が準じてるかのテストケースをみんなで
作る

68. 僕らが未来に対してできること。
• html5j 英語部
W3Cが策定したHTML5の仕様を翻訳し公
開していく

69. まとめ
• Web技術は常に進化を続けている
• ブラウザの枠を越えて、どんなものでも
実行できるようになってきている
• 提供されるものを利用するのではなく、
自分で仕様に参加できたり、貢献するこ
とができる

70. 最後に
ぜひ、Web技術に感心を持ってください！
プログラムが書けるとか、書けないは関係
なく、Webがこうなったらいいな。と心に
貯めていることは外に出して、色々な議論
に参加したりすることが容易です。
「自分が考えた事が未来を変えれる。」
それがWeb技術の根幹にあります。

71. Thanks
• @yoshikawa_t
http://www.slideshare.net/yoshikawa_t/html5-27598924
• @komasshu
https://www.youtube.com/watch?v=nXhEDC2qOLg