HTML5/Web標準オーバービュー

3,674 views
3,571 views

Published on

Chrome+HTML5 Conference

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,674
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
51
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

HTML5/Web標準オーバービュー

  1. 1. HTML5/Web標準オーバービュー<br />ver. 2011年8月15日<br />W3C/Keio<br />慶應義塾大学大学院特任助教深見嘉明<br />@rhys_no1<br />Chrome+HTML5 Conference<br />〜第20回記念HTML5とか勉強会スペシャル〜<br />
  2. 2. アンケートや情報共有にご協力ください!<br /><ul><li>カンファレンス全体についてのアンケート
  3. 3. http://bit.ly/toka20
  4. 4. HTML5/Web標準オーバービューについてのアンケート
  5. 5. http://bit.ly/toka20-A1
  6. 6. Twitter(実況中継用にお使いください)
  7. 7. #html5j
  8. 8. Facebookページ(質問用にお使いください)
  9. 9. http://www.facebook.com/html5j</li></li></ul><li>前半:HTML5 & Web標準の基礎<br />
  10. 10. HTML5,,,,,<br />
  11. 11. HTML5!<br />http://www.w3.org/TR/html5/<br />
  12. 12. HTML5を少し細かく見てみる<br />HyperText<br />Markup<br />Language<br />(Ver. 5)<br />(C) 2011 慶應義塾大学SFC研究所 次世代Web応用技術・ラボ<br />5<br />
  13. 13. そもそもHTMLとは<br />サイトA<br />ウェブサイトを構成するを作成するための規格<br />ハイパーリンク<br />ハイパーリンク付き文章ファイル<br />サイトB<br />
  14. 14. HTMLの歴史<br />HTML<br />1989年<br />SGML->XML<br />IEFT標準化<br />HTML2<br />XHTML1.0<br />1994年<br />2000年<br />携帯端末<br />2000年<br />モジュール化<br />XHTML Basic<br />HTML3<br />XHTML1.1<br />1995年<br />2001年<br />XMLらしく<br />拡大機能集約<br />XHTML2.0<br />HTML3.2<br />1997年<br />IBMを中心に、イントラネットやDB用向けとして推進中。<br />※XHTML2.0は、厳密な仕様化により、古いHTMLコンテンツも許容するブラウザを提供すること難しく、Public用のブザウザでは実装されていない。<br />正しいHTML<br />HTML4<br />1997年<br />1999年<br />HTML4.01<br />2007年開始<br />HTML5<br />目的:Web利用の容易化と拡張性の向上<br />Public 向けとして仕様化推進中。MS,Opera, Mozila, Google, Appleなどが中心に推進。2010年10月にDraft、2012年にCRを目指す。<br />
  15. 15. HTML5の正式な定義<br />W3Cで策定している<br />HTML4.01<br />XHTML1.0<br />DOM2 HTML<br />の次期バージョン<br />
  16. 16. HTML5の由来<br />WHATWGによる提案<br />Web Applications 1.0<br />Web Forms 2.0<br />アプリケーションの実行環境としてのWebを実現<br />
  17. 17. HTML5<br />ウェブサイト記述のためのマークアップ規則<br />マシンリーダビリティの向上(HTML5はXHTMLの後継でもある)<br />表現の幅を拡大<br />API仕様群<br />Webをアプリケーションの実行環境に進化させる技術<br />
  18. 18. HTML5,,,,,<br />
  19. 19. 新世代ウェブの構成要素<br />HTML5<br />CSS3<br />JavaScript<br />WebGL<br />(C) 2011 慶應義塾大学SFC研究所 次世代Web応用技術・ラボ<br />12<br />
  20. 20. 広義のHTML5<br />ウェブアプリケーションの動作環境<br />リッチコンテンツの取扱が容易に<br />デバイスとの連携に用いられる多様なAPI<br />多様な端末(モバイル、そして、、、、)に適したUIの実現<br />(C) 2011 慶應義塾大学SFC研究所 次世代Web応用技術・ラボ<br />13<br />
  21. 21. HTML5!<br />http://www.w3.org/TR/html5/<br />
  22. 22.
  23. 23. ウェブ標準を作っている場所<br />World<br />Wide <br />Web<br />Consortium<br />
  24. 24. HTML5!<br />http://www.w3.org/TR/html5/<br />
  25. 25. HTML5!,,,,,!?<br />
  26. 26. というわけで、<br />フルスペックの<br />HTML5が<br />使える環境は<br />ありません<br />
  27. 27. なぜなら<br />現在策定中の<br />規格だから<br />
  28. 28. 仕様策定プロセス<br />特徴:<br />1, 実装主義<br />2, Consensus方式<br />3, Director判断<br />Recommendation<br />勧告<br />Directorの判断<br />Proposed<br />Recommendation<br />ACによる投票<br />Candidate<br />Recommendation<br />実装例を待つ<br />Last Call<br />Working Draft<br />他のグループとの<br />整合性を取る<br />Working Draft<br />Coordination Group<br />Interest Group<br />Working Group<br />Incubator Group<br />
  29. 29. では、今日<br />学べることは<br />何なのか?<br />
  30. 30. 仕様策定プロセス<br />特徴:<br />1, 実装主義<br />2, Consensus方式<br />3, Director判断<br />Recommendation<br />勧告<br />Directorの判断<br />Proposed<br />Recommendation<br />ACによる投票<br />Candidate<br />Recommendation<br />実装例を待つ<br />Last Call<br />Working Draft<br />他のグループとの<br />整合性を取る<br />Working Draft<br />Coordination Group<br />Interest Group<br />Working Group<br />Incubator Group<br />
  31. 31. W3C標準化プロセスの特徴<br />W3C≠デジュール標準<br />実装主義<br /><ul><li>各社の採用・実装をコントロールしていない
  32. 32. 実装が進んではじめて標準にいきつく</li></li></ul><li>
  33. 33.
  34. 34. 標準が必要な理由<br />同じ仕様(データフォーマット、プロトコル…………)を使わないと、互いにデータをやり取りできない<br />共通して用いられる仕様がないと、状況(ネットワーク環境、ハードウェア、ソフトウェア)が異なると、同じようにコンテンツが使えない<br />ブラウザ戦争<br />
  35. 35. キーワード<br />ネットワーク外部性<br />
  36. 36. 身近な例<br />
  37. 37. メカニズム<br />みんなが使う<br />その仕様を採用する<br />
  38. 38. ウェブ標準とは?<br />Loyalty Free/ Open Usage<br />Open Process<br />One Web, One Network<br />設計書であり、ルールでもある<br />策定中、だけど実装済み<br />強制力なし、でも実効力がある<br />
  39. 39. ポイント<br />実装主義だから、みんなが使う仕様が標準になっていく。<br />既に広く使われている仕様=勧告になる可能性が高い<br />ポイントを抑えることが大切<br />
  40. 40. 後編:HTML5のAPIが<br />実現すること<br />
  41. 41. よりセマンティックな<br />コンテンツ<br />プラットフォーム<br />+<br />よりリッチな<br />アプリケーション<br />プラットフォーム<br />HTML5=<br />
  42. 42. よりセマンティックなコンテンツプラットフォーム<br /><ul><li>HTML5の新要素で<div>だらけのWebページとはおさらば!
  43. 43. セクション要素(section/article/aside/nav...)
  44. 44. その他の新要素(header/footer/time/command...)
  45. 45. 既存要素の意味も変化(strong/small/b/i/address/menu...)
  46. 46. HTML5 Formsで、よりセマンティックかつリッチな入力フォームが実現する
  47. 47. マイクロデータなどのリッチスニペット技術</li></li></ul><li>詳しくはこのあと、羽田野さんのセッションで!<br />
  48. 48. よりリッチなアプリケーションプラットフォーム<br /><ul><li>JavaScript APIが次々に考案、標準化され、プラットフォームが拡大しつつある。
  49. 49. ->APIとは?</li></li></ul><li>APIって、なんだ?<br /><ul><li>->Application Programming Interface
  50. 50. 低レベルのレイヤの機能を利用するための、機能の入り口(=インターフェース)のこと</li></li></ul><li>Webアプリにできることが、なぜ少なかったか?<br /><ul><li>->APIが足りなかったから</li></li></ul><li>どんなAPIが増える?何が出来るようになる?<br /><ul><li>Webアプリをオフラインでも利用可能になる。
  51. 51. デバイスの機能をフル活用できるようになる。
  52. 52. より高速で自由度の高いネットワーク処理が可能になる。
  53. 53. マルチメディアを自由自在に操れるようになる。
  54. 54. Webページの表現力が大幅に向上する。</li></li></ul><li>オフラインWebアプリケーション<br /><ul><li>アプリケーションキャッシュ・・・オフライン利用可能なキャッシュ(デモ)
  55. 55. Web Storage・・・簡単に利用出来るストレージAPI
  56. 56. Indexed Database API・・・ブラウザ組み込みのKVS
  57. 57. File API・・・ファイルの読み書き</li></li></ul><li>デバイスの機能へのアクセス<br /><ul><li>Contacts API・・・アドレス帳へのアクセス
  58. 58. Calendar API・・・カレンダーへのアクセス
  59. 59. Media Capture・・・メディアデータの取り込み
  60. 60. Messaging API・・・SMS/MMS/E-mailの送信
  61. 61. Battery Status API・・・バッテリー状態へのアクセス
  62. 62. Network Information API・・・ネットワーク情報へのアクセス
  63. 63. DeviceOrientation Events・・・デバイスの向きや傾きを検知する(デモ)
  64. 64. Gallery API・・・メディアギャラリーへのアクセス
  65. 65. Geolocation API・・・位置情報取得(デモ)
  66. 66. 音声入力・・・音声でテキスト入力を行える(デモ)</li></li></ul><li>より高度なネットワーキング<br /><ul><li>WebSocket・・・リアルタイム性の高い、新たな通信形式
  67. 67. Server-Sent Events・・・HTTPベースのサーバプッシュ
  68. 68. Cross Document Messaging・・・Webページ間のメッセージ通信
  69. 69. Cross Origin Resource Sharing・・・オリジンを超えたHTTP呼び出し
  70. 70. Cross-Origin Resource Embedding Exclusion・・・img,scriptなどに対するクロスオリジン機能を制限する仕様
  71. 71. XMLHttpRequest Level2・・・パワーアップ!!(デモ)</li></li></ul><li>マルチメディア<br /><ul><li>video要素・・・動画再生
  72. 72. audio要素・・・音声再生
  73. 73. API for Media Resource 1.0・・・メディアのメタデータを取得するAPI
  74. 74. Audio Data API・・・Firefoxで実装済みの音声操作API
  75. 75. Web Audio API・・・Chromiumで実装済みの音声操作API
  76. 76. HTML Media Capture・・・<input type="file">を拡張して、メディア取り込みを可能に
  77. 77. Media Capture API・・・JavaScriptでメディア取り込み
  78. 78. Web VTT・・・動画に字幕やトラック情報を付与するためのフォーマット
  79. 79. Peer Connection・・・P2P接続も可能に</li></li></ul><li>マルチメディアの取り扱いも容易に<br /><ul><li>音声や動画をWebページ上で取り扱うのが非常に容易に
  80. 80. CSSやJavaScriptとも組み合わせて、高度な表現を簡単に実現
  81. 81. デモ: Picture in Picture (HTML5Rocks)
  82. 82. デモ:字幕入り動画のデモ</li></li></ul><li>Webページをよりグラフィカルに<br /><ul><li>canvas要素・・・ビットマップグラフィックの描画領域(デモ)
  83. 83. HTML5 Canvas 2D Context・・・canvasに2次元グラフィックを描画するAPI
  84. 84. WebGL・・・canvasに3次元グラフィックを描画するAPI
  85. 85. SVG・・・ベクターグラフィックAPI
  86. 86. requestAnimationFrame API・・・JavaScriptアニメーションをより効率よく行うためのAPI</li></li></ul><li>その他も続々増加中<br /><ul><li>Navigation Timing/Resource Timing・・・Webページやリソースの読み込みに要した時間を取得するAPI
  87. 87. Web Workers・・・バックグラウンドスレッドを実現するAPI
  88. 88. setImmediate・・・setTimeout(fn, 0);をより効率的に実行
  89. 89. Page Visibility・・・Webページの表示状態を取得するためのAPI
  90. 90. Web Notifications・・・通知メッセージを表示するためのAPI
  91. 91. フルスクリーンAPI・・・Webページのフルスクリーン化を可能にするAPI</li></li></ul><li>HTML5の各要素を組み合わせると、こんなことができる!<br />
  92. 92. Blowing apart fragments of Video<br /><ul><li>使用しているHTML5要素
  93. 93. Video
  94. 94. Canvas</li></ul>video要素とcanvas要素2つ(作業用と表示用)を準備し、タイルに分割<br />一定時間ごとに、不可視のvideoからcanvasに画像を表示<br />マウスクリックされたら、タイルの座標を再計算してcanvasを再表示<br />
  95. 95. Flight of the navigator<br /><ul><li>使用しているHTML5要素
  96. 96. WebGL
  97. 97. Video/Audio
  98. 98. Audio Data API</li></li></ul><li>ありがとうございました。<br />深見嘉明 @rhys_no1<br />白石俊平 @Shumpei<br />
  99. 99. アンケートや情報共有にご協力ください!<br /><ul><li>カンファレンス全体についてのアンケート
  100. 100. http://bit.ly/toka20
  101. 101. HTML5/Web標準オーバービューについてのアンケート
  102. 102. http://bit.ly/toka20-A1
  103. 103. Twitter(実況中継用にお使いください)
  104. 104. #html5j
  105. 105. Facebookページ(質問用にお使いください)
  106. 106. http://www.facebook.com/html5j</li>

×