特集：Web制作者＆開発者のためのIE9概説（後編）

Internet Explorer 9正式版のHTML5／CSS3／SVG対応

デジタルアドバンテージ　一色 政彦
2011/07/07
Page1 Page2 Page3

　前編に引き続き、Internet Explorer 9（以降、IE9）正式版の新機能について解説する。後編である今回は、IE9の主要なHTML5／CSS3／SVG対応機能を紹介する。

■4. HTML5対応

　最近、HTML5への注目度が高まっている。2011年6月に米国で行われた「次期Windows 8（コード名）プレビュー・イベント」で、「“HTML5”で記述できるWindowsネイティブ・アプリケーション」（まだ詳細は不明）という新しいアプリケーション種別が登場することが発表されたことからも、その勢いは増すばかりだ。特にグーグルが強力に推進している印象のあるHTML5だが、マイクロソフト技術系である.NET開発者も大きな関心と学習意欲を寄せていることが、本サイトの独自調査で明らかになっている。

　では、IEがこれまでHTML5を無視してきたかというと、決してそんなことはない。あまり知られていないかもしれないが、IE8には、

などのHTML5機能がすでに搭載されている（詳しくは「MSDN：Internet Explorer 8 ― HTML と CSS のサポート」を参照）（※HTML5の仕様は2011年5月25日には最終草案に達した。2014年に勧告される予定）。

　マイクロソフトはHTML5サポートをIE9でさらに進め、HTML5仕様およびHTML5関連仕様（JavaScriptのAPIなど）からさまざまな機能を追加した。具体的には、主に下記のようなHTML5機能が実装されている。

  • <audio>／<video>要素のサポート
  • <canvas>要素のサポート
  • セマンティック要素
  • テキスト選択API
  • 位置情報（Geolocation）API
  • XHTML解析のサポート

　以下では、それぞれについて簡単に紹介していこう。

●<audio>／<video>要素のサポート

　HTML5の中でも特に期待されている<audio>タグと<video>タグがサポートされている。<audio>タグは、業界標準のMP3およびAACオーディオを、一方の<video>タグは、業界標準のMPEG-4/H.264ビデオを、HTMLページに埋め込んで再生できる機能を提供する（VP8コーデックがインストールされている場合は、WebMビデオも再生可能）。

　<video>タグは、ページ上のほかの要素（例えばHTMLコンテンツや、画像、SVGグラフィックなど）と合成可能で、しかもHD解像度で60fpsのビデオもフルスクリーンで再生可能なGPUベースの動画再生機能を提供する。GPU利用のため、DXVA（＝DirectXビデオ・アクセラレータ）とハードウェア・ビデオ・デコーダに対応している。

　<video>タグは、下記のようなコードで再生される。

<!DOCTYPE html>

<html>
<head>
<title>&lt;video&gt; tag Sample</title>
</head>
<body>

<video width="480" height="272" autoplay
 src="http://ecn.channel9.msdn.com/o9/mix/10/mp4/CL01.mp4">
ビデオがありません。
</video>

</body>
</html>
<video>タグによる動画再生のサンプル・コード
先頭行の「<!DOCTYPE html>」は、「このHTMLコードがHTML5文書であること」を示す。

●<canvas>要素のサポート

　HTML5の中で注目されている<canvas>タグもサポートしている。<canvas>タグは、動的に2次元ビットマップ画像を描画する機能を提供する。そのレンダリングでは、やはりGPUが活用される。

　実際に<canvas>タグを利用する際には、次のコード例のように（JavaScriptの）Canvas 2D APIと組み合わせて用いる。

<!DOCTYPE html>

<html>
<head>
<title>&lt;canvas&gt; tag Sample</title>
<script type="text/javascript">
<!--
function drawCanvas() {
  // 描画コンテキストの取得
  var cvs = document.getElementById('sample');
  if (cvs.getContext) {
    var ctx = cvs.getContext('2d');

   // 青色の円を描画
   ctx.beginPath();
   ctx.fillStyle = "rgb(0, 162, 232)";
   ctx.arc(98, 73, 70, 0, 2*Math.PI, true);
   ctx.fill();
  }
}
//-->
</script>
</head>
<body onload="drawCanvas()">

<canvas id="sample" style="background-color: yellow;">
ブラウザが<canvas>タグをサポートしていません。
</canvas>

</body>
</html>
<canvas>タグによるビットマップ画像描画のサンプル・コード

　これを実行すると、次の画面のようになる。

<canvas>タグによるビットマップ画像描画の実行例

●セマンティック要素

　IE9では、HTML5の新しいセマンティック要素（＝文書構造上の意味を持つタグ）もサポートしている。具体的には、下記のようなタグがサポートされている。

  • <article>タグ： 記事を示す。
  • <header>タグ： ヘッダを示す。
  • <nav>タグ： ナビゲーションを示す。
  • <hgroup>タグ： セクションの見出しを示す。
  • <section>タグ： セクションを示す。
  • <footer>タグ： フッタを示す。
  • <aside>タグ： 補足情報を示す。
  • <figure>タグ： 図表を示す。
  • <figcaption>タグ： 図表のキャプションを示す。
  • <mark>タグ： このタグで囲んだテキストは、ハイライト表示される。

