1. HTML5でできること。
そこからWebの未来を考える。
2010.9.18 オープンセミナー2010@香川
HTML5-WEST.jp 村岡 正和

2. 自己紹介
むらおか まさかず
村岡正和 @bathtimefish
【仕事】
神戸でITシステム開発/コンサルティングをやってます。
【活動】
HTML5-WEST.jp Co-Founder, 京都GTUG, CSS Nite in OSAKA, OSC
Kansai実行委員, 中国ニュースブログ「Shanghai Watch」運営
【好きなもの】
HTML5, Python, JavaScript, 中国拳法

3. HTML5-WEST.jp
http://html5-west.jp/

6. HTML5とは？
• HTMLの次のバージョン
• 現在W3Cで標準化作業中
• 正式勧告は2022年？
• 正式勧告を待たず実装が進んでいる
• 今までに比べて大幅な改良が施されている

7. HTML5の強化点
• 要素の刷新
新規追加される要素、なくなる要素
section, header, nav, footer, article ... frameset, applet, dir, center ...
• 様々なAPIの追加
ビデオ、オーディオコントロール、2D&3Dグラフィック制御、
オフライン動作、バックグラウンド処理、双方向通信...
• ユニバーサル・アクセス
様々なデバイスで利用されることが考慮されている。
障がい者対応などWebアクセシビリティにも配慮されている。
できるだけ簡単な記述で強力な機能を使えるよう設計されている。

8. アクセシビリティ

9. アクセシビリティに関するWebの未来と
HTML5の取り組みについて考えてみた

10. アクセシビリティに関するWebの未来と
HTML5の取り組みについて考えてみた
今日は２点ご紹介します。

11. Semantic Web

12. Semantic Web
machine-readable

13. Semantic Web
• Webの利便性を向上させるための取り
組み。
• Webコンテンツにメタデータを付加す
ることでコンピュータが効率よくデー
タを処理できるようにする。

14. HTML5

15. コンテンツ・モデル
http://www.html5.jp/tag/models/index.html

16. Example
• セクショニング・コンテンツ
article, aside, nav, section
• ヘッディング・コンテンツ
h1, h2, h3, h4, h5, h6, hgroup
• フレージング・コンテンツ
abbr, cite, code, small, ruby ...
• フロー・コンテンツ
header, footer ...

17. nav
article
nav
nav article
aside
aside
header
article

18. nav
article
nav
nav article
aside
aside
header
article

19. nav
article
nav
nav article
aside
aside
header
article

20. Microdata
<div itemscope>
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>
http://www.w3.org/TR/html5/microdata.html

21. custom data attribute
<div id='sunflower' data-leaves='47' data-plant-height='2.4m'></div>
<script>
var plant = document.getElementById('sunflower');
var leaves = plant.dataset.leaves; // leaves = 47;
var tallness = plant.dataset.plantHeight; // 'plant-height' -> 'plantHeight'
plant.dataset.plantHeight = '3.6m'; // Cracking fertiliser
</script>
http://www.w3.org/TR/html5/elements.html#custom-data-attribute

22. machine-readable
• 機械がWebコンテンツの内容を理解する。
• データ解析の精度向上、自動化。

23. One Web

24. One Web
multi-device one source

25. HTML Device
<p>To start chatting, select a video camera:
<device type=media onchange="update(this.data)">
</p>
<video autoplay></video>
<script>
function update(stream) {
document.getElementsByTagName('video')[0].src = stream.url;
}
</script>
http://dev.w3.org/html5/html-device/

26. Ericsson’s Demo
https://labs.ericsson.com/blog/beyond-html5-implementing-device-and-stream-management-webkit

27. Web
PC
Mobile

28. Consumer
electronic Sensor
Home
control
Web
Future Device
PC
Mobile

29. W3C Web on TV

30. Future of the Web.

31. Point. 1
Accessible & Automatic

32. Point. 2
Ubiquitous Web

33. あなたは何をしますか？

34. ご清聴ありがとうございました。