(2011/03 : Internet Explorer 9 の新機能についても追加)

こんにちは。 

Web デベロッパー向けに、Internet Explorer 8 (IE 8)、Internet Explorer 9 (IE 9) の新機能の解説したビデオ集があり大変役に立ちますので紹介します (MSDN “How do I” Videos)。

ビデオではサンプル ソース コードも紹介されており、短時間で進化したポイントを学習できるチュートリアル集です。内容 (ビデオ) は英語ですが、以下に各内容のポイントを日本語で説明 (紹介) しておきます。

補足 : Internet Explorer 8 については、新機能のポイントを 「日経ソフトウェア」 2010年03月号にまとめましたので、ご参照ください。

HTML / JavaScript

AJAX Navigation (IE8 -)

従来、Ajax を使用した開発では、中身の情報の遷移に応じたブラウザのナビゲーション (あるいは、ある状態を「お気に入り」として確保しておく、など) が困難でした。IE 8 では document.location.hash を使用して、このナビゲーションが可能です。

Native JSON (IE8 -)

これまでは、JSON.stringify、JSON.parse などの JSON オブジェクトを使用する際には専用のライブラリ (.js など) を必要としましたが、IE 8 からはこのライブラリがネイティブに (Internet Explorer 組み込みで) サポートされます。ビデオでは、このネイティブ JSON を使用した場合のパフォーマンスの違いも示しています。

getElementById の動作変更 (IE8 -)

IE 8 の getElementById 関数では、id が一致する要素のみが検索され (name ではありません) 、大文字と小文字を区別するマッチング (Case Sensitive) が適用されます。
従来のような曖昧な解釈を回避することができ、ブラウザ間の互換性に対応することができます。

getAttribute & setAttribute の動作変更 (IE8 -)

こちらも getElementById 同様、ブラウザ互換に関する対応機能です。従来の IE では、例えば、DOM 属性 (DOM attribute) とコンテンツ属性 (content attribute) が異なる場合に getAttribute 関数が null を返したり、setAttribute 関数が属性名の大文字と小文字を区別して (Case Sensitive) 値を設定できない、などの動きをしていました。IE 8 モードの動作ではこれらの動きが改善されています。

DOM Storage (IE8 -)

DOM Storage は、クッキーのように、セッション/ドメインに基づくクライアントデータの保管が可能なテクノロジーです。この DOM Storage について、その (クッキーと比べた) 利点・特徴と活用方法について説明しています。

Networking Events (IE8 -)

HTML 5 の仕様の一部であるネットワークイベント (onOnline、onOffline、onHashChange の各イベント) と、このイベントを使用した実際の JavaScript のサンプルを説明しています。ネットワーク イベントと DOM Storage を使用して、オフラインに対応した柔軟なアプリケーションを作成できます。

Cross Document Messaging (xdm) (IE8 -)

マッシュアップのアプリケーションなどを想定し、フレーム (iframe 含む) 間のドキュメントでメッセージの Post / Receive をおこなうことが可能な Cross Document Messaging (xdm) の機能 (およびセキュリティの考え方) について説明しています。

Cross Domain Requests (xdr) (IE8 -)

IE 8 から可能な、Ajax アプリケーションなどのクロス ドメイン呼び出し (ブラウザ上からロードされたサーバーとは異なるサーバーへのリクエスト) の方法について説明します。注意事項 (制限など) もありますので、冒頭でこの点についても説明しています。

Circular Memory Leak Detection (IE8 -)

IE 8 では、JavaScript と DOM の間でのメモリ循環参照 (および、これによるメモリー リークの発生) を検知します。ここでは、実際のサンプル コードを使ってこの点を説明しています。

Mutable DOM Prototypes (IE8 -)

IE 8 では、「JavaScript オブジェクト」のように、「DOM オブジェクト」へのプロトタイプ (prototype) と setter / getter プロパティが可能となり、DOM オブジェクトに対する柔軟性と拡張性が向上しています。ここでは、この機能を実際のスクリプトを使ってデモしています。

Data URI (IE8 -)

CSS や img のソース URI としてデータ自体を埋め込む data Uri scheme について説明しています。

Increased Connection Limit (IE8 -)

IE8 では、AJAX の頻繁な利用 (頻繁な非同期通信) などの現在の利用環境を想定し、1 ホストについての最大同時接続数が 6 に強化されています。ここでは、このメリットを説明し、実際のイメージ ファイルのロードによってそのメリットを確認しています。

Authenticated RSS Feeds (IE8 -)

IE 8 で購読がサポートされている Authenticated RSS Feeds について、その概念や、IE 8 を使ったユーザーID/ パスワードの設定方法などについて説明しています。IE 8 では、NTLM 認証、Kerberos 認証、HTTP Authentication (Basic 認証など) , クッキーベースの認証をサポートします。

