次の方法で共有


4.11 Internet Explorer 8 の標準準拠 Windows 7 Only

4. 新機能や機能変更に伴う互換性問題

この章では、以下のような新機能や機能変更に伴う、互換性問題について紹介します。

IE 8 は HTML や CSS の標準に準拠することを重視して開発されました。これまでも、基本的には W3C が定める標準規格を基に作成されていましたが、解釈にずれがあったり、独自の仕様が追加されていたりしたため、ブラウザー間で表示が異なるケースがありました。そのため、Web 開発者はブラウザーごとに CSS を記述するといった必要がありました。IE 8 は標準規格に厳格に準拠しているため、相互運用性や保守性を高めることができます。

その一方で、これまでの IE 7 で表示できた Web ページが、IE 8 ではレイアウトやデザインが崩れてしまう可能性があります。そこで IE 8 で IE 7 との互換性を保つために、以下の回避方法と解決策が考えられます。

  1. IE 8 標準に準拠した実装にページを書き換える
  2. X-UA-Compatible を指定する
  3. IE 8 のメニューから「互換表示でイントラネットを表示する」設定を利用する
  4. IE 8 の互換表示リストを利用する
  5. ユーザーに IE 8 の互換表示ボタンを押してもらう

これらの方法のうち、1 と 2 はサイト側、つまり開発者や管理者がおこなう設定です。一方、3 から 5 は、ユーザーがおこなわなければならない設定や操作です。つまり、3 から 5 は、ユーザー任せになってしまうため、ユーザーがその機能を知らなければ、ページは正しく表示されないままになってしまいます。そこで、サイト管理者・開発者は 1 と 2 をおこなう必要があります。

1 は 開発者が Web ページを IE 8 対応に完全に書き換えるものです。最終的にはこれが解決策となりますが、容易ではありません。一方、2 は IE 7 との互換性を保つための設定です。設定ベースなので容易にできるため、IE 7 対応のページを早急に IE 8 上でも表示できるようにしたい、といった場合には適切な回避策といえます。このドキュメントは、2 について詳細に取り上げます。

図 4-31: サイト側の設定とユーザー側の設定・操作

図 4-31: サイト側の設定とユーザー側の設定・操作

  • IE 8 標準に準拠した実装にページを書き換える

    IE 8 では以下の標準テクノロジに準拠しています。IE 8 では、「IE に対応した Web ページ」というよりも、「標準に準拠した Web ページ」を意識して開発することになります。

    • CSS 2.1
    • DOM の標準
    • HTML の標準
    • Acid 2 テスト対応
  • IE 8 のメニューから「互換表示でイントラネットを表示する」設定を利用する

    企業内の Web アプリケーションの対応を容易にする機能です。
    IE 8 には「互換表示設定」というメニューがあります。このメニューによって表示されるダイアログで、「互換表示でイントラネットサイトを表示する」を選択します (既定で有効)。これにより、イントラネットのサイトは IE 7 互換モードで描画されるようになるため、IE 7 で表示できた企業内のサイトが正しく表示されるようになります。

    図 4-32: 互換表示でイントラネットサイトを表示する

    図 4-32: 互換表示でイントラネットサイトを表示する

  • IE 8 の互換表示リストを利用する

    IE 7 互換モードで表示したいサイトをあらかじめ登録しておくことができます。ここに登録しておくことで、常にそのサイトに対しては IE 7 互換モードでアクセスすることができます。

    また、「マイクロソフトからの更新された Web サイト一覧を含める」を有効にしておくと、よく利用されている有名なサイトに対しては、Microsoft が管理している IE 7 で表示できるサイトのリストを自動的に適用することができます。

    図 4-33: 互換表示リストに追加

    図 4-33: 互換表示リストに追加

  • ユーザーに IE 8 の互換表示ボタンを押してもらう

    表示したページが崩れていた場合、ユーザーはアドレスバーの右側に表示される「互換表示」ボタンをクリックすることで、手動で IE 7 互換モードに切り替えることができます。

    図 4-34: 互換表示ボタン

    図 4-34: 互換表示ボタン

ページのトップへ


これまでの IE の各バージョンの描画モード

