Internet Explorer 8開発者向け技術概要

2009 年 3 月 22 日野良

info [at] poop.jphttp://techbank.jp/nora/

免責条項 『 Internet Explorer 8 開発者向け技術概要』をもとに作成しています。

http://msdn.microsoft.com/ja-jp/ie/dd550608.aspx 情報提供を目的としてマイクロソフトによって作成されたドキュメントを私

が個人的にまとめ直したものです。 この資料に記載されている内容により発生しうるあらゆる問題、損害に

対して一切の保障はいたしません。 あくまでも情報提供を目的として作成されたドキュメントをもとに、情

報提供を目的に個人が作成したものであることをご理解の上、ご利用ください。

この資料は、私の個人的な見解であり、私の勤務先の見解ではありません。

上記を理解していただけましたら、再利用・プレゼン使用などに自由に使用して頂いて構いません。

本資料が何らかの事情で公開することがまずい場合は、連絡をいただけましたらすみやかに公開を停止いたします。

2

目次

1. IE8 概要2. 実現可能な相互運用性と互換性3. 迅速で簡単な Web 開発4. 参考情報

3

INTERNET EXPLORER 8 概要

第零章

4

IE82009 年 3 月 20 日リリースWindows XP 、 Vista 、 2008 対応32bit 、 64bit 版

自動アップデートはされない Internet Explorer 8 ブロッカー

ツールキットが提供されている

5

実現可能な相互運用性と互換性第壱章

6

過去との互換性

以前の IE の動作モデルのサポートページ単位でレンダリングモードを選

択できるようになった以前の動作をサポートするか、 WEB

標準に準拠するか選択できる

7

IE8 で選択できるレンダリングモードの種類

Quirks ( クワークス ) モードIE5.5 の頃のレンダリングモード？

IE7 標準準拠モード IE ８標準モード

8

IE8 の既定のレンダリングモード

IE8 標準モードでレンダリングをする

9

レンダリングモードの切替え方法

X-UA-Compatible ヘッダーHTTP 応答ヘッダーhead タグ

<meta http-equiv=“X-UA-Compatible” content=“ 設定値” >–meta タグによる設定は HTTP ヘッダーの設定

に優先する–meta 互換性タグは !DOCTYPE に関わらず必

要なレイアウトモードを指定できる

10

IE8 レンダリングモード切替設定値

互換モード値 レンダリング動作

IE=5 Quirks( クワークス ) モード

IE=7 IE7 標準準拠モード

IE=EmulateIE7 !DOCTYPE 宣言によりモードが決定するQuirks モードの宣言： Quirks モード標準モードの宣言　： IE7 標準準拠モード

IE=8 IE8 標準準拠モード

IE=EmulateIE8 !DOCTYPE 宣言によりモードが決定するQuirks モードの宣言： Quirks モード標準モードの宣言　： IE8 標準準拠モード

IE=edge IE8 と将来の全てのバージョンのブラウザーがサポートする最新の標準を使用。実稼働サイトには非推奨。

11

レイアウトモード

複数のレイアウトモードを搭載

12

Page Content Declaration

レイアウトモード

既知の標準の !DOCTYPE と未知の !DOCTYPE

IE8 標準IE=7IE=EmulateIE7 を宣言している場合

IE7 標準準拠モード

public 識別子 "-//W3C//DTD XHTML 1.0 Transitional//EN"

public 識別子 "-//W3C//DTD XHTML 1.0 Frameset//EN"

public 識別子 "-//W3C//DTD HTML 4.01 Transitional//EN" ( システム識別子を伴う )

public 識別子 "-//W3C//DTD HTML 4.01 Frameset//EN" ( システム識別子を伴う )

“ ほぼ” 標準行の高さを除いてすべてのコンテンツは IE8 標準モード行の高さは、テーブルのセルにイメージが含まれ、かつイメージの周囲には余白が無いことを想定している古い動作のサイトにとっては特に重要です。

IE=7IE=EmulateIE7 を宣言している場合

IE7 標準準拠モード

Quirks モードの !DOCTYPE (!DOCTYPE の無い場合を含む )

Quirks モード

ActiveX ActiveX コントロール管理機能の向上

読み込み場所、方法、許可するユーザの指定管理者権限無しでユーザのプロファイル内へインストールできるようにパッケージする機能

ユーザが悪意のある ActiveX をインストールしたとしても影響は、そのユーザのプロファイル内に限定される

ほとんどの既存の ActiveX コントロールはコードを書き直さずに活用できる

13

ユーザごとの ActiveX 権限

管理者権限の無い標準ユーザユーザ自身のプロファイル内

メリット アカウント制御の効率化悪意のあるActiveXの影響範囲の最小化

使用するには？ ほとんどの既存のActiveXは修正の必要無し ActiveX コントロールのCAVに含まれる INI ファイルの変更の

み 挙動

ActiveX が必要なページ： IE7のように情報バーの表示 インストール範囲：PC全体か自分自身に限定

14

サイトごとの ActiveX悪意のある ActiveX の再利用を防止する防御メカニズムサイトごとの ActiveXコントロールが実行を許可されている場所かど

うかの判定 ActiveX は自身をインストールしたドメイ

ンだけで実行可能 インストール済みの ActiveX

許可されていない Web で実行する情報バーの表示

15

適応型ページズーム

ページのレイアウトを維持したままコンテンツの大きさを変更できる

レイアウト前に各要素を拡大、縮小するテキストとイメージのサイズの変更ページの再構成水平スクロールが非表示になりやすい

16

ズームの影響 フォントとテキスト

フォントサイズの変更フォントサイズは丸められる

12px を 110％にすると 13.2px だが 13px に Fixed 、 auto 、 relative サイズ

絶対単位 (in 、 cm 、 mm)デバイスやフォント依存 (px 、 ex 、 em)

従来通りのサイズ変更– 拡大率200％： 100px は 200px

コンテンツに依存する寸法 (パーセントや auto)サイズは変更されるレイアウトの際に再計算

17

ズーム・例

18

ズーム・デモ

19

デモ

印刷機能の向上印刷媒体に対する機能と制御の拡張 コンテンツの印刷状態を制御できる

page-braek-after ・ page-break-before プロパティの avoid 、 left 、 right 値に対する正しい動作

page-break-inside プロパティwidows プロパティorphans プロパティ

マージン領域や分割すべきでないコンテンツ、その他の指定が可能

20

ファイルアップロードコントロール

input type=file読取り専用に変更参照ダイアログボックスの使用が必須

ファイル名のみの送信「サーバにファイルをアップロードす

るときにローカルディレクトリのパスを加える」の無効

21

ファイルアップロード・デモ

22

デモ

迅速で簡単な WEB 開発第弐章

23

開発ツール

組み込み型の統合開発者ツールF12ツールメニューの開発者ツール

CSS と HTML の編集・デバッグスクリプトのテスト・デバッグパフォーマンス解析DOM の表示と変更レイアウトモードの変更

24

開発者ツール・デモ

25

デモ

Ajaxナビゲーション

Ajaxページナビゲーションを使用しなくて

もページのコンテンツを更新できる戻る、進むなど履歴系に問題

window.location.hash プロパティで記録

26

Ajaxナビゲーション・デモ

デモ27

接続イベント

ネットワーク接続の確認HTML5 ドラフトNW接続の変化をシームレスに処理で

きるNW が切断されたらローカルキャッ

シュNW に接続したら更新

28

接続イベント・デモ

29

デモ

サニタイジング tostaticHTML

潜在的に実行可能なスクリプトを校正する部分が存在しないか走査

存在する場合は、その文字列を削除 JSON メソッド

ネイティブ動作パフォーマンス向上

JSON.stringfyscriptオブジェクトを JSON ストリングに変換

JSON.parseJSON ストリングを安全に復元

30

MIME処理の変更

MIME sniffing機能ダウンロードしたファイルの Content-

Type を特定する機能互換性維持に必要

標準に準拠しないサーバ対応脆弱性への対応

Upsniff処理の制限(Content-type : image/* が付与されている

ファイルを HTML や Script として処理しない

31

迅速で簡単な WEB 開発第参章

32

アクセラレータ

外部サイトのサービスに任意の Web ページから即座にアクセスできるコンテキスト サービス現在の Web ページ内のデータと関連

した情報を " 参照 "現在の Web ページから別のアプリケーションにコンテンツを "送信 "

33

アクセラレータ・例

ページを移動せずに Web ページ上に重ねて表示できる

34

アクセラレータ

35

デモ

ウェブスライス

HTML注釈を使用WEB ページ内で利用頻度の高いコン

テンツを直接購読できる機能コンテンツが変更されると更新通知を受信できる

一定間隔でポーリングされる推奨の更新間隔を設定できる

メールの受信箱、オークション

36

ウェブスライス

37

デモ

拡張されたクイック検索

検索キーワード候補の表示検索結果の直接表示画像検索

オープン仕様自社サービスの検索も組み込める

自社ポータルの検索

38

ドメインのハイライト表示

訪問中のサイトが目的のサイトかの確認が容易

不正サイト

Extended Validation (EV) SSL 証明書を持つセキュアなサイト

39

参考情報第四章

40

参考情報 Internet Explorer デベロッパー センター

http://msdn.microsoft.com/ja-jp/ie/default.aspx Internet Explorer 8 開発者向け技術概要

http://msdn.microsoft.com/ja-jp/ie/dd550608.aspx Ajax Hands-on Lab

http://code.msdn.microsoft.com/ie8b2ajaxhol Ajax 関係のデモに使用

Internet Explorer 開発チーム ブログ ( 日本語翻訳版 ) http://msdn.microsoft.com/ja-jp/ie/cc709374.aspx

41