FC2ブログはスマホ用テンプレートでも「X-UA-Compatible」を設定しよう

Internet Explorer 10

FC2ブログのスマートフォン用テンプレートをいじっていたら、なぜかIEだけCSSのメディアクエリ（Media Queries）が効かないという現象が発生した。最初は単にIEが対応してないだけかと思ったのだが、いくらなんでもIE10で効かないのはおかしい。しばらく考えてみると、FC2ブログ + IEという特殊な環境でのみ起きる現象だと気がついた。前にも触れたことがあるが、FC2ブログはHTTPヘッダでIEが互換モードで動くように設定されている。

使われるテンプレートがPC版だろうがスマートフォン版だろうが、FC2ブログのシステムから見れば「ガワ」が違うだけに過ぎない。つまり、テンプレートの種類に関わらずHTTPヘッダでは「IE=EmulateIE7」が送られているはずで、結果としてIEはIE7互換モードで動いてしまうのだろう。古くさいIE7（モード）で動いているなら、メディアクエリに対応してないのも当然というわけだ。

この問題を解決するには、前にも書いたが以下のコードをテンプレートに書き込む必要がある。CSS3を使うような新しいPCテンプレートではすでに常識となってる方法だが、スマートフォン用テンプレートにも設定しておいた方がいいのではないかと思う。

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

スマートフォン（用テンプレート）と直接関係ないIE用のコードがなぜ必要なのかと考える方も多いと思われるが、理由はふたつほどある。

ひとつ目はFC2ブログというかGoogleとの兼ね合いの問題で、PC版のテンプレートが普通に適用されているにもかかわらず、スマートフォン版やモバイル版のページが優先されて検索結果に表示されてしまうことが結構あるからだ。もちろん、その場合は訪問者に表示されるのは「PC向けではない」テンプレートになる。

スマートフォンやモバイル版のテンプレートには、「PC用ページ」へのリンクがあるものが珍しくないが、それでも訪問者がわざわざリンクをクリックしてPCページでブログを見てくれるとは限らない。それならばスマートフォン用のテンプレートで表示されたとしても、CSS3などにまったく対応していないIE7（モード）より、なるべく「適切」に表示されるIE9以降のモードで動作する方が好ましい。

ふたつ目はWindows + IEでも、今後スマートフォンページの表示がおこなわれる可能性が高まってきていることだ。Windows 8の登場により、「Windows + IEのタブレット」というハードが徐々にだが市場に増えてきている。

もちろん、現行のWindowsタブレットは横幅が最低でも1366ピクセルあるため、PC版のテンプレートがほぼそのまま表示できる。しかし、Windows 8.1の登場と前後してその制限は緩和されて、現在は横幅が1024ピクセルのものが発売できるようになっている。さらにサイズも8インチのものが登場としたりと、「小型のWindowsマシン」が今後増えてくることは十分にあり得る。（普通にサイズで考えるなら「Windows Phone」が本命なのだが、こちらは本当に日本で発売されるのか未だに不明となっている。）

タッチパネルで操作するアプリ版のIEでも、今は基本的にPCのテンプレートで表示されるのが普通のようだが、画面が小型化すれば当然スマートフォンと同じUIで表示した方がサイト運営者・閲覧者の両方にとって都合がいい。今はともかくとして、今後も「IE＝パソコン」という関係がずっと続くとは言えないわけだ。そうなれば、今よりずっとスマートフォン用のテンプレートがIEで使われる機会は増えることになる。

以上の理由により、個人的にはスマートフォン用のテンプレートにIE用の対策をしておくのも決して無駄ではないと考えている。今すぐ必要な対策とは言えないが、「時間があるときにやっておく」ぐらいの優先順位でいいからやっておいてもいいのではないだろうか。