IE 5 から IE 7 までの IE には、以下の描画モードがありました。

  • IE 5

    IE 5 では、IE 独自のクアークスという描画モードが使われていました。

    図 4-35: IE 5 の描画モード

    図 4-35: IE 5 の描画モード

  • IE 6

    IE 6 以降、標準化が重要視されたため、「IE 6 標準モード」が追加されました。また、従来のページも表示できなくてはいけないため、「クアークスモード」もサポートされていました。そして、表示するページによってモードを切り替えていました。

    図 4-36: IE 6 の描画モード

    図 4-36: IE 6 の描画モード

  • IE 7

    IE 7 では、クアークスモードはそのまま搭載され、標準モードが IE 7 の CSS 用にバージョンアップされました。

    図 4-37: IE 7 の描画モード

    図 4-37: IE 7 の描画モード

このように、IE 6 と IE 7 では、クアークスまたは標準の 2 つのモードがサポートされていました。そのため、クアークスか標準かが分かれば、適切に描画モードを分けることができました。

ページのトップへ


これまでの IE の DTD 判別ロジック

IE 5 から IE 7 では、クアークスモードで描画するか、標準モードで描画するかは、DTD (Document Type Definition) を使用して設定します。例えば、以下はクアークスモードで描画される DOCTYPE 設定の一例です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

また、以下の DOCTYPE は標準モードで描画される一例です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

DOCTYPE の設定の詳細は、付録「描画モード切り替え表」を参考にしてください。

この DTD の設定には、図 4-38 のような明確な判別ロジックがあり、これによって適切な描画モードが選択されることになります。

  1. コンテンツを読み込んだときに、DTD が未定義だった場合は、IE 6 よりも前のコンテンツであると判断され、クアークスモードで描画されます。
  2. DTD が定義されていて、XML や XHTML の宣言がある場合は、標準モードが適用されます。
  3. DTD が定義されていて、XHTML 4.0 および標準適用条件を満たしている場合も標準モードが適用されます。
  4. 上記のいずれの条件にも当てはまらない場合は、クアークスモードが適用されます。

図 4-38: IE の DTD 判別ロジック

図 4-38: IE の DTD 判別ロジック

ページのトップへ


IE 8 の描画モード

IE 5 から IE 7 とは異なり、IE 8 では 3 つの描画モードが搭載されています。クアークスモードと IE 7 標準モード、そして IE 8 標準モードです。2 つの標準モードをサポートしているのは、IE 7 と IE 8 の描画には差異があるからです。IE 7 用に作成されたページが、IE 8 で正しく表示されない可能性があるため IE 7 の互換モードが用意されています。

DTD で判断される部分 クアークス系 標準系
適用される描画モード クアークスモード IE 7 標準 モード IE 8 標準 モード
対応 CSS MS-CSS 標準 CSS (IE 7) 完全標準 CSS

どの描画モードが適用されるかは、IE 7 と同様、まずは DTD によって決まります。つまり、ここでクアークスか標準かが決まります (図 4-39)。標準系だった場合、既定では IE 8 の標準モードで描画されます。そして、IE 7 の互換指定があった場合にのみ、IE 7 標準モードが使用されます。そのため、IE 8 標準モードで表示したときに問題があるページでは、IE 7 の互換指定をしなければなりません。

図 4-39: IE 8 の描画モード

図 4-39: IE 8 の描画モード

ページのトップへ


X-UA-Compatible による IE 7 互換モードへの切り替え

IE 8 で IE 7 の互換モードで描画する必要があるときには、X-UA-Compatible 互換モードスイッチを指定します。この設定は、以下のいずれかの方法で設定します。

  • HTTP ヘッダーによる指定

    HTTP ヘッダーに「X-UA-Compatible: IE = EmulateIE7」という値を含めます。この方法を使用すると、Web サイト単位やフォルダー単位など、まとめて互換モードスイッチの指定をすることができます。IIS の管理ツールを使用して以下の手順で設定します。

  1. [コントロール パネル]-[システムとセキュリティ]-[管理ツール]-[インターネット インフォメーション サービス (IIS) マネージャー] を起動します。

  2. 設定したい Web サイトやフォルダーを選択し、[HTTP 応答ヘッダー] をダブルクリックします。

    図 4-40: IIS 管理ツール

    図 4-40: IIS 管理ツール

  3. 真ん中のペインを右クリックし、[追加] を選択します。

    図 4-41: HTTP 応答ヘッダー

    図 4-41: HTTP 応答ヘッダー

  4. 「カスタム HTTP 応答ヘッダーの追加」で、名前として「X-UA-Compatible」、値として「IE = EmurateIE7」を設定し、「OK」ボタンをクリックします。

    図 4-42: カスタム HTTP 応答ヘッダーの追加ダイアログ

    図 4-42: カスタム HTTP 応答ヘッダーの追加ダイアログ

    IIS 管理ツールでの設定により、Web.config に以下のタグが追加されます。直接 Web.config にこの設定を追加してもかまいません。

    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
       <system.webServer>
          <httpProtocol>
             <customHeaders>
                <add name="X-UA-Compatible" value="IE = EmurateIE7" />
             </customHeaders>
          </httpProtocol>
       </system.webServer>
    </configuration>

  • META タグによる指定

    ファイル単位で設定をしたいなら、コンテンツ (HTML ファイル) に直接 以下のような META タグを追加する方法もあります。

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

    なお、HTTP ヘッダーによる指定と、META タグによる指定が同じコンテンツに対しておこなわれた場合は、META タグの設定値が優先されます。

