開発者が知っておくべきIE9の新機能（2/4）

特集：Internet Explorer 9（プレビュー版）概説

開発者が知っておくべきIE9の新機能

デジタルアドバンテージ　一色政彦
2010/04/09

■2. HTML5対応

　最近、HTML5への注目度が高まっている。特にグーグルが強力に推進している印象のあるHTML5だが、マイクロソフト技術系の.NET開発者も大きな関心と学習意欲を寄せていることが、本サイトの独自調査で明らかになっている。

　では、IEがこれまでHTML5を無視してきたかというと、決してそんなことはない。あまり知られていないかもしれないが、IE8には、DOMストレージ、AJAXナビゲーション、ドキュメント間メッセージング（XDM）、ononline属性やonoffline属性といったネットワーク接続イベントなどのHTML5機能がすでに搭載されている（詳しくは「MSDN：Internet Explorer 8 ― HTML と CSS のサポート」を参照）（※ただし、HTML5の仕様は、現段階ではまだ草稿の状態であり、正式な決定はされていない）。

　マイクロソフトはHTML5サポートをIE9でさらに進め、HTML5仕様からさまざまな機能を追加する予定だ（より多くの機能やタグが、将来のプレビュー更新版で提供予定）。現時点のプレビュー版では、下記のような機能が実装されている。

●テキスト選択API

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

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

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

<html>

<head>

<title>Text Selection API Sample</title>

</head>

<body>

Please select this text and click the button.



<input type="button" value="test"

  onclick="alert(window.getSelection().toString())" />



</body>

</html>

テキスト選択APIのサンプル・コード

●HTML解析の改善

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

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

<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コードとして解析するようになる。

●<audio>／<video>タグのサポート（※現プレビュー版は非対応）

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

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

　<video>タグは、下記のようなコードで再生されるはずだが、筆者が試した限り、現在のプレビュー版では再生できなかった（Chromeでは再生可能）。MIX10の基調講演ではHTML5による動画再生のデモが行われたので、今後のリリースで正式にサポートされるものと思われる。

<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">

There is no video here.

</video>



</body>

</html>

<video>タグによる動画再生のサンプル・コード

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

INDEX
	特集：Internet Explorer 9（プレビュー版）概説
	開発者が知っておくべきIE9の新機能
	1．新JavaScriptエンジン
	2．HTML5対応
	3．CSS3対応
	4．IE9のそのほかの新機能

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

第2回　簡潔なコーディングのために （2017/7/26）
　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
第1回　明瞭なコーディングのために （2017/7/19）
　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
Presentation Translator （2017/7/18）
　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える

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

注目のテーマ

Insider.NET 記事ランキング

本日月間

＠IT

特集：Internet Explorer 9（プレビュー版）概説