【決定版】jsでPC専用ページ／スマートフォン専用ページの振り分け（リダイレクト）を実装

Web2016年11月8日

すっかりレスポンシブWebデザインが当たり前のように実装される世の中になりましたが、掲載するコンテンツの特性によっては、PCサイトとスマートフォンそれぞれに最適化したページを別々に制作すべきケースもあります。

そこでユーザーをデバイス環境に応じたページに誘導する振り分け用jsを作成しましたので、ご紹介したいと思います。

サンプルコード

(function () {

$(function(){

	//ルート直下で振り分ける場合
	var $root = '';

	//任意のディレクトリ内で振り分ける場合
	//var $root = '/xxx';

	var $pathName = location.pathname;
	var $pathNameSpDelete = $pathName.replace('/sp','');
	var $pathNameRootDelete = $pathName.replace($root,'');

	//URLに/sp/を検知した場合
	if ($pathName.indexOf('/sp/') != -1) {
	
		//ユーザーエージェントがSP時は何も処理しない
		if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)){
		}

		//ユーザーエージェントがPC時はPCページへリダイレクト
		else{
			location.href = $pathNameSpDelete;
		}
	}

	//URLに/sp/を検知しなかった場合
	else{
	
		//ユーザーエージェントがSP時はSPページへリダイレクト
		if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)){
			location.href = $root + '/sp' + $pathNameRootDelete;
		}

		//ユーザーエージェントがPC時は何も処理しない
		else{
		}
	}
    
});

})(jQuery);

※jQueryを読み込んでいる場合のスクリプトとなります

動作イメージ（変数$rootの値が空の場合）

ユーザーエージェント	リクエストURL	リダイレクト先
SP	/index.html	/sp/index.html
SP	/hoge/index.html	/sp/hoge/index.html
SP	/sp/index.html	特に処理しない
PC	/sp/index.html	/index.html
PC	/sp/hoge/index.html	/hoge/index.html
PC	/index.html	特に処理しない

動作イメージ（変数$rootの値が/xxxの場合）

ユーザーエージェント	リクエストURL	リダイレクト先
SP	/xxx/index.html	/xxx/sp/index.html
SP	/xxx/hoge/index.html	/xxx/sp/hoge/index.html
SP	/xxx/sp/index.html	特に処理しない
PC	/xxx/sp/index.html	/index.html
PC	/xxx/sp/hoge/index.html	/hoge/index.html
PC	/xxx/index.html	特に処理しない

前提条件

PC用とSP用のページが1対1で存在していること

PC用ページとSP用ページ、それぞれが個別に作成されている必要があります。
PCのみもしくはSPのみしかないページでは本jsは読み込まないようご注意ください。

SP用のページはsp/などディレクトリを切って格納していること

ドメイン直下もしくは特定のディレクトリ内でsp/ディレクトリを切って、SP用ページはそこに格納する必要があります。

index.htmlと並列でindex_sp.htmlを作成するケースなどは対象外のためご注意ください。

PC用ページとSP用ページは同じファイル名であること

ご紹介しているjsはリクエストしたURLに対し「/sp/」を加えるか否かといった仕様になっているため、PC用とSP用でファイル名が異なる場合は正常に振り分けがされないことになりますのでご注意ください。

解説

リクエストしたURLの文字列内の/sp/の有無を確認し、if文で処理を振り分けています。
に応じてそれぞれに適したページへlocation.hrefでリダイレクトさせています。
PC用ページにPCでアクセスした場合およびSP用ページにSPでアクセスした場合は特に何も処理を行いません。

変数$rootの値は、必要に応じて変更してください。SP用ページをドメイン直下のsp/に作成する場合は空にし、特定のディレクトリ内でSP用ページを作成する場合は「/xxx」など、任意のディレクトリ名を記述してください。

ちなみに、ユーザーエージェントはiPhoneとAndroidを対象としています。

このjsのイイところ

PC用ページとSP用ページで共用できる
1対1で精緻に振り分けできる
万が一PCユーザーがSPページのURLをリクエストした場合にも対応

PC用ページとSP用ページで共用できる

PC用ページとSP用ページ共用で使えます。それぞれのページでjsを分ける必要はありません。このjsを別ファイルで保存して、PC用ページとSP用ページそれぞれから以下のように外部ファイルとして読み込めばそれだけで機能します。

<script src="js/redirect.js"></script>

1対1で精緻に振り分けできる

SPでPCの下層ページにアクセスした場合、決め打ちでSP用のトップページにリダイレクトしているサイトもありますが、本jsであればアクセスしたページに応じたリダイレクトを行うため、ユーザーのニーズに応じたページを確実に提供することができます。

また、SP用トップページに一括でリダイレクトさせたいという場合は、

location.href = $root + '/sp' + $pathNameRootDelete;

上記の記述を、

location.href = '/sp/';

のように書き換えればOKです。

万が一PCユーザーがSPページのURLをリクエストした場合にも対応

PCユーザーがSPページにアクセスした場合、PC用ページにリダイレクトさせています。ユーザーに確実に最適なページを提供するにはこの処理を加えておくべきなのですが、意外と見落とされがちな処理だったりします。

まとめ

検索するとjsで振り分けを行うスクリプトを紹介している記事がいくつ見つかりますが、汎用性に乏しかったり、1ファイルで完結するものがなかったんですよね。なので今回自作で対応してみました次第です。

WordPressなどの動的サイトでは必要ないと思いますが、静的サイトでPC用とSP用を個別に作成するような場合において、ご紹介したページ振り分けjsは多いに役立つことと思います。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。