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(メーター)などが追加される。