Chrome+HTML5 Conference

1. HTML5/Web標準オーバービュー ver. 2011年8月15日 W3C/Keio 慶應義塾大学大学院特任助教深見嘉明 @rhys_no1 Chrome+HTML5 Conference 〜第20回記念HTML5とか勉強会スペシャル〜

3. http://bit.ly/toka20

4. HTML5/Web標準オーバービューについてのアンケート

5. http://bit.ly/toka20-A1

6. Twitter（実況中継用にお使いください）

7. #html5j

8. Facebookページ（質問用にお使いください）

10. HTML5,,,,,

11. HTML5! http://www.w3.org/TR/html5/

12. HTML5を少し細かく見てみる HyperText Markup Language (Ver. 5) (C) 2011 慶應義塾大学SFC研究所 次世代Web応用技術・ラボ 5

13. そもそもHTMLとは サイトA ウェブサイトを構成するを作成するための規格 ハイパーリンク ハイパーリンク付き文章ファイル サイトB

14. HTMLの歴史 HTML 1989年 SGML->XML IEFT標準化 HTML2 XHTML1.0 1994年 2000年 携帯端末 2000年 モジュール化 XHTML Basic HTML3 XHTML1.1 1995年 2001年 XMLらしく 拡大機能集約 XHTML2.0 HTML3.2 1997年 IBMを中心に、イントラネットやDB用向けとして推進中。 ※XHTML2.0は、厳密な仕様化により、古いHTMLコンテンツも許容するブラウザを提供すること難しく、Public用のブザウザでは実装されていない。 正しいHTML HTML4 1997年 1999年 HTML4.01 2007年開始 HTML5 目的：Web利用の容易化と拡張性の向上 Public 向けとして仕様化推進中。MS，Opera, Mozila, Google, Appleなどが中心に推進。2010年１0月にDraft、2012年にCRを目指す。

15. HTML5の正式な定義 W3Cで策定している HTML4.01 XHTML1.0 DOM2 HTML の次期バージョン

16. HTML5の由来 WHATWGによる提案 Web Applications 1.0 Web Forms 2.0 アプリケーションの実行環境としてのWebを実現

17. HTML5 ウェブサイト記述のためのマークアップ規則 マシンリーダビリティの向上（HTML5はXHTMLの後継でもある） 表現の幅を拡大 API仕様群 Webをアプリケーションの実行環境に進化させる技術

18. HTML5,,,,,

19. 新世代ウェブの構成要素 HTML5 CSS3 JavaScript WebGL (C) 2011 慶應義塾大学SFC研究所 次世代Web応用技術・ラボ 12

20. 広義のHTML5 ウェブアプリケーションの動作環境 リッチコンテンツの取扱が容易に デバイスとの連携に用いられる多様なAPI 多様な端末（モバイル、そして、、、、）に適したUIの実現 (C) 2011 慶應義塾大学SFC研究所 次世代Web応用技術・ラボ 13

21. HTML5! http://www.w3.org/TR/html5/

23. ウェブ標準を作っている場所 World Wide Web Consortium

24. HTML5! http://www.w3.org/TR/html5/

25. HTML5!,,,,,!?

26. というわけで、 フルスペックの HTML5が 使える環境は ありません

27. なぜなら 現在策定中の 規格だから

28. 仕様策定プロセス 特徴： 1, 実装主義 2, Consensus方式 3, Director判断 Recommendation 勧告 Directorの判断 Proposed Recommendation ACによる投票 Candidate Recommendation 実装例を待つ Last Call Working Draft 他のグループとの 整合性を取る Working Draft Coordination Group Interest Group Working Group Incubator Group

29. では、今日 学べることは 何なのか？

30. 仕様策定プロセス 特徴： 1, 実装主義 2, Consensus方式 3, Director判断 Recommendation 勧告 Directorの判断 Proposed Recommendation ACによる投票 Candidate Recommendation 実装例を待つ Last Call Working Draft 他のグループとの 整合性を取る Working Draft Coordination Group Interest Group Working Group Incubator Group