ARIA (Accessible Rich Internet Applications) (IE8 -)

IE 8 は、W3C の標準である Accessible Rich Internet Applications (WAI-ARIA) をサポートします。このビデオでは、この ARIA サポートについて実際のタグをみながら解説をおこないます。
ARIA は、JavaScript、DHTML が頻繁に使用される現在において、スクリーンリーダー (読み上げブラウザ) や、キーボードのみのアクセスなどを可能にするために検討されているアクセシビリティのための標準です。

Developing Securely with Cross-Site Scripting (XSS) Filter (IE8 -)

IE8 は、reflection (type-1) のクロスサイト スクリプティング (= XSS。例えば、入力された引数をそのままブラウザ上に表示する Web アプリに対して、悪意のある JavaScript を引数に渡すようなケースです) を防止します。このビデオは、IE 8 のこのフィルターのメカニズムに関する説明 (および留意点の説明) をおこない、実際のデモをおこなっています。(推奨できませんが、XSS フィルターはオフにすることも可能です。)

Video (IE9 -)

IE 9 からサポートされている HTML 5 video 要素 (video タグ) を使ったビデオの再生と、そのプログラミングについて紹介しています。Video の再生以外に JavaScript と組み合わせたさまざまな処理が可能で、Test Drive Site にある Video Panorama Demo を例に、実際の動きを見ながら解説します。(このサンプルの中の demo.js が参考になります。)

Audio (IE9 -)

IE 9 からサポートされている HTML 5 audio 要素 (audio タグ) を使ったオーディオ再生と、このプログラミングについて紹介しています。Test Drive Site にある IE Beatz Demo を例に、実際の動きを見ながら解説します。(このサンプルの中の demo.js が参照になります。)

Canvas (IE 9-)

IE 9 からサポートされている HTML 5 canvas 要素 (canvas タグ) を使って、ゲームなどに代表される描画やアニメーション処理について解説します。さらに、この canvas に、image 要素や video 要素を組み合わせて、より実践的なアニメーションをおこなう例 (応用例) を紹介します。(全体で 34 分のビデオです。)

Scalable Vector Graphics (SVG) (IE9 -)

IE 9 からサポートされている Scalable Vector Graphics (SVG) を使ったベクトル ベースのグラフィック要素について、その開発方法、デバッグ方法、オーサリング ツールの紹介なども含め解説をおこなっています。(全体で 25 分のビデオです。)

Generated Content (IE8 -)

before:、after:、counter-reset:、counter-increment: などの CSS 2.1 を使用したコンテンツとスタイルの分離を ｢章｣、「節」などに対応した文書作成を例に説明しています。

Box-Sizing and Vertical Text (IE8 -)

CSS の Box-Sizing プロパティは、サイズの指定を従来のようにボーダーまで含めるか (box-sizing: border-box;)、中身のコンテンツまでとするか (box-sizing: content-box;) を指定することができます。また、新しいプロパティ値を使用して、縦方向のテキスト (日本語の「縦書き」ではありません) やそのさまざまなフォーマットも容易に指定できます。

Selectors API (IE8 -)

querySelector 関数や querySelectorAll 関数を使用して、該当の条件の CSS セレクタを持つ要素 (エレメント) や、要素のコレクションを検索し、簡易なルックアップが可能となります。(W3C の仕様に準拠した API です)

IE 9 における CSS 3 の一部サポート (IE9 -)

IE 9 では CSS 3 の一部がサポートされています。IE 9 でサポートされている CSS3 2D Transforms、CSS3 Background and Borders Module、CSS3 border-radius、CSS3 Color Module、CSS3 Fonts Module (Web Open Font Format, WOFF)、CSS3 Namespaces Module などについては、この MSDN ドキュメント (記載されているマークアップなど) が参考になります。(一部のドラフト レベルの機能については、「ms-」プレフィックスが付与されています。)

CSS 3 によるレイアウト (1) / CSS 3 によるレイアウト (2) (IE9 -)

IE 9 で使用可能な CSS 3 Media Queries と、Internet Explorer 10 (IE10) 以降で導入予定の CSS 3 Grid、CSS 3 Flexible Box (Flexbox)、CSS 3 Multi-column を組み合わせた、CSS 3 による Layout 方法全体 (考え方、手法等) について解説しています。(各 21 分のビデオです。)

Taskbar icon / icon overlays (IE9 -)

お気に入り (Favorites) やWindows のタスク バー (Taskbar) への独自のアイコン表示や、アイコンに状態情報などの付帯情報を表示するアイコン オーバーレイ (icon overlay) の表示方法について解説します。(これは、Internet Explorer 固有の機能になりますので注意してください。)

