既存のWebサイト・システムがIE11で動作しない場合、ユーザエージェントの観点では以下の何れかで対策が可能です。
- navigator.userAgent文字列からの判定
- HTMLドキュメント内から、互換性モードの操作
上記の対策はどちらも、"課題"があります。
近年のWeb開発/制作の指針は、ユーザエージェントによる動作の切り替えではなく、Webブラウザの持つ機能による切り分けが推奨されています。あくまでここに書かれている対策は、既存資産を最小のコストで動作可能にするためのものです。
新規の開発/制作では、この記事を参考に対策して下さい。
1. navigator.userAgent文字列からの判定
IE11のユーザエージェントを、JavaScriptの「navigator.userAgent」から取得した場合、HTTPリクエストヘッダから取得するよりも多くの情報が得られます。しかし判定で利用する情報は、HTTPリクエストヘッダの時と変わりません。
▼IE10
Mozilla/5.0 (Compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)
▼IE11
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; NP06; rv:11.0) like Gecko
IE10まではMSIEの文字列とその直後の数字で、Webブラウザ・バージョンの判定ができていました。多くのサービスが、判定にはこの文字列を利用しているはずです。しかし、IE11からは「MSIE」の文字列が無くなり、バージョンを表す数字も削除されてしまいました。
ただし、Tridentというブラウザエンジンを判断する情報は残されています。また、新しく「rv:11.0」というバージョンを表す別の情報が追加されています。
注意が必要なのは、IE10までの「MSIE 10.0」の「10.0」の箇所は、互換性モードを利用した際にどのモードかに応じて変化しました。例えば、IE7互換モードであれば、「MSIE 7.0」といった具合にです。
しかし、IE11から追加された「rv:11.0」という情報は、互換モード動作時も同じ「rv:11.0」のままです。IE11をIE10の互換モードで動かしても「rev:11.0」という文字列は変わりません。
つまりIE11では、使っているレンダリングエンジン(Trident)であることの判定、どのバージョンのIEを使っているかという情報までは確認できても、互換性モードが有効な時にどのバージョンの状態で動作しているかまでは確認できません。
これらを踏まえたIEの判定、バージョンの判定は以下の通りです。
// IEであるか否かの判定 var isIE = false; // IEか否か var version = null; // IEのバージョン var ua = navigator.userAgent; if( ua.match(/MSIE/) || ua.match(/Trident/) ) { isIE = true; version = ua.match(/(MSIE\s|rv:)([\d\.]+)/)[2]; }
上記のスクリプトを、Webブラウザの設定やHTTP Responseヘッダ、ActiveDirectoryなど他の設定手段を無視して確実に動作させるには、HTMLドキュメント内で以下の設定が必要です。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
そもそもですが、本仕様はIE12まで継続されるかも不明です。Microsoftがこの手の実装を排除する指針である以上、ユーザエージェント周りにどのような変更が行われても不思議ではありません。
なお、上記と類似した実装をjQueryでも提供されています。状況によっては、利用してみるのも手でしょう。
▼plugin for the dependency problem
http://plugins.jquery.com/depend/1.1.5/
HTMLドキュメント内から、互換性モードの操作
IEがユーザエージェント文字列に「MSIE」を含んでいた時代の動作をエミュレートさせるよう、互換性モードを変更する制御情報を与えるという手段です。IEが最新でない状態で動作するためあまり良い方法ではありませんが、既存資産を維持する目的であればわりと一般的です。
以下の文字列を、HTMLドキュメントのhead要素内のできる限り序盤に配置することで実現できます。
<meta http-equiv="X-UA-Compatible" content="IE=10">
このmeta要素は、IEがバージョン10以上の場合に、IE10のレンダリングエンジンで動作するように指示するものです。IE10時代はユーザエージェントに「MSIE」の文字列が含まれていたため、これに依存したJavaScriptコードは正常に動作できるようになります。
HTMLドキュメント内でも、Webブラウザの制御を行うもの、例えば上記以外にも＜meta charset="utf-8" /＞のようなタイプのものは、head要素の序盤に配置しないと有効になりません。今回紹介したUA-Compatibleも、割りと敏感な部類に入りますので配置場所には注意して下さい。
たまに新しく開発する業務システムでも、非常に古い互換性モード(Quirksモード)で動作させるような対処をしているという話を聞きます。しかしそれは、良くない対処方法です。今のところMicrosoftはIE5時代からの動作がエミュレートできるような機能を提供し続けていますが、今後それが維持されることまでを保証していません。そもそもですが、新規で開発するものをわざわざ下位互換のために提供した機能で動作させる事自体、ナンセンスであることは言うまでもないでしょう。
新規では最低でも、開発対象バージョンをUA-Compatibleの下限にする程度の対処に抑えましょう。使うこと自体は全く間違いではないのですが、使い所を間違いやすい危険な機能です。入門レベルのプログラマが、ネット上のブログからコピペしてしまうなんていう地雷を含む恐ろしい機能です。ご注意下さい。
