【WDE2010】「HTML5料理の鉄人になろう」～Bruce Lawson氏講演

Opera社 オープンWebスタンダードエバンジェリスト Bruce Lawson氏

　ウェブ制作のエキスパートが集まる世界的なイベント「Web Directions East 2010」が11月13～15日に開催された。カンファレンス日にあたる15日には、14のセッションとスポンサーセッション、ライトニングトークが行われた。

　Opera社でオープンWebスタンダードエバンジェリストを務めるBruce Lawson氏は、「HTML5の鉄人になろう（Be an Iron Chef of HTML5）」と題し、題名どおり随所に料理の比喩をまじえながら、ユーモラスな語り口でHTML5の新機能を紹介した。

●HTML5は理論より実践を重視

　Lawson氏はまず、タイの旅行の写真をスクリーンに映しながら、「HTML5はタイの寺院のようなもの」と語り出した。「あるとき王が、これまでの寺院はいきづまっているということで直すことに決めた。伝統を残しつつモダンに、という要請とともに」。

　そして、W3CのXHTMLがHTML5に合流するまでの流れを紹介した。W3Cはかつて「HTMLは終わり」としてXHTMLを策定、そしてXHTML2に進もうとしたが、これはいままでのHTMLと断絶した規格だった。いっぽう、OperaとMozillaは、ウェブアプリケーションを十分に活かすことを目的に、HTML5の策定に動いた。そこにAppleやGoogle、Microsoftが参加した。「古くからウェブブラウザに携わっている人間にとって、5つのベンダーが一緒に働くというのは驚きだ」。

　Lawson氏はHTML5がXHTML2に勝った理由として、「既存のものとの互換性、移行の明確さ」「エラー定義の明確さ」「ユーザーがオーサリングエラーにさらされる必要がない」「実用性」「スクリプトは残す」「オープンなプロセス」の6つを挙げる。特に強調するのが実用性だ。HTML5では「牛の通り道を舗装する（Pave the cowpaths）」、つまり既存の仕様をふまえてその上を整備する、というキャッチフレーズが使われている。「HTML5では、理論家や仕様書作成者より、実装者やサイト作成者、さらにはユーザーを重視する」。

　さらに、HTML4.01とHTML5の違いについて、「HTML5はHTML4.01の後任ではない。HTML4.01にいろいろ魅力的なものが加えられたものだ」と語った。なお、HTML5にはいろいろなものが含まれているため誤解されがちだが、SVGやCSS3は含まれていないと説明し、「SVGやCSS3は（HTML5を料理としたときの）お茶のようなもの」と例えた。

HTML5の「デザイン原則」	HTML5は「HTML4.01＋ギラギラ」

●divでよく使われていたクラス名をHTML要素に

　HTML5の「ごはん」にあたるのが、新しいHTML要素（タグに相当）だ。策定中なので数は確定していないが、HTML5では現状で、新しく30～31の新要素が追加されている。

　最も大きな新要素がページの構造を表す要素だ。HTML4ではヘッダー部分やフッター部分、本文部分などを、すべてdivを使ってクラスやIDにより種類を表していた。Operaでは世界中のサイトを調べ、よく使われているクラス名やID名をランキング。「footer」「menu」「header」など上位に挙がったものをHTML5のタグにした。「学術的なものじゃない、みんなが必要としているものを仕様にした」（Lawson氏）。

　続いて「おかず」にあたるフォームでは、いままでJavaScriptなしではできなかったことを標準化したという。具体的には、バリデーション（値の検査）やスライダー、スピンナー、カレンダーなどをinput要素で簡単に指定できる。さらに、typeとして「tel」「email」「url」「number」を指定した場合、iPhoneではそれぞれキーパッドとして数字やアルファベットなど違うものが表示されることを見せ、「みんながやりたいから」と繰り返した。

HTML4.01によるページ構造の表現	HTML5によるページ構造の表現

input要素でスライダーを表示	input要素でカレンダーを表示

type=telならiPhoneで数字のキーパッドが表示される	type=emailならiPhoneでアルファベットのキーパッドが表示される

●ネイティブで動画をサポートする理由

　HTML5で最も華々しく紹介されるのがvideo要素だ。Lawson氏はまず「HTML5がFlashを殺すというのはナンセンス。プロは対象によって最適な道具を選ぶ。デベロッパーに選択肢を与えるのが重要」と説明する。

　そのうえでFlashビデオを埋め込むHTMLとvideo要素を使ったHTMLを表示し、video要素のシンプルさを見せた。

　ブラウザでネイティブに動画をサポートする理由として、Lawson氏は、ほかの部分との連携、ビルトインのキーボード操作、CSSやJavaScriptから操作するAPIの3つを挙げる。APIについては、CSSによって動画を表示したまま大きさが変わるところや、ボタンから再生と停止をコントロールするところを、「ギガプリン」の動画で実演。「やりたいことをなるべくシンプルにできるようにしている」と説明した。

　video要素の弱点としては、すべてのブラウザで使える単一の動画フォーマットがないことがあるという。そのかわり、複数のフォーマットを指定できること、さらにフォールバックのHTML記述できることを示し、フォールバックとしてYouTubeの画像を再生する例を実演した。また、CSS表記を使ったメディアクエリー機能を使うと、デバイス幅によって表示する動画を切り替えるということができると紹介された。

　新しく策定された機能としては、動画に字幕を入れるtrack要素が紹介された。字幕をテキストとして表現することにより、CSSでスタイリングしたり、視覚障害の人向けのスクリーンリーダーで読んだり、検索サイトの検索対象になるというメリットがあるという。

Flashビデオを埋め込むHTML	video要素を使ったHTML

video要素で動画を表示する	各ウェブブラウザで使える動画フォーマット

●canvasは「スクリプトできるページ」

　動画とならぶメディア機能として、canvas要素がある。JavaScriptで描画のできるAPIを持つ領域で、Lawson氏は「スクリプトできるページ」と表現する。

　canvasには図形や画像を描画するAPIがあるほか、テキストも描画できる。ただし、canvasで描画されるとテキストは画像になるため、コピー＆ペーストできないことが注意点として挙げられた。

　canvasに似たものにSVGがある。Lawson氏はSVGの特徴として、IE9が出ればすべてのブラウザでサポートされること、ベクタグラフィックスで無限にスケーラブルなこと、XMLでテキストベースなためコピー＆ペーストやスクリーンリーダーに対応していること、DOMを保つこと、IllustratorまたはInkscapeから利用できることを挙げた。

canvasで図形を描画するJavaScript	canvasでテキストを描画するJavaScript

　最後にLawson氏は、「HTML5はお弁当のようなもの。さまざまな料理から必要なものを選んで組み合わせられる」とまとめた。