読者です 読者をやめる 読者になる 読者になる

ふろしき.js

Web + Mobile + UX + Performance Tech

Internet Explorer11とユーザエージェント

IE 用語・TIPS SI向け

※この記事は古くなっています。最新情報はこちらです。

IE11もリリースが近いので、検証を始めてみました。

流石にInternet Explorerオンリーイベントを主催した自分が、新しいIEをおさえてないのはまずいので・・・。

あと、このイベントで、MicrosoftMVPの@hebikuzureさんとちょこっと立ち話をしたのですが、その中でIE11はこれまでのIEとは全くもって別のWebブラウザと化してる!なんて聞いていたので、ちゃんと調べておかないとマズいなぁとも思っていた次第です。

まだプレビュー版ですが、現段階でわかったことを少し書いてみます。
今回はまず、「ユーザエージェント」周りを。

「運用」「動作テスト対応」はあまり変わらないかもしれない

エンタープライズを担いでるため、他のモダンブラウザとはシチュエーションが異なり長期サポートが求められるIEですが、バージョンアップの頻度が上がり、サポートしなくてはいけないブラウザ数も増えて、Microsoft側の維持コストも膨れ上がっていることでしょう。しかし、Microsoftは今のところN-1なサポートは変えると言っていないため、最大のメリットとも言える長期間サポートはもう暫くは継続されるように思います。

また、Tridentエンジンもバージョンアップしていますが、Windows機能との連携、例えばActive Directory連携などはこれまで大きく変更しようという流れにはなっていないようです。

「運用」はこれまで通りという印象です。

IEは相変わらずOSへの依存性が強いので、他のモダンブラウザと違って常に最新版だけが利用されるという前提にはならないでしょう。2012年からIEは自動アップデートにシフトし、コンシューマ向けは最新が入りやすいようには思えますが・・・

f:id:furoshiki0223:20130922184017p:plain

エンタープライズでは勝手にアップデートをするのはリスクコントロールしにくいので、常に最新とはいきにくいでしょう。したがって、標準ブラウザがあるようなエンタープライズ向けシステムの開発現場的には、「動作テスト」の対応方法があまり変わらないように思えます。

「ユーザエージェント依存の作りこみ」が難しくなった

最近のIEの傾向ですが、IE独自の作りこみをさせないような方向へ向かいつつありました。従来の「バージョンによる作り分け」から近年の「機能の有無による作り分け」へ、プラットフォームベンダであるMicrosoft社も推進しています。そして今回、よりその色がより強くなったように感じます。

具体的には、以下の変更点です。

  1. 「HTTPリクエストヘッダ」からMSIEが消える
  2. 「条件付きコメント」はこれまで通り無視される
  3. 「JavaScriptのAPI」でもMSIEが消える

1. 「HTTPリクエストヘッダ」からMSIEが消える

HTTPリクエストで送信されるユーザエージェントには、IEの方向性みたいなのが読み取れると思っています。実際に比較してみましょう。

▼IE7のユーザエージェントに含まれる情報

  • ブラウザ戦争の名残 : Mozilla/4.0
  • オペレーティングシステムとバージョン : Windows NT 6.1
  • ユーザエージェント情報 : MSIE 7.0
  • IE独自 : SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET 4.0c

▼IE11のユーザエージェントに含まれる情報

  • ブラウザ戦争の名残 : Mozilla/5.0、like Gecko
  • オペレーティングシステムとバージョン : Windows NT 6.1; WOW64
  • ユーザエージェント情報 : Trident/7.0
  • IE独自 : NP06; rv:11.0

ユーザエージェントにMozillaという情報が含まれていますが、これは90年末の第一次ブラウザ戦争時に、ネットスケープ用に作られたWebページを、IEへも送信できるようにするための苦肉の策です。IEはネスケのフリをしていたのです。ChromeやOperaのレンダリングエンジンであるWebKitも同じ動作をしています。

ネットスケープのレンダリングエンジンは「Mozilla」でしたが、今はFirefoxに姿を変え「Gecko」という名称になりました。そして今回、ChromeとFirefoxとの間で起きている第二次ブラウザ戦争の真っ只中、「like Gecko」という新しい情報が追加されました。再びIEは、旧ネットスケープのフリをしようとしているように思えます。

