Lesson 05 HTML5の新要素(後編) - HTML5＋CSS3 次世代Webコーディングの超・最新動向・HTML5編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

HTML5編

	Lesson 5			HTML5の新要素（後編）
	制作・文			羽田野 太巳（有限会社futomi）

HTML5仕様を含めたオープンWebの新テクノロジーは非常に範囲が広い。ここではHTML5を中心とした新しいテクノロジーについて簡単に紹介していこう。

※前編はこちら

外部コンテンツを
組み込む要素

embed要素

ご存じの読者も多いだろうが、この要素はFlashなどのプラグインコンテンツを埋め込む際に使う。これまで当たり前のように使われてきた embed要素ではあるが、実はHTML4では規定されていない。つまり、HTML4やXHTMLでembed要素を使うのは文法エラーだったわけだ。しかし、HTML5では晴れてembed要素が仕様に盛り込まれた。


video要素／audio要素

video要素はビデオ再生に、audio要素はオーディオ再生に使う。src属性にビデオまたはオーディオのファイルのURLをセットし、controls属性を入れると、ビデオやオーディオを操作するユーザーインタフェイスが表示される【1】。


source要素

ブラウザによって再生できるビデオやオーディオのフォーマットが異なる。そのため、video要素やaudio要素のsrc属性にひとつのファイルを指定するだけだと、再生できないブラウザが出てきてしまう。しかし、source要素を使えばビデオやオーディオのファイルの候補をいくつでも定義することができる【2】。

source要素にはsrc属性に再生ファイルのURLを指定する。そしてtype属性にそのMIMEタイプを指定する。これでブラウザはsource要素を上から順に再生可能なファイルを見つけてくれる。


track要素

track要素は、ビデオに字幕を表示するメカニズムを提供する要素だ。

【3】のようにvideo要素の中にtrack要素を入れて使う。track要素には、種類を表すkind属性、字幕ファイルのURLを指定する src属性、言語を表すsrclang属性、ラベルを表すlabel属性がある。字幕ファイルはWebVTT（Web Video Text Tracks）と呼ばれるフォーマットで用意する。

2011年2月現在でtrack要素をサポートしたブラウザはないが、ビデオのアクセシビリティ向上には欠かせない要素といえるだろう。


canvas要素

canvas要素はビットマップグラフィックスを扱うための要素だ。とはいえ、この要素だけでは何も表示されない。canvas要素はJavaScriptを通して図を描画するのだ。

これまで動的な図形描画はFlashなどのプラグインに頼らざるを得なかったが、canvas要素を使うことでJavaScriptだけで自由な動的描画が可能となった。


【1】これはInternet Explorer 9のユーザーインタフェイスだ。



【2】



【3】

フォーム関連要素

datalist要素

datalist要素はテキスト入力フィールドの入力候補のリストを表す。この要素はテキスト入力フィールドにサジェストを提供するために使う。input要素のlist属性とdatalist要素のid属性とが関連付けられる【4】。

【5】のように一般的なテキスト入力フィールドと同様に自由にテキストを入力できる一方、クリックするとdatalist要素にマークアップされた候補が表示される。これを選択すれば、テキスト入力フィールドにその値がセットされる。

2011年2月現在でFirefox 4.0、Opera 11がdatalist要素をサポートしている。


output要素

output要素はスクリプトを通して実行された計算結果などの出力を表す。文字通り、input要素とは逆の用途だ。

output要素の開始タグと終了タグの中に入れた値は、デフォルト値として解釈される【6】。output要素の実際の値は、JavaScriptからvalueプロパティに値をセットすることで変更できる。

input要素のvalueプロパティと同様に、このプロパティの値を変更すれば、それがすぐさまレンダリングに反映されることになる。


progress要素

progress要素はタスクの完了度を表す。【7】のようにprogress要素のvalue属性に0〜1の範囲の値を指定すると、その進捗率に合わせたプログレスバーが表示される【8】。

2011年2月現在でOpera、Chromeがprogress要素をサポートしている。


meter要素

meter要素はディスク使用率のような計測結果を表す。【9】のようにmeter要素のvalue属性に0〜1の範囲の値を指定すると、その位置に合わせたゲージが表示される【10】。

2011年2月現在でOpera、Chromeがmeter要素をサポートしている。



【4】


【5】


【6】


【7】



【8】



【9】



【10】

対話型の要素

command要素

command要素はWebアプリケーションにおけるボタンなどの処理のトリガーのために使う。command要素は3タイプのボタンを表現できる。

1つ目は、単に押すことで何らかの処理を行う "command" タイプ。2つ目は、複数のコマンドのうちいずれか1つを選択できる "radio" タイプだ。

【11】は3つのradioタイプのボタンと1つのcommandタイプのボタンで構成されたツールバーの例だ。左側3つのボタンはradioタイプのcommand要素で作られているが、1つだけが選択できる。右側の1つのボタンはcommandタイプのcommand要素で作られたボタンだ【12】。

最後の3つ目は、オンとオフを切り替える "checkbox" タイプだ。 【13】はcheckboxタイプのcommand要素で作られたボタンで構成されるツールバーの例だ。各ボタンは独立してオンとオフを切り替えることができる【14】。

command要素はボタンの種類とその特性を表すだけで、押した際の処理が規定されているわけではない。あくまでも、ボタンが押されたときの処理は JavaScriptで用意しなければならない。また、デザインについてはCSSで調整する必要がある。前述の例はイメージ図であり、その通りに command要素がレンダリングされるわけではない。レンダリングに反映されるのは、icon属性で指定したボタン画像のみだ。

2011年2月現在でcommand要素をサポートしたブラウザはないが、Webアプリケーションにおいては重要な要素といえるので早い実装が望まれる。


【11】



【12】



【13】



【14】Media Capture API


details要素／summary要素

details要素はディスクロージャーウィジェットを実現するために使う。ディスクロージャーウィジェットとは、ユーザーの要求に応じて表示・非表示を切り替えることができるユーザーインタフェイスのひとつだ。

summary要素はdetails要素が表すディスクロージャーウィジェットの概要やキャプションを表す。

【15】にマークアップ例を紹介しよう。この例では処理の進捗状況を表している。当初はsummary要素にマークアップされた概要のみが表示されるが、要素をクリックすることで詳細が表示される【16】。

なお、2011年2月現在でこれらの要素をサポートしたブラウザはない。ただ、ブラウザに実装されればこのような挙動になると思われる。


【15】


【16】