　これらのセマンティック要素は、例えば次のような形で用いる。

<!DOCTYPE html>

<html>
<head>
<title>セマンティック要素 Sample</title>
</head>
<body>

<article>

  <header>
   <h1>セマンティック要素の使い方</h1>
   <p>セマンティック要素の使い方を説明します。</p>
  </header>

  <p>記事のテキストを記述します。</p>

  <section>
    <h2>1つ目のセクション</h2>
    <p>このセクションに含まれるテキストを記述します。</p>
  </section>

  <section>
    <h2>2つ目のセクション</h2>
    <p>このセクションに含まれるテキストを記述します。</p>
  </section>

  <footer>
    フッタを記述します。
  </footer>

</article>

</body>

</body>
</html>
セマンティック要素を含むHTMLコードのサンプル

●テキスト選択API

　テキスト選択APIとは、ユーザーによるテキストの選択を取得・操作するための機能である。今回サポートしているのは、下記の3つの機能だ。

（1）getSelection関数： windowオブジェクトに対するSelectionオブジェクトを返す。Selectionオブジェクトは、現在選択されているテキストを表す。
（2）selectionStartプロパティ： 現在選択されているテキストの開始位置を取得／設定する。
（3）selectionEndプロパティ： 現在選択されているテキストの終了位置を取得／設定する。

　次のコードは、getSelection関数の利用例だ。HTMLページ上の任意のテキストを選択した状態で、［test］ボタンをクリックすると、その選択テキストがメッセージボックスに表示される。

<!DOCTYPE html>

<html>
<head>
<title>Text Selection API Sample</title>
</head>
<body>
Please select this text and click button.

<input type="button" value="test"
  onclick="alert(window.getSelection().toString())" />

</body>
</html>
テキスト選択APIのサンプル・コード

●位置情報（Geolocation）API

　位置情報APIとは、IE9が実行されているPCの現在の地理位置情報に、Webアプリケーションからアクセスするためのものである。その位置情報に基づき、例えば地図上に吹き出しを表示したり、現在地の天気予報を自動的に表示したりするような使い方が考えられる。ただし、（スマートフォンではない）PC上では位置情報が取得できないケースが普通だと考えられるので、あまり出番がないかもしれない。

　下記のコードを実行すると、位置情報APIを用いて現在の緯度／経度をWebページ上に表示する。

<!DOCTYPE html>

<html>
<head>
<title>Geolocation API Sample</title>
</head>
<body>
<script type="text/javascript">
<!--

if (window.navigator == null) {
  alert("Navigatorが見付かりません。");
}
var gl = window.navigator.geolocation;
if (gl == null) {
  alert("Geolocationをサポートしていません。");
}
var id = gl.watchPosition(successCallback, errorCallback);

function successCallback(position)
{
  document.write("現在の緯度／経度は<b>「"
    + position.coords.latitude + "／" +
    + position.coords.longitude + "」</b>です。");
  window.navigator.geolocation.clearWatch(id);
}

function errorCallback(error) {
  alert("エラー・コード：" + error.code);
}

// -->
</script>
</body>
</html>
位置情報（Geolocation）APIによる現在地取得のサンプル・コード

●HTML解析の改善

　HTML5仕様の草稿に説明されている挙動に限りなく沿うように、HTML解析処理が改善されている。具体的にはジェネリック要素の取り扱いなどがHTML5仕様に変更されている。

　ジェネリック要素とは、未定義で独自のタグのことである。IE8まではこれらのタグは無視されていたが、IE9からは解析され、CSSとの関連も正しく反映される。例えば、下記の<mytag>タグは、正しくCSSが適用される。

<!DOCTYPE html>

<html>
<head>
<title>Generic Element Sample</title>

<style type="text/css">
mytag { color: red; }
</style>

</head>
<body>

This is a <mytag>Generic Element</mytag>.

</body>
</html>
ジェネリック要素のサンプル・コード

●XHTML解析のサポート

　MIMEタイプが「application/xhtml+xml」のドキュメントを解析するときには、XHTMLコードとして解析するようになる。

　続いて、CSS3対応を説明しよう。


　INDEX
　 特集：Web制作者＆開発者のためのIE9概説（前編）
　 Internet Explorer 9正式版レビュー
　   1．Webサイトを「互換モード」で表示させるには？
　   2．「ピンで固定されたサイト」や「ジャンプ・リストのタスク定義」
　   3．新JavaScriptエンジンによる高速化
　
　 特集：Web制作者＆開発者のためのIE9概説（後編）
　 Internet Explorer 9正式版のHTML5／CSS3／SVG対応
  4．HTML5対応
　   5．CSS3対応
　   6．SVG対応／そのほかの新機能

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH