HTML5 & The Web Platform
- 1. HTML5 & The Web Platform masataka yakura
- 2. 矢倉といいます。
- 6. Agenda
- 7. 1. なぜ HTML5 なのか 2. 新しい機能 3. プラットフォームの安定化 4. いまとこれから
- 8. なぜ HTML5 なのか
- 14. 技術の変化は?
- 17. XHTML 2.0, XForms, etc...
- 22. 「機能の拡張」と「安定性向上」
- 23. HTML5 と ”HTML5”
- 25. 1. もともと HTML5 だった (Web Sockets, Web Workers, etc.)
- 26. 2. HTML5 に近い API 仕様 (File API, Geolocation, etc.)
- 28. まぎらわしい……
- 30. 新しい機能
- 31. マークアップ
- 32. 新しい要素や属性が導入。
- 33. <canvas> <audio> <video> <header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...
- 35. <div id=“header”> → <header> <div class=“section”> → <section>
- 36. 定型句はよりシンプルに。
- 37. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
- 38. <!DOCTYPE html>
- 42. Forms (2.0)
- 43. フォームの機能が大きく拡張。
- 45. <input type=text ...> <input type=password ...> <input type=checkbox ...> <input type=radio ...> ...
- 46. <input type=email ...> <input type=range ...> <input type=color ...> <input type=date ...> <input type=tel ...> <input type=url ...> ...
- 47. UI が新たに用意される。
- 50. 2. 属性が増えた。
- 51. <input type=text ... autofocus>
- 54. 3. 値の検証ができるように。
- 55. 名 前 (必須)： メール (必須)：
- 56. <input type=text ... required> <input type=email ... required>
- 57. 郵便番号: <input type=text ... pattern=“¥d{3}-?¥d{4}”>
- 59. <canvas> + 2D Context
- 61. <canvas id=canvas ...> <!-- fallback --> </canvas>
- 63. // コンテキストの取得 var elm = document.querySelector(‘#canvas’); var ctx = elm.getContext(‘2d’); // 四角形を描画 ctx.fillStyle = ‘rgba(0, 128, 0, 0.7)’; ctx.fillRect(50, 50, 160, 200);
- 77. <video src=“intro_html5.vid” controls> <a ...> ダウンロード </a> </video>
- 78. 標準的な UI も提供される。
- 81. YouTube (TestTube) http://www.youtube.com/html5
- 84. Web Storage
- 88. // 値をセット localStorage.setItem(‘key’, ‘value’); // 値を取得 var val = localStorage.key;
- 89. ※ データベースは別の API が。 (Web SQL Database, Indexed Database API)
- 90. Web Workers
- 91. ワーカースレッドみたいなもの。
- 92. 複雑なアプリケーションで…
- 94. 重たい処理を別プロセスに。
- 95. // ワーカーの作成 var worker = new Worker(‘worker.js’); // メッセージをワーカーに渡す worker.postMessage(message); // ワーカーからのメッセージ worker.onmessage = function (e) { doSomething(e.data); }
- 96. // worker.js onmessage = function (e) { workOnSomething(); // 本体に返す postMessage(e.data); }
- 98. Application Cache + Online/Offline Events
- 99. オフライン Web アプリに。
- 104. if (navigator.onLine) { // 状態を通知 ... } window.ononline = function () { sendData(); } window.onoffline = function () { saveData(); }
- 105. Web Sockets
- 108. var ws = new WebSocket(‘ws://example/serv’); // 通信開始時の処理 ws.onopen = function () { ws.send(message); } // メッセージを受け取ったとき ws.onmessage = function (e) { ... }
- 110. プラットフォームの安定化
- 114. 今の Web 開発は大変。
- 116. 実装によって、解釈が異なる…
- 117. 大きな理由は 「仕様がない」こと。
- 121. 未定義な部分は 各々で補完していた。
- 122. 実装のことを もっと考えた仕様に。
- 124. API だけでなく 要素･属性も DOM のもと定義。
- 126. 1. 構文解析 2. ツリー構築 3. エラー処理
- 127. これらに対して 詳細な実装要件を定義。
- 128. 互換性 Compatibility
- 131. 新しい機能が 古い環境を壊さないように。
- 133. よい設計にならないことも……
- 134. いま と これから
- 135. 今は仕様をまとめている段階。
- 136. HTML5 は、巨大。 (4MB 超の HTML ファイル)
- 138. 実装は進んでいる。
- 139. 1. <canvas>, <video> 2. Web Storage 3. HTML5 parser (Firefox) 4. Web Sockets (Chrome)
- 141. 機能によって 仕様の安定度合いが異なる。
- 142. 実装状況の違いが より明確になっていく。
- 144. 「すぐには使えないや。」
- 145. すべて一度には進まない。
- 152. ありがとうございました。