Thumbnail toolbar button (IE9 -)

タスク バー (Taskbar) 上の Internet Explorer の固定サイト (Pinned site) にマウスをホバー (hover) すると表示されるサムネイル (thumbnail) ウィンドウに、ボタンなどの配置されたサムネイル ツールバー (Thumbnail toolbar) を表示 / 処理する方法について解説します。(これは、Internet Explorer 固有の機能になりますので注意してください。)

Jump List アイテムの作成 (IE9 -)

タスク バー (Taskbar) 上の Internet Explorer の固定サイト (Pinned site) で、右クリックをおこなうと表示される Jump List をカスタマイズする方法について解説しています。Jump List にカスタムの Item (Task Item) を表示する方法 (Static Jump List) や、カスタムの Jump List Category の表示方法、JavaScript を使った動的な Jump List Item の表示方法 (Dynamic Jump list) などが可能です。(これは、Internet Explorer 固有の機能になりますので注意してください。)

Add-on (アドオン開発)

Search Suggestions Providers (IE8 -)

ブラウザ右上の検索ボックスに検索候補を提供する検索プロバイダーの動作と、その拡張方法の概念 (XML の記述) について説明しています。(検索プロバイダー、Web スライス、アクセラレータなどのアドオンは、IE 独自の機能です。)

Web Slices (IE8 -)

IE8 のアドオンである Web スライスについて、その開発方法を説明しています。Web スライスは、ページ内の部分的な情報を購読して、(お気に入りバーから) 迅速に購読情報へのアクセスが可能なアドオンです。

Accelerators (IE8 -)

IE 8 のアドオンであるアクセラレータについて、その開発方法を説明しています。アクセラレータを使用すると、翻訳ページの呼び出し、検索ページの呼び出し、など、Web ページ上から項目を選択して関連するページやプレビューを呼び出せるアドオンです。

Compatibility (互換性)

Conditional Comments (IE8 -)

IE 5 からサポートされている条件付きコメント (例: <!–[if lt IE 6]> など。ブラウザバージョンによる処理の分岐などに使用されます) について説明しています。

Internet Explorer 8 Meta Tag (IE8 -)

IE 8 では、上述のような多くの標準に対応する一方で、これまでの Web アプリケーションに対応して、IE 7 モードでの表示などもサポートしています。ここでは、この互換性 (Compatibility) のための Meta タグ (X-UA-Compatible) の設定について説明をおこなっています。(ここまでの上記のビデオの中でも使用されていますので、ここまでのビデオを見てきた開発者は、特にこのビデオを見る必要はありません)

Document Compatibility Mode – IIS 7 (IE8 -)

IIS 7 の IIS (Internet Information Services) 管理マネージャを使用して互換モード (X-UA-Compatible ヘッダー) を設定する方法について説明しています。(IIS 7 では、設定した内容は統一的に構成ファイルに記述されるため、直接、web.config などを変更して対応させることも可能です。)

Document Compatibility Mode – IIS 6 (IE8 -)

同じく、IIS 6 の IIS 管理マネージャを使用して互換モード (X-UA-Compatible ヘッダー) を設定する方法について説明しています。

Document Compatibility Mode – Apache (IE8 -)

同じく、Apache の構成 (モジュール) を変更して互換モード (X-UA-Compatible ヘッダー) を設定する方法について説明しています。

その他 ユーティリティ (Utilities)

Developer Tools (IE8 -)

IE 8 で標準搭載されている「開発者ツール」の使用方法 (HTML の構成の確認、タグの検索、キャッシュの制御、など) について解説しています。

Debugging JavaScript (IE8 -)

同じく、開発者ツールを使用した JavaScript のデバッグ方法について解説しています。

JavaScript Profiler (IE8 -)

同じく、開発者ツールに含まれる JavaScript プロファイラー (JS プロファイラー) の使い方と機能について説明しています。

Performance object (IE9 -)

IE 9 では、W3C Web Timing に準拠した Performance オブジェクトが提供されており、F12 開発者ツールなどと合わせて、テスト / 評価の目的で使用できます。上記の MSDN ドキュメントでは、このオブジェクトで提供されているメンバー / プロパティーなどが記載されています。
また、Test Drive Site にある Navigation Timing Demo で、応用的な使い方のデモ (および、スクリプト) を確認できます。

InPrivate Browsing (IE8 -)

共有エリアや家庭などでプライバシーを保持する InPrivate ブラウジング (履歴を残さないブラウジング機能) について、その機能・特徴の説明と、実際の動作について解説しています。