Google I/Oで大きく取り上げられ、一躍注目の技術に躍り出たHTML5。Google Developer Day 2009でも、「HTML5により拓かれる次世代Web」という田村健人氏によるセッションは大盛況で、椅子が足りずに床に座り込んで聴講する人がかなりの数に上った。
筆者も同セッションに参加し、HTML5の新機能に関する簡潔でまとまった知識を得ることができた。本稿では田村氏のセッション内容を元に、HTML5の全体像をコンパクトにお伝えしよう。
HTML5とは?
HTML5は、言うまでもなくHTMLの最新バージョンである。現行のバージョンであるHTML4も、決して小さな仕様ではなかったにもかかわらず、そこにWebアプリケーション向けの機能が大幅に強化された。
あまりに仕様が巨大すぎるため、現在の規格は以下の4つに分けられている。
- HTML5・・・HTMLとXHTML向けのボキャブラリと関連API
- Web Storage
- Web Workers
- The Web Sockets API
HTML5: HTMLとXHTML向けのボキャブラリと関連API
HTML/XHTMLに関する仕様では、以下のような変化が見られる。
フォームの強化
- input要素のtype属性に指定できる型が大幅に増えた。例えばnumber(数値)、date/time/datetime/datetime-local(日時)、month(月)、week(週)、color(色)、search(検索エンジン)、tel(電話番号)、url(URL)、email(メールアドレス)などが挙げられる
- フォームに入力された値を検証する仕組みが用意された。入力が必須である事を表すrequired属性や、入力値のパターンを表すpattern属性(正規表現で指定)などが利用できる
canvasタグ
任意のグラフィックを自由に描画できる領域として、canvas要素が利用できる。 幅と高さを指定したcanvasを定義し、あとはJavaScriptコードを用いて矩形や円、画像などを自由に描画できる。
<!-- キャンバスを配置 -->
<canvas id="canvas1" width="300" height="240"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
// キャンバスに対して2Dグラフィックスを行うコンテキストを取得
var context = canvas.getContext("2d");
// 四角を描画
context.fillRect(0,0,50,50);
</script>
メディア要素(videoタグ、audioタグ)
videoタグは動画、audioタグは音声をアプリに埋め込むためのタグである。 imgタグなどと同じく、src属性を用いてリソースのURLを指定する。
<video src="ex-b.mov"></video>
<audio src="ex-c.mp3"></video>
また、これらの要素はJavaScriptコードを用いて操作し、再生・停止・頭出しなど、細かい操作を行う事が可能だ。
その他の要素
他にも、文書構造をより明確に表すsectionやarticleといった要素、メニュー項目を作成するためのmenuタグやcommandタグ、progress(進捗バー)やmeter(メーター)などが追加される。