僕はWindowsをプライベート＆仕事で使ったことはもちろんありますが、買ったことは一度もありません。理由はMac（OSX）の方が圧倒的にシンプルで便利だからです。
そんな僕はIEの存在をないがしろにしがちでした。最近ふと「IE8以下対応してねぇ・・。」と気付き、Safariのユーザーエージェントで確認してみたら見事にバグっていました（笑）
WindowsにはIE（インターネットエクスプローラー）という標準ブラウザ（web browser）が用意されているのですが、Web制作の現場では嫌われているのをご存知でしょうか？
一般的には「どれも同じ」だと思われがちなブラウザは実は得意不得意があり甲乙付けがたいのですが、IEに関しては不得意がありすぎるんですね。
最新のIE10や9はまだマシなのですが、IE7,8の為にある程度の施工をしなくてはなりません。IE6対応になるとWeb制作会社では追加料金も発生するぐらいです。
動きをつけるためにjQueryを利用しているのですが、IE対応の為にやるべきことがあったのでメモしておきます。
スポンサーリンク
基本のIE対応コード
<!-- IE8+に対して「IE=edge」と指定することで、利用できる最も互換性の高い最新のエンジンを使用するよう指示できます
参考: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- IE8以下用に2つのスクリプトを記述
html5shiv.js: IE8以下にHTML5の要素を認識するようにさせる
respond.js: IE8以下にMedia Queriesの代替え機能を提供 -->
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
これはおまじないですね。基本はIE=edgeをheadの一番上の方に書き、CSSの後にIE8対応の記述を書いておけばOKです。
WordPressでjQuery使う際に気をつけること
The Art of WordPress / mkhmarketing
WordPressでは自動でjQueryが読み込まれる仕組みになっており、自分で書いてしまうと重複してしまう問題があります。
最近までよくわかっていなかったので、とりあえず自分で書いていました。
試しにWordPressのjQueryの読み込みをやめ、自分でjQueryを読み込んだところ、簡単に商品を紹介できるAmazon JSというプラグインが動作しなくなったのでダメでした。
Amazon JSはどうやらWordPress内のjQueryで動作している？ようで、バージョンを変えても動きませんでしたが、試行錯誤の結果、今回紹介するコードで動きました。
とにかくWordPressではjQueryは自分で書くと重複してしまうので気をつけることと、$が使えないということは頭に入れておいておくべし。
jQuery2.x系の注意点とコード
Vista x86 IE8 FirstRun02 / Stephen Edgar – Netweb
jQuery2.xは高速で軽量なライブラリなのですが、実はIE8以下には対応していません。
その為、PCサイトでは2.x系を使うのは微妙なところなのですが、1.x系と2.x系ではスピードが半端無く違うため、本当は2を使いたい。
ということで、記述したコードを紹介します。
<?php
wp_deregister_script('jquery');
$user_agent = $_SERVER['HTTP_USER_AGENT'];
if (strstr($user_agent, 'Trident') || strstr($user_agent, 'MSIE')) {
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js', array(), '1.9.0');
}else{
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', array(), '2.0.3');
}
?>
単純にIE用には1.9.0を読み込み、IE以外（Safari,Chrome,Firefoxなど）では最新の2.0.3を読み込むというPHPの条件分岐です。
※このコードはwp_head内に書いてください。
これだとIE9以上でも1.x系が読み込まれてしまいますが、IEのことを信用していないのでIEは1.x系で十分ではないかと思い、まぁいいかと。。
Amazon JSのような問題の出るjQueryを利用したプラグインを使わない場合は素直にこう書けばいいと思います。
<?php wp_deregister_script('jquery'); ?>
このコードで読み込みを止め、IE対応のHTMLコメントで分岐をして自分でjQueryを読み込めばOKです。また、wp_headと同時に書いてもOKです。（ただし、wp_headの上に上記のコードを書く）
スマホでの記述
<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', array(), '2.0.3');
?>
スマートフォンではIE対応はしなくても良いので単純にWordPressのjQueryを食い止めて、最新版の2.0.3を読み込んでいます。
1.x系と2.x系の大きな違いは読み込みスピードです。
速度が明らかに違うため、迷わず2.x系を使用した方が幸せになれると思います。しかしながら、古いスマホだと動作が怪しいので1.x系を使うのもありだと思いますよ。
まとめ
- 2.x系はIE8以下には未対応
- IE8対応の最終バージョンはjQuery 1.9.0
- WordPressは自動的にjQueryを読み込んでいるため、重複を防ぐ必要がある
- スマホは迷わず2.x系が高速でおすすめ
- ブラウザバージョンを気にするなら1.x系で統一しておくと安心
もちろん対策方法はJavaScriptを使ったり、他にもたくさんあると思いますが、今回は少し特殊な事例だったのでこんなコードを書いてみました。
jQueryをWordPressで使う場合は少し工夫がいりますが、基本的なことを守れば問題なく使うことが出来ます。それにしてもjQueryは便利でいいですね。
スポンサーリンク
