1. HTML5 10TH勉強会 2010/1/25

2. HTML5とは? HTMLの5回目に当たる大幅な改良版 HTMLと5の間にスペースを含まない HTML5はWHATWGによって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年1月22日にドラフト（草案）が発表された。 2012年3月頃に正式に勧告する予定である Wikipedia 「HTML5」(2011年1月5日 (水) 00:50)『ウィキペディア日本語版』 http://ja.wikipedia.org/wiki/HTML5 2

3. 特徴・概要 HTML5 はプロプライエタリなプラグインとして、提供されているリッチインターネットアプリケーション（JavaFX、Adobe Flash、Silverlight 等）を置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されている。 2008年以降に発表されたウェブブラウザの多くは HTML5 に段階的に対応している。 Google Chrome 3.0 以降、Safari 3.1 以降、Firefox 3.5 以降、Opera 10.5、Internet Explorer 9 など Wikipedia 「HTML5」(2011年1月5日 (水) 00:50)『ウィキペディア日本語版』 http://ja.wikipedia.org/wiki/HTML5 3

4. やってみようHTML5 基本タグ編 VIDEO,CANVAS, FORM etc… 4

5. VIDEO要素 VIDEO要素では動画データをHTMLから直接扱うことができる。 JavaScriptと組み合わせることで、再生をコントロールできる。 <video id="video" controls src="Scissors_soccer.theora.ogv"> Controls属性はブラウザのコントロールボタンが表示される。 Safariはogvファイルを再生できない 5

6. VIDEOのデモをご覧ください 6

7. CANVAS要素 CANVAS要素ではJavaScrpitを使って図形や画像の描画ができる。 ちなみにIE以外のブラウザでは、すでに動作する。 回転や変形、透過などはJavaScriptで制御 <canvas id="canvas" width=“800" height=“600"> 7

8. CANVASのデモをご覧ください 8

9. FORM要素 Web Forms2の仕様を取り込み、大幅パワーアップ placeholder 未入力フィールドに表示される薄い文字 <input type="text" placeholder=“Please input"> autofocus 入力フィールドに自動フォーカス。JavaScriptレス <input type="text" autofocus> autocomplete テキストオートコンプリート。リストをdatalistタグに <input type="text" name="completelist" autocomplete="on" autofocus list="completelist"> <datalist id="completelist" stlye="display: none;"> <option>masa <option>masanori <option>satou </datalist> 9

10. FORM要素 他にもいろいろパワーアップ 10 ※1はOpera10のみ(2010/01現在)

11. FORM要素で入力値検証 HTMLで入力値検証ができるように 11 <input name="text" type="text" required pattern="^.*$">

12. FORMのデモをご覧ください 12

13. やってみようHTML5 Webアプリ編 Web Works,Web Strage/Web Database, Web Sockets etc… 13

14. Web Works Web WorksはWebアプリケーションにおいてバックグラウンド処理を実現できる。 これまでのHTMLとJavaScriptで作成したプログラムはUIスレッドで実行されるため、JavaScriptの処理時間に引きずられてHTMLのレンダリング速度も劣化する。 Web Worksでは、バックグラウンドスレッドを生成できるためHTMLのレンダリング速度が劣化しない。 利用方法 var worker = new Worker(“hoge.js”); // 生成 worker.onmessage = function(event) {}; // コールバック worker.postMessage(message); // メッセージ送信 14

15. Web Worksのデモをご覧くださいFirefox Only… 15

16. Web Storage/Web Database Web Storage/Web Databaseはクライアントのデータ永続化機構。オフラインWebアプリケーションを作成するときに使える。 Web Strageはキーバリューストア、Web DatabaseはRDBS。 Web StrageにはsessionStrageとlocalStrageの２種類がある。 使い方は普通のKeyValueStoreと同じ感じ Web DatabaseではSQLが利用可能で、トランザクションもある 16

17. Geolocation API Geolocation APIは位置情報が取得できる。 void getCurrentPosition(onSuccess, onError, options 現在位置を取得する intwatchPosition(onSuccess, onError, options) 位置情報を継続して監視する void clearWatch(watchId) 位置情報の監視をやめる。引数はwatchPosition()を呼び出した際に得られる戻り値 スマートフォンで使うのか 17 ws.close();

18. おまけ HTML5で作られた美しいサイト 18

19. 参考文献 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 http://journal.mycom.co.jp/special/2009/html5-2/menu.html 19 ws.close();