34. 標準が必要な理由 同じ仕様（データフォーマット、プロトコル…………）を使わないと、互いにデータをやり取りできない 共通して用いられる仕様がないと、状況（ネットワーク環境、ハードウェア、ソフトウェア）が異なると、同じようにコンテンツが使えない ブラウザ戦争

35. キーワード ネットワーク外部性

36. 身近な例

37. メカニズム みんなが使う その仕様を採用する

38. ウェブ標準とは？ Loyalty Free/ Open Usage Open Process One Web, One Network 設計書であり、ルールでもある 策定中、だけど実装済み 強制力なし、でも実効力がある

39. ポイント 実装主義だから、みんなが使う仕様が標準になっていく。 既に広く使われている仕様＝勧告になる可能性が高い ポイントを抑えることが大切

40. 後編：HTML5のAPIが 実現すること

41. よりセマンティックな コンテンツ プラットフォーム + よりリッチな アプリケーション プラットフォーム HTML5=

43. セクション要素（section/article/aside/nav...）

44. その他の新要素（header/footer/time/command...）

45. 既存要素の意味も変化（strong/small/b/i/address/menu...）

46. HTML5 Formsで、よりセマンティックかつリッチな入力フォームが実現する

51. デバイスの機能をフル活用できるようになる。

52. より高速で自由度の高いネットワーク処理が可能になる。

53. マルチメディアを自由自在に操れるようになる。

55. Web Storage・・・簡単に利用出来るストレージAPI

56. Indexed Database API・・・ブラウザ組み込みのKVS

58. Calendar API・・・カレンダーへのアクセス

59. Media Capture・・・メディアデータの取り込み

60. Messaging API・・・SMS/MMS/E-mailの送信

61. Battery Status API・・・バッテリー状態へのアクセス

62. Network Information API・・・ネットワーク情報へのアクセス

63. DeviceOrientation Events・・・デバイスの向きや傾きを検知する（デモ）

64. Gallery API・・・メディアギャラリーへのアクセス

65. Geolocation API・・・位置情報取得（デモ）

67. Server-Sent Events・・・HTTPベースのサーバプッシュ

68. Cross Document Messaging・・・Webページ間のメッセージ通信

69. Cross Origin Resource Sharing・・・オリジンを超えたHTTP呼び出し

70. Cross-Origin Resource Embedding Exclusion・・・img,scriptなどに対するクロスオリジン機能を制限する仕様

72. audio要素・・・音声再生

73. API for Media Resource 1.0・・・メディアのメタデータを取得するAPI

74. Audio Data API・・・Firefoxで実装済みの音声操作API

75. Web Audio API・・・Chromiumで実装済みの音声操作API

76. HTML Media Capture・・・<input type="file">を拡張して、メディア取り込みを可能に

77. Media Capture API・・・JavaScriptでメディア取り込み

78. Web VTT・・・動画に字幕やトラック情報を付与するためのフォーマット

80. CSSやJavaScriptとも組み合わせて、高度な表現を簡単に実現

81. デモ: Picture in Picture (HTML5Rocks)

83. HTML5 Canvas 2D Context・・・canvasに2次元グラフィックを描画するAPI

84. WebGL・・・canvasに3次元グラフィックを描画するAPI

85. SVG・・・ベクターグラフィックAPI

87. Web Workers・・・バックグラウンドスレッドを実現するAPI

88. setImmediate・・・setTimeout(fn, 0);をより効率的に実行

89. Page Visibility・・・Webページの表示状態を取得するためのAPI

90. Web Notifications・・・通知メッセージを表示するためのAPI

93. Video

94. Canvasvideo要素とcanvas要素2つ（作業用と表示用）を準備し、タイルに分割 一定時間ごとに、不可視のvideoからcanvasに画像を表示 マウスクリックされたら、タイルの座標を再計算してcanvasを再表示

96. WebGL

97. Video/Audio

100. http://bit.ly/toka20

101. HTML5/Web標準オーバービューについてのアンケート

102. http://bit.ly/toka20-A1

103. Twitter（実況中継用にお使いください）

104. #html5j

105. Facebookページ（質問用にお使いください）

106. http://www.facebook.com/html5j