ただし、今回は2000年代のIE6独占時代の反省をしています。「MSIE」というユーザエージェント情報が削除されているのです。また、以前はマネージドコードなどの独自テクノロジーを動作させるための情報がユーザエージェントに含まれていましたが、現在は完全に無くなっています。ここにMicrosoftの、「ユーザエージェント依存の作りこみはもうコリゴリだ」という、考えが読み取れます。

注意すべき点ですが、恐らく多くのWebアプリケーションが、デスクトップとスマホで別の画面を作っているはずです。レスポンシブWebデザインも流行っていますが、それはあくまで企業サイトぐらいに留まっています。ユーザビリティ次第でビジネスが大きく左右される振興メディアやゲームでは、ユーザの環境に合わせたチューニングが重要なので、ユーザエージェントによる切り替えは必須という状況です。

ユーザエージェントによってページの切り替えを行っているサービスは、その判定式を確認しておいた方が良いかもしれません。

2. 「条件付きコメント」が動かない

IE10の時点で既にそうだったのですが、「条件付きコメント」は動作しません。IE10の時と同様に、IEはChromeやFirefoxと区別してロードするCSSファイルを切り分けるという、ユーザエージェント依存の作り込みができなくなりました。

IE独自の作りこみは推奨されていませんが、実態としてレガシーIEが広く普及している以上、レガシーIEに対応することも求められ続けます。Modernizrを使うのが正攻法ですが、どうしてもそうはいかない場合は、以下の方法で記述するのが定石です。

<!--[if lt IE 7]>IE5 or IE6 or Quirksモード<![endif]-->
<!--[if IE 7]>IE7 or IE7互換モード<![endif]-->
<!--[if IE 8]>IE8 or IE8互換モード<![endif]-->
<!--[if IE 9]>IE9 or IE9互換モード<![endif]-->
<!--[if gt IE 9]><!-->IE4以下 or IE10以上 or IE10以上互換モード or IE以外のブラウザ<!--<![endif]-->

最後の行が、条件付きコメント無効の環境下で動作させるハックです。

3. 「JavaScriptのAPI」でもMSIEが消える

JavaScriptAPIの「navigator.userAgent」に格納されている値は、HTTPリクエストに含まれているものよりも豊富で、.NETなどのバージョンも含まれます。ただし、MSIEの文字列は含まれないため、IEかそうでないかの判定が行えません。

▼ IE11のnavigator.userAgent

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

Geckoの文字列が含まれるため、Firefoxと判断されるという指摘もありますが、これは正確とは言えません。

多くの場合、ユーザエージェントの判定は以下のようなJavaScriptで行われているように思えます。

agent = navigator.userAgent.indexOf("Firefox");
if (agent != -1)

これは、Firefoxの文字列のすぐ後にバージョン番号が含まれることがあるからでしょう。ちなみにFirefoxでは、Geckoの文字列の後ろは20100101という、あまり意味のない情報です。これを使ってどうこうしようというWebアプリやJSライブラリは無いのでしょうから、誤動作のリスクは低いように思えます。

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0

IE11でもIE判定をする方法

IE11で全くユーザエージェントが使えないかというと、そういうわけではありません。IEには互換モードというものがあり、以下のようなメタ情報をヘッダ要素の上部へ追加すると、レガシーIEと同様に動作させることが可能です。

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

コンテンツに手を加えたくない場合は、HTTPレスポンスヘッダでも同様のことができます。Apacheだと、.htaccessや設定ファイルのLocationディレクティブへ、以下の設定を加えれば良いでしょう。

Header set X-UA-Compatible “IE=5"

この方法は、既存の資産を維持するためのみに利用して下さい。新規開発では、決して推奨される方法ではありません。

上記の設定を追加すると、IEは「Quirksモード」と呼ばれる、古いIEをエミュレートするための機能が有効になります。この機能は、あくまで新しいIE上で古いWebシステム/コンテンツを利用できるようにするための機能です。ActiveXやCSS Expressionsのような、現在では推奨されずサポートもされないような機能を、次の更改まで維持するために提供されたものです。

エンタープライズだと、古い方法を好む人もいますが、IE6時代のWebブラウザ依存の作りこみは、フロントエンドのライフサイクルを縮めたり、IEのバージョンアップを困難にし移行コストを増やす原因にもなります。

利用には、細心の注意を払って下さい。

広告を非表示にする