HTML5を今日のブラウザで使う - Operaのエバンゲリストが実験

5月末に米国で開催されたGoogle I/Oで、Googleが大々的に取り上げたHTML5。以来Webプラットフォームの進化を加速させる技術として注目され、ドットコムバブル後に一部のWeb 2.0企業が果たしたような起爆効果を期待する声も聞こえ始めている。

しかしながら、HTML5はまだ策定作業の半ばにあるHTML規格に過ぎない。実際に普及を押し進めていくには、Webに関わるあらゆる企業や開発者、そしてユーザーの協力を得ていく必要がある。そこでOSCON 2009で、Opera Softwareの"オープンWeb標準エバンゲリスト"であるBruce Lawson氏が「The HTML 5 Experiments」という講演を行った。リアルワールド (今日のWebブラウザ)でHTML5を試してみて、その可能性と課題を浮き彫りにする試みだ。

40分の短い講演だったが、今日のHTML5が現場の声を反映した動きになっているのが伝わってくる内容だった。

「Yes, you can !」- すでに使えるHTML5

まずは基本構造から。自身のブログのレイアウトを再現したHTML5タグを見せた。HTML5ではarticle、nav、section、header、footerなど、セクション関連のタグを通じてページの構造が明確に表される。例えばarticleで囲まれた部分は記事またはブログのエントリーであると区別される。ページの構造がセマンティックになり、例えば視覚障害者向けのスクリーンリーダー(画面に表示された情報を音声で読み上げる)や検索エンジンなどがより正確にページ内のコンテンツを取り扱えるようになる。

こうした基本構造を表す要素はHTML5サポートの途上にある現在のブラウザにとって未知のタグとなるが、「優れたブラウザでは、1つ2つのヒントを与えるだけでうまく処理される」とLawson氏。「display: block」で、header、footer、nav、section、articleなどがブロックレベル要素として解釈されるようにすれば、あとはこれらの要素をCSSで自由にスタイリングできる。ただしInternet Explorer (IE)では、未知の要素に対してCSSが適用されない。このままでは直線的な羅列になってしまうので、IE向けには新しい要素に対してCSSを機能させるJavaScriptを用いる。document.createElement ('要素名')を追加して解決する。

headerはセクションのヘッダ、footerはセクションのフッタ、articleは記事、navはナビゲーションなどを表す。sectionはこれらのどれにも属さない汎用的なセクションとなるが、以下のようにLawson氏はメインコンテンツの最初にdiv id="content"を用いている(左)。これはHTML5では、sectionなどのネストで見出しのレベルを自動的に割り当てられることが検討されているからだという。具体的には下の写真のように見出しをh1だけで表せる。実際には2番目の「I'm a heading」はh2、「I'm a heading, too」はh3、「And me! And me!」はh4というように自動的に見出しが低いランクになる。これにより今日のh1-h6との後方互換を維持しながら、6段階以上のレベルが可能になる。だが現時点では、混乱を避けるためにh1-h6がきちんと反映される手法を薦めていた。

またsectionに関しては、汎用的で使いやすい点を警告した。sectionで片付けるのは簡単だが、それではdivのようにsectionが氾濫してしまう。「article、nav、aside、headerなど、最適な要素をまず検討すべき」としていた。

読みやすく、入力しやすいWebぺージ

time要素は日付と時刻を表す。Webには日々あたらしい情報が積み上がっている。どんどん蓄積されるWeb情報を整理し、適切に見分けてもらう上で日時は重要なデータになる。ISO8601の日時表示への統一を最適とする声もあるが、タイムゾーンも加えると数字とアルファベットの分かりにくい並びになってしまう。マシンが解読できる方法で日時をエンコードし、かつ人が読みやすいように表現するためにLawson氏はtime要素の利用を薦めた。これまでスクリーンリーダーで数字の羅列になっていたケースでも、きちんと日付や時間が読み上げられるようにデザインできる。問題点としては、グレゴリオ歴準拠に限られるため、古代の日時やあいまいな日時表記では利用できない。

フォームはHTML5での大幅な強化点だ。例えば、特定の入力フィールドのフォーカス、カレンダー表示など、これまでJavaScriptを必要としていた処理をブラウザ・ネイティブで簡単に実装できる。特にインプット関連の要素が充実しており、対応が進めば、快適にフォーム入力できるWebサイトが大幅に増えるだろう。ただし今日の環境では、実際に利用できる範囲が異なる。例えば、カレンダー表示できるのはOpera 10のみだ。だが非対応のブラウザで開いても、シンプルな入力ボックスとして表示される。

インタラクティブな動画機能を実現

最後に取り上げられたのはcanvasとvideo。canvasは描画のためのHTML要素で、JavaScriptと組み合わせて図形を描いたり、アニメーション作成などが可能になる。IE以外のブラウザではサポートが進んでおり、ネット上ではcanvasで再現したスーパーマリオブラザーズが存在するなど様々な試みが見られる。今後の課題としてアクセシビリティが挙げられた。

videoは、今日の画像と同じようにHTMLから簡単に動画を扱えるようにする。ただし、こちらは現時点でサポートするブラウザが限られる上に、標準コーデックを巡ってOgg theoraを推すMozillaとOpera、Ogg Theoraに同意しないGoogle、H.264を支持するAppleというように分裂しており、ブラウザをまたがった相互運用実現の見通しが立っていない。しかしながら「ビデオは今後、ユーザーをもっとも魅了する機能になるだろう」とLawson氏。Webベースのインタラクティブな動画機能の可能性として以下のデモを披露した。特に最後のダイナミック・コンテンツ・インジェクションが面白いので、ぜひとも終わりまで見てほしい。

最初のシンプルな動画の例で画面下に現れるコントローラはスクリプトではなく、controlを用いてブラウザによってコントロール機能が提供されている。HTML/XHTMLにSVGを組み合わせることで、JavaScriptやFLASHを使わなくてもインタラクティブな処理が可能になる。2番目のデモで画面下に現れるコントローラはSVGを用いたオリジナルだ。3番目のFiltered Videoでは、SVGによってプラグインを導入せずに、リアルタイムで動画のモノクロ化やトレースエッジを実現している。エッジを判別できるのだから、映像のインタラクティブな操作も可能だ。4番目のデモではユーザーがカーソルを合わせた部分に懐中電灯で光を当てるようにコンテンツの一部を映し出し、最後のコンテンツインジェクションではビデオの中にダイナミックにテキストや画像、動画を注入している。