いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0

2009年5月7日

日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。

これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。

HTML5

HTML 5 - A vocabulary and associated APIs for HTML and XHTML

HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによってWebページがマシンリーダブルになることよりも、Ajaxに代表されるようなWebアプリケーションとしての進化のニーズの方が圧倒的に大きなものになりました。

こうしたことを背景に、あらたにHTMLを進化させる仕様として策定されているのがHTML5です。

HTML5は、これまでのHTMLとの後方互換性を保ちつつ、文書構造を示したarticleタグやnavタグ、footerタグの追加や、自由に2Dのグラフィックを描画できるCanvas要素、動画や音声をWebブラウザでサポートするためのvideoタグやaudioタグなどが追加されています。

HTMLは今年の10月頃に最終草案が提出されるのではないかと想定されています。そこから勧告になるまでにはさらに数カ月以上かかることになると思いますが、Webブラウザへの実装はすでに一部で始まっているため、実質的には勧告前から多くの機能が利用可能になるのではないでしょうか。

以下ではHTML5の主な新機能を紹介します。

canvasタグ

canvasタグはHTML5の仕様の中で、Webアプリケーションに与える影響がいちばん大きい要素だと思います。JavaScriptでCanvas上にグラフを描画するといったことだけでなく、ゲームのような複雑な描画や、テクスチャマッピングといったこともJavaScriptでプログラミング可能です。

Canvasタグを使うと、こんなアプリケーションまでできるという例を1つ紹介しましょう。これは、「Chrome Experiments」で公開されているjs touchというアプリケーションです。

canvasタグを使って描かれた初音ミクのデモ「js touch」。3Dフィギュアとして描かれた初音ミクをマウス操作によっていろんな角度から眺めることができる

articleタグ、navタグ、footerタグなど

いままでWebページのレイアウトは基本的にDivタグによるボックスモデルレイアウトで行われてきました。HTML5でもその点に変化はありませんが、本文やナビゲーション、フッタなどを表すためにdivタグに変わる専用のタグとして、articleタグやnavタグ、footerタグなどが用意されるようになります。

これによってアプリケーションがHTMLを解析したときに、どこが本文でどこがナビゲーションなのか、といったことが分かりやすくなります。

Web Storage

Web StorageはWebブラウザに実装されるデータベースです。いままでWebアプリケーションがWebブラウザに保存できるのはクッキーだけでしたが、Web Storageによってより複雑で大量なデータの保存ができるようになります。いままでGearsアドオンが必要だったGMailのオフライン機能のようなことが、アドオンなしで実装可能になります。

ただしWeb Storageと次のWeb Workdersなど、これまでHTML5に含まれていたいくつかの仕様は最新のHTML5のドラフトから分離され独立した仕様となり、個別に議論されるようになりました。

Web Workers

JavaScriptにはスレッド制御の命令などがないためマルチスレッドなアプリケーションを書くことができませんでしたが、Web Worksesはマルチスレッドのようにバックグラウンドで動作する処理をWebアプリケーションで実装可能にします。

CSS 3

Cascading Style Sheets Current Work

CSS 3とは正確には1つの仕様の呼称ではなくて、CSS MODULESとしてさまざまな機能がモジュールごとに分かれて策定されているものの集合体の呼称です。今後CSSはこのモジュールごとに進化することになります。

CSS 3では数多くの新機能が盛り込まれています。いくつかハイライトとなりそうなモジュールを紹介します。

テンプレートレイアウト

Divタグによるボックスモデルを用いたレイアウトは普及していますが、レイアウトの完成度を高めるために複数のボックスを同じ高さに揃えたいと思っても、いままではCSSの標準機能に高さを揃える機能がなかったため特殊なテクニックやJavaScriptを駆使して実現せざるを得ませんでした。

CSS3ではこうしたニーズに応えて、複数のボックスモデルの高さを揃える機能が「テンプレートレイアウト」として提供される予定です（アドバンストレイアウトから名称変更されました）。これで、本文とサイドバーの高さを揃えたりすることが簡単にできるようになります。

マルチカラム

雑誌や書籍などでよく見る、本文の2段組、3段組のレイアウトをWebページで表現するのはほとんど無理なことでした。しかしディスプレイの横幅が広がっている現在、本文を複数の段組で表現して読みやすくすることはユーザビリティの向上としても役立ちます。

CSS3では、マルチカラムレイアウトとして、本文を自動的に複数の段組に分解して表示してくれる機能が追加される予定です。

Webフォント

CSS3では、Webページで指定したフォントがそのコンピュータに用意されていなかった場合、自動的にWebサーバからフォントをダウンロードしてそのフォントで表示する機能が追加されています。

これにより、Webページはデザイナーが想定した通りのフォントで表示することが可能にないます。ただし、フォントのライセンスの問題や、漢字のような大量の文字のフォントが必要な場合にはダウンロードの時間がかかることなど、CSSだけでは解決できない周辺事情がこの機能には数多く残されているようです。

角丸ボックス

四角い枠の角を丸く表示させるテクニックは、スタイルシートを駆使するものやJavaScriptのライブラリまでさまざまなものがありますが、CSS3ではデフォルトで角丸ボックスを表示させる機能が追加されます。

JavaScript 2.0

Ecma International finalises major revision of ECMAScript

JavaScriptの次バージョンは、ECMAScript 5としてECMA Internationalで議論されています。すでに仕様はほぼ固まっており、現在は実装と検証のフェーズに入っていて今年中には最終承認される予定でスケジュールが進んでいるそうです。現在のJavaScriptは一般にJavaScript 1.5～1.7で、ECMAScript 5はJavaScript 2.0と呼ばれることになるはずです。

JavaScript 2.0では、それほど大胆な仕様変更は行われていません。その中で目立つのはJSONのサポートです。

JSONサポート

これまでもJavaScriptではJSON形式のデータを簡単に扱うことができました（そもそもJSONはそのために作られたデータ形式でした）。ただし、JSONはデータを実行して取得するという特徴のおかげで、不正な命令がデータ中に紛れ込んでいた場合にそれが実行され、セキュリティの問題を引き起こすことが心配されていました。

JavaScript 2.0のJSONサポートは、JSONデータを実行して評価することをやめて専用のパーサが用意されるため、このセキュリティの心配がなくなります。

スピード競争

JavaScriptで起きている最大の変化は、JavaScript 2.0への変化よりもWebブラウザ間で繰り広げられているスピード競争の方でしょう。

先日公開されたInternet Explorer 8は、JavaScriptの高速化が1つのポイントでしたし、グーグルのChromeはV8と呼ばれる独自の高速なJavaScriptエンジンを搭載。その高速性をデモンストレーションするためのサイト「Chrome Experiments」も展開しています。

Firefoxは次バージョンのFirefox 3.5で新しいJavaScriptエンジンのTraceMonkeyを実装予定です。SafariのベースとなっているWebkitでは、SquirrelFishというJavaScriptエンジンを開発中です。