WEBデザイナー的、PHPとjavascriptを使ってjQueryの出し分けとかCDNの出し分けをする

このエントリーをはてなブックマークに追加

WEBデザイナー的、PHPとjavascriptを使ってjQueryの出し分けとかCDNの出し分けをする

当ブログでもやっているのですが、CDNを使ったり、jQueryの2系を使用することでWEBサイトの高速化が見込めます。しかし、対応させるブラウザによってはさらに必要なjavascriptがありますね。対応させるブラウザによって必要なもの必要ないものなど、複雑になってきているのでまとめてみました。

CDNを使ってjQueryを読み込みたい

jQueryやgoogleにもCDNサービスがありますよね。CDNサービスを利用することで高速化が見込めます。

CDNでjQueryを使用するメリット

・高性能なサーバ側での圧縮転送(gzip)機能に対応し、高速化が期待できる
・同じURLからファイルを取得していれば、ユーザーのキャッシュ効果が期待できる
・自サーバにjQueryを置く必要がない※フォールバックを行う場合はその限りではない

CDNでjQueryを使用するデメリット

・インターネットに繋がっていないローカル環境では使えない
・CDNがなんらかのトラブルが起こった時使えない

参考:jQuery高速化!処理速度を10倍上げるテクニック20選

CDNを利用することで高速化が見込めそうですね。ただ、デメリットのCDNにトラブルが合った場合にjQueryが読み込めないですね。それはまずい・・・。

ってことで、基本はCDNを利用して、もしCDNが読み込めない場合は自サーバーのjQueryを読み込めるようにするのが良さそうです。

jquery1系とjquery2系で出し分け

機能的には基本的には同じですが、2系の方が軽くて高速です。2系を使いたいとこですが、IE6~8をサポートしていません。
なので、IE6~8用に1系を使わなければいけませんね。

2系を使わずに1系のみならば別に全く問題ないですが、できる限り高速にしたければやっぱり2系をつかいたいところです。

ってことで、IE6~8では1系を、それ以外では2系を出し分けが必要です。

その他IE8以下で必要なもの

おまけとしてIE8以下の場合は下記の項目も使えるようにしてみます。

html5.js

IE8以下でもHTML5の新要素(headerとかfooterとか)を認識させるjavascript

参考:既存のIEにHTML5の新要素を認識させる

IE9.js

IE8以前のブラウザをIE9に近い動作にするJS
CSS3の擬似クラス、隣接セレクタなどいろんなセレクタを使用することができるようになる
旧IEでは本来使えないposition:fixed;やmax-widthなども使用できるようになる

参考:ie9.jsを使うと出来ること、出来なくなること
IE8以前のブラウザをIE9に近い動作にするJS

css3-mediaqueries.js

レスポンシブでサイトを作る場合には必須のメディアクエリをIE7、IE8でも使えるようにする

参考:メディアクエリをIE7、IE8でも使えるようにする

今回やりたいこと

1,CDNが使用できない場合は自サーバーのjQueryを使用
2,IE6~8ではjQuery1系、それ以外はjQuery2系
3,IE6~8ではhtml5.js,IE9.js,css3-mediaqueries.jsを使用する

結構盛りだくさんですね。では、出し分けする方法を考えていきましょう。

IE条件付きコメントで出し分け

IE条件付きコメントを使って出し分けもできますよね。おそらく一番簡単だと思います。

<!--[if lt IE 9]>
 IE9より下のバージョンの場合の処理
<![endif]-->
<!--[if gte IE 9]>
	IE9以上のバージョンの処理
<![endif]-->

こんな感じでできそうですよね。ただ、IE10からIE条件付きコメントのサポートがされていません。

ってことは他の方法で出し分けが必要ですね。

javascriptを使ってCDNが使用できるかの判定

ますは、1,CDNが使用できない場合は自サーバーのjQueryを使用をクリアしてみます。下記のコードでCDNを読み込めない場合はscript内の自サーバーjsが読み込まれます。
※自サーバーの方のパスはご自分のサイトに合わせてくださいね。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
	if (typeof jQuery == 'undefined') {
		document.write(unescape("%3Cscript src='../js/jquery-1.11.1.js' type='text/javascript'%3E%3C/script%3E"));
	}
</script>

phpを使ってjQueryの出し分け

次に、2,IE6~8ではjQuery1系、それ以外はjQuery2系の出し分けのクリアをします。今回は、IE8の場合とそれ以外のブラウザで出し分けをします。

<?php 
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((preg_match('/MSIE 8/', $ua))) { ?>
	// IE8の場合
<?php }else{ ?>
	// それ以外
<?php }?>

最初の行でユーザーエージェントを取得しています。
もしもIE6,7も対応する場合は

<?php 
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((preg_match('/MSIE 8/', $ua))) { ?>
	// IE8の場合
<?php }elseif((preg_match('/MSIE 7/', $ua))){ ?>
	// IE7の場合
<?php }elseif((preg_match('/MSIE 6/', $ua))){ ?>
	// IE6の場合
<?php }else{ ?>
	// それ以外
<?php }?>

で対応できます。

続けて、CDNの対応と3,IE6~8ではhtml5.js,IE9.js,css3-mediaqueries.jsを使用するも対応しちゃいましょう。

<?php 
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((preg_match('/MSIE 8/', $ua))) { ?>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="../js/html5.js"></script>
	<script src="../js/IE9.js"></script>
	<script src="../js/css3-mediaqueries.js"></script>
	<script>
	if (typeof jQuery == 'undefined') {
		document.write(unescape("%3Cscript src='../js/jquery-1.11.1.js' type='text/javascript'%3E%3C/script%3E"));
	}
	</script>
<?php }else{ ?>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
		if (typeof jQuery == 'undefined') {
			document.write(unescape("%3Cscript src='../js/jquery-2.1.1.js' type='text/javascript'%3E%3C/script%3E"));
		}
	</script>
<?php }?>

これでほぼほぼ完成かなと思うんですが、今のパスの書き方だとどんなディレクトリ構成でも対応できるって感じではないですね。
ってことで

<?php 
$rootpath = $_SERVER['DOCUMENT_ROOT'];
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((preg_match('/MSIE 8/', $ua))) { ?>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="<?php echo $rootpath; ?>/js/html5.js"></script>
	<script src="<?php echo $rootpath; ?>/js/IE9.js"></script>
	<script src="<?php echo $rootpath; ?>/js/css3-mediaqueries.js"></script>
	<script>
	if (typeof jQuery == 'undefined') {
		document.write(unescape("%3Cscript src='<?php echo $rootpath; ?>/js/jquery-1.11.1.js' type='text/javascript'%3E%3C/script%3E"));
	}
	</script>
<?php }else{ ?>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
		if (typeof jQuery == 'undefined') {
			document.write(unescape("%3Cscript src='<?php echo $rootpath; ?>/js/jquery-2.1.1.js' type='text/javascript'%3E%3C/script%3E"));
		}
	</script>
<?php }?>

一行目のコードでサーバーのルートからのパスを取得することができます。これで、どんなディレクトリ構造でも対応できますね。ちなみに、wordpressにも対応できます。

<?php 
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((preg_match('/MSIE 8/', $ua))) { ?>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/html5.js"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/IE9.js"></script>
	<script src="<?php bloginfo('template_url'); ?>/js/css3-mediaqueries.js"></script>
	<script>
	if (typeof jQuery == 'undefined') {
		document.write(unescape("%3Cscript src='<?php bloginfo('template_url'); ?>/js/jquery-1.11.1.js' type='text/javascript'%3E%3C/script%3E"));
	}
	</script>
<?php }else{ ?>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script>
		if (typeof jQuery == 'undefined') {
			document.write(unescape("%3Cscript src='<?php bloginfo('template_url'); ?>/js/jquery-2.1.1.js' type='text/javascript'%3E%3C/script%3E"));
		}
	</script>
<?php }?>

rootpathの部分を書き換えるだけですね。当ブログはwordpressなので上記のコードで対応してみました。

PHPとjavascriptを使ってjQueryの出し分けとかCDNの出し分けについてのまとめ

これで出し分けの対応ができましたね。やり方によってはjavascriptだけでも対応できるのではと思います。しかし、サーバーサイドで処理した方が実際にレンダリングされる要素が少なくてすむので今回はPHPでやってみました。wordpressを使っているていうのもありますが。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