1. HTML5概説
2011.1.29 パンダの会 その参
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で標準化作業中
• Draft Last Call は 2011年5月を予定
• 勧告を待たず実装が進んでいる
• HTML5とその関連技術(API)の仕様群

7. HTML5の強化点
• WEBアプリケーション開発のプ
ラットフォーム
• セマンティックなマークアップ
• 高いアクセシビリティ
• 高い互換性

8. WEBアプリケーション開発のプラットフォーム
• 現在のWebアプリケーションは機能不足気
味... (サーバーサイド依存、Ajax etc.）
• よりリッチなWebアプリ(Rich Internet
Application)を開発するための新しいプラット
フォームの必要性
• Web開発に必要な機能を使いやすく実装
(JavaScript API)
• HTML5 + API + CSS3 = OpenWebPlatform

9. アプリケーションプラットフォームとし
て提供される機能の例
• マルチメディア再生コントロール（Video / Audio 要素）
• グラフィック描画（Canvas , inline SVG）
• オフライン動作（App cache）
• クライアントサイドデータストア（Web Strage, Indexed DB）
• インタラクティブ通信（Web Sockets, SSE, XHR Lv2 ...）
• バックグラウンド処理（Web Workers）
• ローカルファイルアクセス（File API）
• クライアントサイド・バリデーション（HTML Forms）

10. セマンティックなマークアップ
• Semantic Web
• ドキュメント上にあるデータの”意味”を明確
に定義
• 文章の構造、意味を正しく理解してマーク
アップする必要がある。
• セマンティックなマークアップによりHTMLの
Web上での活用範囲が広がる

11. 高いアクセシビリティ
• PC以外の様々なデバイスでも動作することに
配慮されている
ひとつのHTML5ドキュメントがPC、モバイル、スクリーンリーダーで適切に表示、読み上げ
られることが期待される
• HTML5 Formsによりクライアントサイドバリ
デーションが容易になる
• WCAG 2.0に配慮
• ルビ <ruby> の標準化

12. 高い互換性
• フォールバックコンテンツ
<video controls>
<source src=”movie.webm”>
<embed src=”flashmovie.swf” type=”application/x-shockwave-flash”></
embed>
</video>
• XML構文を使うことができる。XHTML1と互
換性がある。(XHTML5)

13. HTML5の勉強方法

14. 一番良い方法を
お教えしましょう！！

15. ググれ⃝ス

16. 仕様書を読む
http://www.w3.org/TR/html5/

17. ググる
• html5.jp
• いろんなニュースサイト／ブログ
• 個人的にはGoogleアラートが便利

18. 本を読む
• マークアップの場合
徹底解説HTML5マークアップガイド
• APIの場合
HTML5&API入門
Google Api Expertが解説するHTML5ガイドブック

19. HTML5(と関連仕様)で
Webはどう変わる？

20. こう変わると思う
• 本格的なWebアプリケーション時代の到来
• HTML5が動作する様々なデバイスの機能と
の連携が容易に
• より高度なSEOが可能となる
• Webでやりとりされるあらゆるデータの共
通フォーマットとしてのHTML

21. 本格的なWebアプリケーション時代の到来
アプリケーションの動作が要求される
様々なデバイスにHTML5ブラウザが実装
されるかも
(TV, Tablet, Sound Device etc)

22. HTML5が動作する様々なデバイスの機能と
の連携
Device要素, Capture API
Orientation API など
今後様々なデバイス機能とアクセスする
APIが策定されるかも

23. より高度なSEOが可能となる
• Webドキュメントの検索エンジンへの
最適化
• 検索エンジンのドキュメント解析精度
が向上

24. Webでやりとりされるあらゆるデータ
の共通フォーマット
• HTML5で機械処理しやすいデータとなる
それぞれの機械に適した形に変換することが可能
• 今までは用途に応じてRSS, Atom, JSONなど
を使い分ける必要があった

25. はっきりいって
もう書きはじめる時期

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