goods and life +

使われる jQuery のバージョン を IE のバージョンで切り分けしてみたった

IEめ…(´・ω・`)

jQuery 2.x は、jQuery 1.9.x より速くてファイルサイズも小さいので、使わない手はない。
ただでさえ重いかもしれない WordPress を少しでも軽快に、っていう儚い願いを込めて…。

モダンブラウザでサイトにアクセスされたら最新の軽快な jQuery で動作、古臭いブラウザでアクセスされてもちゃんと動作するように、って感じで。

でも、 jQuery 2.x と jQuery 1.x は同じ API を持っているものの、いわゆる oldIE (Internet Explorer 6、7、8) といわれるレガシーな IE がサポートされない。

というか、jQuery 2.x はレガシーをサポートしない分、軽量化され高速。

正直、古い IE を使うくらいならできれば最新の GoogleChrome を使って欲しいところ。
だけど現実的にはどんなブラウザを使ってアクセスされるかなんてことはわかんないし、いつまでも古い環境で使う人もいるし…。

 

jQuery は CDN も使えます。
jQuery は、jQuery CDN、Google CDN、Microsoft CDN、CDNJS CDN、jsDelivr CDN など、高速な CDN から無料で直接読ませることが可能になっていますので、これを使わない手はない。

めっちゃ参考になった
IEの条件付きコメントを使ったjQuery1系2系の使い分け
http://qiita.com/nmta/items/47cad749db2bfeb319b7

てことで、jQuery 1.x と jQuery 2.x のそれぞれ最新のものを CDN から直接読ませて、条件付きコメントを使ってブラウザに応じて切り分けしてみました。

ここでやりたいこと
IE8 以下のバージョンの IE でアクセスされた時は jQuery 1.x の最新版を、IE9 以上の IE と、IE 以外のモダンブラウザでアクセスされた時には jQuery 2.x の最新版をそれぞれ CDN から読み込み、かつ、もし CDN そのものがダウンしていたらその時は WordPress が用意している jQuery や自分がローカルに置いたものを読み込ませる、ということです。

 

IE8 以下のバージョンの IE 向け

IE8 以下のバージョンの IE には jQuery 1.x を用意。
IE8 以下のバージョンの IE の場合 jQuery 2.x では動かないので、 jQuery 1.x を読み込ませます。

if の中味が lt の場合は、IE8 を含まない(より以下)、って意味なので、e(=equal) をつけて含ませることで if lte IE8 にすれば IE8 以前のバージョンの場合、って意味になります。

たとえば Google の CDN から読み込ませるとこんな感じ。

<!--[if lte IE8]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
< ![endif]-->

で、そこからさらに https のプロトコル表記を省略すると吉。
(SSLでアクセス時のセキュリティ警告メッセージを回避できます)

<!--[if lte IE8]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
< ![endif]-->

 

IE9 以上の IE と IE 以外のモダンブラウザ向け

IE9 以上の Ver の IE と、IE 以外のモダンブラウザには jQuery 2.x を読み込ませます。

IE9 以上、かつ IE 以外のモダンブラウザに対応する場合
if の中味が gt の場合、IE9を含まない(より以上)、e(=equal) をつけると IE9 を含む、って意味なので、ここを if gte IE 9 にしておけば IE9含むそれ以上の IEバージョンと IE 以外のモダンブラウザに対応します。

Google の CDN から読み込ませるとこんな感じ。

<!--[if gte IE 9]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<!--[endif]-->

上の IE8 以下用の例と同じく、https のプロトコル表記を省略。

<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
< ![endif]-->
めっちゃ参考になった
条件付きコメントでIE9以降とIE以外のブラウザだけに表示する
https://www.softel.co.jp/blogs/tech/archives/3150

いま手元に古い環境の Windows がないのでちゃんと切り分けて使われているかどうかはよくわかんないんだけど、これでおそらくアクセスしているブラウザに応じて jQuery の使い分けはできているはず。

 

CDN が落ちたらローカルから読み込む

で、さらに、もし CDN がなんらかの理由で落ちたりして止まっている場合は(現実には滅多に無いことですけど)、そういう時は jQuery が読み込まれなくなって動作もしなくなるので、そんな万が一の時に備え、もし CDN が落ちたら自分の使ってるサーバーに置いたローカルの jQuery 書類を読み込ませるようにしてみます。

めっちゃ参考になった
jQuery2.X系の安心・安全な読み込み方法
http://qiita.com/tayasu/items/b11527df607d7661e9fc

【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方
http://dtp.jdash.info/archives/51942493.html

window.jQuery || document.write(‘<script src=”●●”><\/script>’) という書き方は何なのかをFirebugで調べてみた
http://dtp.jdash.info/archives/52048042.html

IE8 以下のバージョンの IE用

<!--[if lte IE8]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script>window.jQuery || document.write('</script><script src="自分のワードプレスの jquery が置いてあるところ/jquery-1.12.3.min.js">< \/script>')</script>
< ![endif]-->

IE9 以上のバージョンの IE と、IE 以外のモダンブラウザ用

<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>window.jQuery || document.write('</script><script src="自分のワードプレスの jquery が置いてあるところ/jquery-2.2.3.min.js">< \/script>')</script>
<!--<![endif]-->

普段は CDN から jQuery を読み込んで、もし CDN が落ちたら自分のサーバーから読む、という実用的な合わせ技、これで運用すれば少し安心。
上の例では Google Hosted Libraries を使いましたが、Cloudflare を使う場合は

 src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"

みたいな感じで、配給元の URL を置き換えて使えば OK です。
(※この記事を書いた時の jQuery 1.x は 1.12.3、 jQuery 2.x は 2.2.3 ですが、現時点での jQuery 1.x の最新版は 1.12.4、 jQuery 2.x の最新版は 2.2.4 に変わって、最新の安定版 jQuery 3.x もリリースされています)

おまけ
ローカルに置くような書類をターミナルで gzip圧縮するのはめっちゃ簡単です。
でも長期間やらないと、ついやり方を忘れちゃったりするんですよね。

.gzの作りかた。
まず Mac の ターミナル.app を起動します。
キーボードから gzip と入力するか、または gzip という文字をコピペ。
さらにその後に英数半角スペースを入力します。
次に、ターミナルのウインドウに、Javascript や CSS など圧縮したいファイルをドラッグ & ドロップします。
最後に、キーボードの Enter または return キーを押せば、拡張子が .gz になったものが出来上がります。
あとは FTP なりで任意の場所へ。

追記:jQuery 正式版 v3.0.0 来ました
https://jquery.com/
参考
WordPress で jQuery を使うときの基本的な注意点などをビギナー向けに書いてくれているため、わかりやすかった記事です。
WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例

Slim build(slim.js,slim.min.js では動かんかったです)…(´・ω・`)

お買いもの忘れはないですか?

コメントはこちらから

Return Top