Hebikuzure's Tech Memo

---

How to Use X-UA-Compatible
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible

---

一つ前の投稿で、次期 Internet Explorer では X-UA-Compatible によるドキュメント モードのの指定が無効になることを紹介しましたが、mdern.IE のコンテンツでその X-UA-Compatible の利用方法についての記事がありましたので、私訳して紹介しておきます。

---

X-UA-Compatible の利用方法

Internet Explorer では X-UA-Compatible META タグまたは HTTP ヘッダーを利用して、どのバージョンの描画エンジンでページをレンダリングするかを指定できます。特定のバージョンを指定することも、’IE=edge’ という値を指定して最新のバージョンを指定することもできます。この互換モードの背景となっている考え方は、モダンな標準に対応していない Web サイトやアプリケーションを改修するまでの間も継続して動作させようということと、ユーザーが最新のバージョンのブラウザーにアップグレードできるようにしようということです。

特定のバージョンの互換モードを指定するための最も一般的な方法は、ページの先頭に X-UA-Compatible META タグを挿入することです。これには http-equiv META を利用し、"X-UA-Compatible" 値と content で IE のバージョンを指定します。パーションを ‘IE=edge’ に設定すると、Internet Explorer に最新のエンジンでページをレンダリングし JavaScript を実行するよう指定したことになります。

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

‘IE=edge’ を指定することは最善の方法です。なぜならこれにより Internet Explorer が常に最新のエンジンを利用することが保証されるからです。最新の Internet Explorer には最新のセキュリティ更新と新機能のサポートが含まれています。また最新のバージョンはもっとも高速なバージョンでもあります。

何らかの理由で Web サイトやアプリケーションが最新の標準準拠の動作では問題を生じる場合、以前のバージョンの Internet Explroer を指定することもできます。例えば、アプリケーションがイベント ハンドラーをバインドするのに addEventListener ではなく attachEvent を利用している場合、アプリケーションを改修するまでの間 ‘IE=8′ を指定すればよいでしょう。こうした JavaScript のエラーは F12 開発者ツールのコンソールで確認できるでしょう。ただしこのような問題を残しておくのはアプリケーションにとって決して最善の方法ではありません。アプリケーションがWeb 標準の進歩から大きく取り残されてしまう危険を孕んでいます。こうした互換性は将来にわたってサポートされると思うかもしれませんが、最終的には古いバージョンへのサポートは打ち切られます。

もし X-UA-Compatible META タグを利用するのであれば、ページの HEAD タグの中のできるだけ最上部に配置した方が良いでしょう。Internet Explorer はマークアップの解釈をまず最新のバージョンのエンジンを使って開始します。Internet Explorer は X-UA-Compatible META タグを見つけると、指定されているバージョンのエンジンを使ってやり直します。この動作はブラウザーがコンテンツの解析を中止してやり直すためパフォーマンスに影響します。

よりよい方法は X-UA-Compatible HTTP ヘッダーです。Internet Explorer がコンテンツの解析を開始する前にどのエンジンを利用すればよいか指定するため、応答ヘッダーにディレクティブを追加できます。これは Web サイトのサーバーを構成する必要があります。Internet Information Server では管理コンソールでカスタム HTTP ヘッダーを追加することができます。

また ASP.NET の web.config でカスタム HTTP ヘッダーを追加することもできます。

<configuration>
   <system.webServer>
      <httpProtocol>
         <customHeaders>
            <add name="X-UA-Compatible" value="IE=edge" />
         </customHeaders>
      </httpProtocol>
   </system.webServer>
</configuration>

HTTP ヘッダーは Web アプリケーションのコードでアプリケーションからのレスポンスに追加することもできます。ASP.NET では、AddHeader メソッドを使ってレスポンスにカスタム ヘッダーを追加できます。次のコードはプログラムで X-UA-Compatible ヘッダーを追加する方法を示しています。

HttpContext.Response.AddHeader("X-UA-Compatible", "IE=edge");

X-UA-Compatible は、サイトが最新の標準と互換性が無い場合に、Internet Explorer に以前のバージョンのエンジンの利用を強いるための非常に役立つ指定です。また IE に以前のバージョンの動作を指定できるとは言っても、古いバージョンでのテストは行うべきです。互換モードを実際のバージョンと混同してはなりません。アプリケーションが以前のバージョンでのテストを必要としているのであれば、無料の仮想マシンが Mordern.ie で利用可能です。他にも Modern.ie では、一般的な互換性の問題を識別するための、無料のサイト検査も利用できます。

Web アプリケーションの更新を怠ることの言い訳として、アプリケーションを X-UA-Compatible に依存させてはいけません。細目な更新をすれば単純な変更でアプリケーションの寿命を数年延長できます。X-UA-Compatible による指定は、アプリケーションを更新するまでの間、最新の Internet Explorer で動作させるためのツールです。