ページのトップへ


X-UA-Compatible の設定値

X-UA-Compatible では、以下の表のような値を設定することができます。

適用されるモード
IE = 5 クアークスモード
IE = 7 IE 7 標準モード
IE = EmulateIE7 IE 7 標準/クアークスモード (DTD によって切り替え)
IE = 8 IE 8 標準モード
IE = EmulateIE8 IE 8 標準/クアークスモード (DTD によって切り替え)
IE = edge 最新モード

「IE = EmulateIE7」は、「IE 7 と同様の動作をする」という意味です。つまり、DTD の設定によって標準モードかクアークスモードかが切り替わります。そのため、今まで IE 7 で表示できていたページは IE 8 でも表示できることになります。「IE = EmulateIE8」も同じです。DTD に依存することになります。

「IE = edge」は、最新モードで表示するための設定です。つまり、IE 8 であれば IE 8 の標準モードで、そして今後 IE の新しいバージョンがリリースされた場合には、その最新バージョンでで表示されることになります。

現在のモードを知るためには、document.documentMode プロパティを使用します。IE のアドレスバーに以下の JavaScript を入力すると、現在のプロパティ値を表示することができます。

javascript:alert(document.documentMode)

図 4-43: documentMode プロパティの確認

図 4-43: documentMode プロパティの確認

図 4-44: documentMode プロパティの値表示

図 4-44: documentMode プロパティの値表示

各モードの戻り値は以下の通りです。

モード
クアークスモード 5
IE 7 標準モード 7
IE 8 標準モード 8

ユーザー エージェント文字列は、Web サーバーにレポートされるブラウザーの ID です。Web アプリケーション開発者は、ユーザーエージェント文字列を使用して、クライアントが使用しているブラウザーの種類を検出することができるため、ブラウザーの種類ごとにコンテンツを変えたい場合に役立ちます。ユーザーエージェント文字列を表示するためには、navigator.userAgent プロパティを使用します。IE のアドレスバーに以下の JavaScript を入力することで確認できます。

javascript:alert(navigator.userAgent)

図 4-45: userAgent プロパティの確認

図 4-45: userAgent プロパティの確認

たとえば、IE 8 では、図 4-46 のようなユーザー エージェント文字列を渡します。

図 4-46: IE 8 のユーザーエージェント文字列

図 4-46: IE 8 のユーザーエージェント文字列

図 4-46 の「MSIE 8.0」はブラウザーのバージョンです。この値は IE 7 を使用している場合は「MSIE 7.0」です。また、IE 8 の IE 7 互換モードの場合にも同じく「MSIE 7.0」が返されます。これだと、本当の IE 7 なのか、互換モードの IE 7 なのかを区別することができません。そこで、役に立つのが「Trident/4.0」です。IE 8 の場合には、このユーザーエージェント文字列が追加されています。

ユーザーエージェント文字列の詳細は、以下のサイトをご覧ください。

https://msdn.microsoft.com/ja-jp/library/ms537503.aspx

ページのトップへ


段階的なサイト互換性の実現

Web サイトで IE 7 から IE 8 に移行する際には、図 4-47 のようなプロセスで実行します。

  1. IE 7 で表示できたページが IE 8 で表示できなくなってしまった場合、短期的な対応としては IE = EmurateIE7 を設定し互換性を保ちます。
  2. IE 8 のIE 7 互換モードで正しく表示されるかどうかをテストします。
  3. 将来的には、IE 8 標準に対応するようページを書き換えます。
  4. IE = EmurateIE8 を設定し、IE 8 標準モードで表示されるようにします。これが最終的な互換性問題の解決策です。

図 4-47: 段階的なサイトの互換性実現

図 4-47: 段階的なサイトの互換性実現

 

ページのトップへ