特集:Internet Explorer 9(プレビュー版)概説

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

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

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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH