レスポンシブデザイン対策!デバイスのサイズに応じてjava scriptを呼び変える

Pocket
[`evernote` not found]

スマホ対応のサイトを作る時に、CSSはMedia Queriesで対応する事が一般的です。ではjava scriptはどうしていますか?PCとスマホをワンソースで対応しなければならない時、java scriptの処理って割と重大な問題になってくると思います。たとえば、PCサイトでjava scriptを使ってリッチな表現をしたいけど、同じscriptをスマホで実行されたら困るとか、PCとスマホで別々の表現をしたいとか。

僕もあまり経験がないので、色々試行錯誤をしているのですが、個人的にベストプラクティス的な対策が見つかったのでシェアしたいと思います。
実機検証は、モバイル端末はiphone5だけなので、実践で使うには少し検証が必要だったりしますけど。

まず、ブレイクポイントによる分岐です(CSSでいうところのMedia Queriesですね)が、window.matchMediaを使って実現します。window.matchMediaを使うと、Media Queriesのようにウインドウの幅で処理を変える事が可能になります。

問題はIEの対応がIE10以降という事なんですが…
IE9以前に関しては、別途分岐をしてPCで読みこませるべきファイルをロードしてあげる必要があります。
この時点で、実用性が激落ですけど、なにか?

次にjava scriptの読み込みですが、window.matchMediaはjava scriptのコードなので当然その分岐の中にscriptタグで読み込む訳にはいきません。
代わりに使ったのが、jQuery.ajax()です。
.ajaxを使うことで動的にjava scriptファイルを読み込む事が可能になります。

で、実際のコードがこちら。

jQuery(document).ready(function($) {
	//PC環境の場合
	if (window.matchMedia( '(min-width: 484px)' ).matches) {
		$.ajax({
			url: 'pc.js',
			dataType: 'script',
			cache: false
	   });
	//モバイル環境の場合
	} else {
	    $.ajax({
			url: 'mob.js',
			dataType: 'script',
			cache: false
		});
	};
});

デモ
PCで表示すると「PCサイトです」と表示され、画面サイズが484px以下の環境だと「モバイルサイトです」と表示されます。この文字列は、それぞれ別々のjsファイルから表示されるようになっています。
[デモのファイルにviewportの設定を忘れていました。修正済みです]

簡略化するために、レスポンシブとはいえ、PCでの閲覧とモバイル(ポートレートモードのみ)の分岐で、ウインドウサイズを動的に変えた時に再読み込みは実装していないので、画面をグリグリ小さくした場合は、手動で再読み込みしなければなりません。(その辺は、window.matchMediaのaddListenerで対応できるようです)

大胆に割り切って使えば、割と実務に耐えられるんじゃないかと思っているのと、ウインドウサイズによってばさっとjsファイルを分けられるので、開発も簡単に進められるんじゃないかと思います。

モバイル対応は、もはや必須になりつつあり、さらに案件によってはあまりコストもかけられないという事もありますので、自前でモバイル用のワークフレームを用意しておいて、適用させれば、「なから」モバイルでも見れるようにしておくというのも必要かもしれませんね。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。