Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 & The Web Platform

54,391 views

Published on

HTML5と関連する仕様について、その目的や中身について簡単に紹介しています。

2010年2月19日に開催されたDevelopers Summit 2010で講演したときのスライドです。

Published in: Technology
  • Does anyone here have English version? It looks interesting but I don’t know Japanese!

    G
    http://www.tophotdeal.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • html5の解説スライド
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 表紙は異なりますが、2010年2月19日に開催されたDevelopers Summit 2010で講演したときのスライドと同じものです。
    誤字脱字、コードの誤りなどあればお知らせいただければと思います。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5 & The Web Platform

  1. 1. HTML5 & The Web Platform masataka yakura
  2. 2. 矢倉といいます。
  3. 3. http://www.mitsue.co.jp/
  4. 4. Web 標準 Blog http://standards.mitsue.co.jp/
  5. 5. W3C HTML5 Japanese IG http://www.w3.org/html/ig/jp/
  6. 6. Agenda
  7. 7. 1. なぜ HTML5 なのか 2. 新しい機能 3. プラットフォームの安定化 4. いまとこれから
  8. 8. なぜ HTML5 なのか
  9. 9. Web の使われ方が ここ数年で大きく変化した。
  10. 10. 静的だった Web に アプリケーションが台頭。
  11. 11. 技術の変化は?
  12. 12. HTML, CSS, JavaScript...
  13. 13. Webアプリの発展には まだまだ機能が足りない。
  14. 14. XHTML 2.0, XForms, etc...
  15. 15. 開発者から 賛同を得られなかった……
  16. 16. 「いま使われている技術を 拡張して進化させよう!」
  17. 17. ただ、プラットフォームも あまり安定していなかった……
  18. 18. HTML5 の目的は これらをなんとかすること。
  19. 19. 「機能の拡張」と「安定性向上」
  20. 20. HTML5 と ”HTML5”
  21. 21. HTML5 仕様にないものも 「HTML5」と呼ばれている。
  22. 22. 1. もともと HTML5 だった (Web Sockets, Web Workers, etc.)
  23. 23. 2. HTML5 に近い API 仕様 (File API, Geolocation, etc.)
  24. 24. 3. とくに関係ない (CSS3)
  25. 25. まぎらわしい……
  26. 26. 今回は関連 API も含めて いくつか簡単に紹介します。
  27. 27. 新しい機能
  28. 28. マークアップ
  29. 29. 新しい要素や属性が導入。
  30. 30. <canvas> <audio> <video> <header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...
  31. 31. よく使われる class/id を 要素として採用する。
  32. 32. <div id=“header”> → <header> <div class=“section”> → <section>
  33. 33. 定型句はよりシンプルに。
  34. 34. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
  35. 35. <!DOCTYPE html>
  36. 36. <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
  37. 37. <meta charset=“UTF-8”>
  38. 38. ※ 古いブラウザーでも機能します。
  39. 39. Forms (2.0)
  40. 40. フォームの機能が大きく拡張。
  41. 41. 1. <input> の型が増えた。
  42. 42. <input type=text ...> <input type=password ...> <input type=checkbox ...> <input type=radio ...> ...
  43. 43. <input type=email ...> <input type=range ...> <input type=color ...> <input type=date ...> <input type=tel ...> <input type=url ...> ...
  44. 44. UI が新たに用意される。
  45. 45. <input type=range ...>
  46. 46. <input type=date ...>
  47. 47. 2. 属性が増えた。
  48. 48. <input type=text ... autofocus>
  49. 49. <input type=search placeholder=“検索語句を入力”>
  50. 50. <input type=text name=“acct” autocomplete=off>
  51. 51. 3. 値の検証ができるように。
  52. 52. 名 前 (必須): メール (必須):
  53. 53. <input type=text ... required> <input type=email ... required>
  54. 54. 郵便番号: <input type=text ... pattern=“¥d{3}-?¥d{4}”>
  55. 55. ※ サーバーサイドでの対応も必要。
  56. 56. <canvas> + 2D Context
  57. 57. JavaScript から 図形の描画などを行う。
  58. 58. <canvas id=canvas ...> <!-- fallback --> </canvas>
  59. 59. コンテキストを取得し Context API で描画していく。
  60. 60. // コンテキストの取得 var elm = document.querySelector(‘#canvas’); var ctx = elm.getContext(‘2d’); // 四角形を描画 ctx.fillStyle = ‘rgba(0, 128, 0, 0.7)’; ctx.fillRect(50, 50, 160, 200);
  61. 61. Immediate Mode なので 描画されたら操作ができない。
  62. 62. アニメーションなどは そのつど描きなおさないと……
  63. 63. オブジェクトが保持されないので マウスドリブンなものは厄介?
  64. 64. ただ、高速なので いろいろなものに使われている。
  65. 65. Bespin https://bespin.mozilla.com/
  66. 66. <canvas> で作られたエディタ。
  67. 67. Sketchpad http://mugtug.com/sketchpad/
  68. 68. ドローイングツール。 (SVG も一部利用)
  69. 69. <audio> & <video>
  70. 70. <img> と同じ感覚で 音声や動画を扱う要素とAPI。
  71. 71. <video src=“intro_html5.vid” controls> <a ...> ダウンロード </a> </video>
  72. 72. 標準的な UI も提供される。
  73. 73. プラグイン実装ではないので CSS や Canvasと組み合わせが可能。
  74. 74. YouTube (TestTube) http://www.youtube.com/html5
  75. 75. コーデックについては いろいろもめています……
  76. 76. Web Storage
  77. 77. Cookie を置き換える シンプルなストレージ機能。
  78. 78. localStorage: 永続ストレージ。
  79. 79. sessionStorage: セッションが終わると消える。
  80. 80. // 値をセット localStorage.setItem(‘key’, ‘value’); // 値を取得 var val = localStorage.key;
  81. 81. ※ データベースは別の API が。 (Web SQL Database, Indexed Database API)
  82. 82. Web Workers
  83. 83. ワーカースレッドみたいなもの。
  84. 84. 複雑なアプリケーションで…
  85. 85. 重たい処理を別プロセスに。
  86. 86. // ワーカーの作成 var worker = new Worker(‘worker.js’); // メッセージをワーカーに渡す worker.postMessage(message); // ワーカーからのメッセージ worker.onmessage = function (e) { doSomething(e.data); }
  87. 87. // worker.js onmessage = function (e) { workOnSomething(); // 本体に返す postMessage(e.data); }
  88. 88. Shared-nothing なので DOM などにアクセス不可。
  89. 89. Application Cache + Online/Offline Events
  90. 90. オフライン Web アプリに。
  91. 91. Application Cache: キャッシュするファイルを指定。
  92. 92. CACHE MANIFEST # キャッシュさせたいファイルを書く style.css jquery.js script.js fonts/afont-medium.woff
  93. 93. <html ... manifest=“cache.manifest”>
  94. 94. Online/Offline Events: オンライン/オフライン時にfire.
  95. 95. if (navigator.onLine) { // 状態を通知 ... } window.ononline = function () { sendData(); } window.onoffline = function () { saveData(); }
  96. 96. Web Sockets
  97. 97. Full-duplex な 双方向通信を実現する。
  98. 98. プロトコルと API 仕様の 標準化がそれぞれ進行中。
  99. 99. var ws = new WebSocket(‘ws://example/serv’); // 通信開始時の処理 ws.onopen = function () { ws.send(message); } // メッセージを受け取ったとき ws.onmessage = function (e) { ... }
  100. 100. 複数人で同時編集をするような Webアプリが増えていく?
  101. 101. プラットフォームの安定化
  102. 102. 機能を追加しても 基礎がダメなら意味がない。
  103. 103. プラットフォーム安定のために 相互運用性と互換性を向上させる。
  104. 104. 相互運用性 Interoperability
  105. 105. 今の Web 開発は大変。
  106. 106. 実装によって、解釈が異なる…
  107. 107. 大きな理由は 「仕様がない」こと。
  108. 108. 1. そもそも定義がない 2. 仕様の詳細がない
  109. 109. 実装に依存しないように 仕様が作られていた。
  110. 110. 依存しすぎる部分は 標準化がされないことも……
  111. 111. 未定義な部分は 各々で補完していた。
  112. 112. 実装のことを もっと考えた仕様に。
  113. 113. HTML5 では DOM を中心に仕様を構成。
  114. 114. API だけでなく 要素・属性も DOM のもと定義。
  115. 115. 作られる DOM の一貫性も 考える必要がでてくる。
  116. 116. 1. 構文解析 2. ツリー構築 3. エラー処理
  117. 117. これらに対して 詳細な実装要件を定義。
  118. 118. 互換性 Compatibility
  119. 119. 現在の環境との 互換性を考えないといけない。
  120. 120. 古いサイト/アプリが HTML5 な環境でも動くように。
  121. 121. 新しい機能が 古い環境を壊さないように。
  122. 122. 試験実装でテストして 仕様を修正していく。
  123. 123. よい設計にならないことも……
  124. 124. いま と これから
  125. 125. 今は仕様をまとめている段階。
  126. 126. HTML5 は、巨大。 (4MB 超の HTML ファイル)
  127. 127. 勧告は遠い先。 (各機能に対し2つ以上の実装が必要)
  128. 128. 実装は進んでいる。
  129. 129. 1. <canvas>, <video> 2. Web Storage 3. HTML5 parser (Firefox) 4. Web Sockets (Chrome)
  130. 130. 機能によって 仕様の安定度合いが異なる。
  131. 131. 実装状況の違いが より明確になっていく。
  132. 132. 「すぐには使えないや。」
  133. 133. すべて一度には進まない。
  134. 134. 実装されている機能を 使えるところから使う。
  135. 135. サポートされない環境には フォールバックを用意する。 (excanvas.js, etc.)
  136. 136. プラットフォームを限定すれば 広く利用できることも。 (iPhone, Android, etc.)
  137. 137. 考え方を変えていきながら 新しい技術を使っていこう!
  138. 138. ありがとうございました。
  139. 139. Contact: <yakura-masataka@mitsue.co.jp>

×