ソースコピーですぐ使えてスマホ専用サイト作成に便利！PC・スマートフォンサイトの振り分けJavaScript作りました。

PCとスマートフォンで違うページを閲覧させたい場合は、ユーザーエージェントを判別して切り替えることができます。

メディアクエリなどを使用したレスポンシブWEBサイトの場合は1ソースでそれぞれのデバイスに振り分けますが、PCサイトとスマホサイトで内容なども変更させる場合は、それぞれサイトを作って振り分ける必要があります。

ユーザーエージェントを判別するには、PHPやJavaScriptや.htaccessなど様々な方法がありますが、今回は最も導入が容易なJavaScriptを用いた方法を作ってみました。

また、今回の振り分け対象は制作の現場で最も使用頻度の高い「iPhone」「Android（タブレット除く）」という振り分けでいきたいと思います。

今回の振り分けを図にすると下記のようになります。

PCサイトとスマホサイトの振り分け例

PCでアクセスした場合に「http://www.html5-memo.com」でアクセスした場合はそのまま表示させ、スマートフォンでアクセスした場合は「http://www.html5-memo.com/sp」へリダイレクトさせます。

仮にPCで「http://www.html5-memo.com/sp」にアクセスした場合は自動的に「http://www.html5-memo.com」へリダイレクトさせます。

ただし今回作成したものは下層ページを直接アクセスした場合もトップページへ遷移されます。

スマートフォンで
xxx.com/about/index.html
にアクセスした場合は
xxx.com/sp/about/index.html
ではなく
xxx.com/sp/index.html
への遷移となります。

こちらにつきましては次回以降に対応したJSを作ろうと思います。

コピペ用コード

PCサイトのHTMLに貼り付ける用

スマートフォンでPCサイト閲覧した場合は、スマートフォン用ディレクトリへと遷移させます。

(function(){
	var ua = navigator.userAgent.toUpperCase();
	if(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){
		location.href = '/sp/';
	}
}());

スマートフォンサイトのHTMLに貼り付ける用

上記のみでは、スマートフォンサイトをPCで閲覧出来てしまうので、下記を追加し、PCでスマートフォンサイトを閲覧した場合は、PCディレクトリへと遷移させます。

(function(){
	var ua = navigator.userAgent.toUpperCase();
	if(!(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1)){
		location.href = '/';
	}
}());

以上で振り分けは完了です。

しかし、これだとPCとスマートフォンで別々のファイルを読み込まなくてはなりません。

ファイル管理が複数になると、メンテナンスが煩雑化し人的ミスに繋がりますので、共通で使用できるようにしたものが以下になります。

この記述を外部ファイル化しておくと、メンテナンスが楽になります。

PC・SP共通貼り付け用

※変数spDirにスマートフォン閲覧時に遷移させたいディレクトリ名を指定して下さい。

(function(){

	var ua = navigator.userAgent.toUpperCase();
	var url = document.location.pathname;
	var spDir = '/sp/';

	(ua.indexOf('IPHONE') != -1 || (ua.indexOf('ANDROID') != -1 && ua.indexOf('MOBILE') != -1))?
		isSP() :
		isPC();

	function isSP(){
		if(url.match(spDir)){
			return false;
		}else{
			location.href = spDir;
		}
	}

	function isPC(){
		if(!url.match(spDir)){
			return false;
		}else{
			location.href = '/';
		}
	}

}());

※振り分けは一番始めに実行されて欲しいので、以上のコードはヘッドの最初に記述するのがよいです。

上記のソースコードをuserAgent.jsで保存して、下記のように外部ファイルとして読み込んで下さい。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PCサイトとスマホサイトの振り分け</title>
<script type="text/javascript" src="userAgent.js"></script>
</head>
<body>

</body>
</html>

こちらで振り分けが可能になります。

そのほかにPCサイトとスマートフォンサイトの振り分け関連の記事をまとめてみましたのでこちらも参考になります。

PCサイトとスマートフォンサイトの振り分け関連の参考になるサイト

ユーザーエージェントによってPCとスマートフォン（iPhone / Android）を振り分ける方法いろいろ（PHP / JavaScript / .htaccess等）

http://html5-css3.jp/smartphone/pc-iphone-android-php-javascript-htaccess.html
PHP・JavaScript・.htaccess全ての振り分け方法がシンプルに紹介されています。

PC版とスマートフォン版サイトを自動振り分けする方法

http://allabout.co.jp/gm/gc/386483/

.htaccessを使った振り分け方法が、図を用いて詳細に解説されています。

サイトのマルチデバイス化（.htaccessで振り分け）

http://musilog.net/webdesign/my-works/htaccess-maluti-device.php

こちらも.htaccessでの振り分けですが、スマートフォンだけでなくフューチャーフォンの振り分けまで解説されています。

少しのコードで実装可能な15のスマートフォンサイト用小技集

http://www.webcreatorbox.com/tech/smartphone-snippets/

振り分けだけでなく、スマートフォンの制作時に知っておくと便利な小技が紹介されています。

今回の記事とは関係ないものがほとんどですが、どれも必須の知識なので、合わせて読んでおきたいエントリーです。

WebサイトをiPhoneで見やすくする5つの方法

http://www.webcreatorbox.com/tech/make-website-iphone-layout/

PHP・JavaScript・.htaccessによる振り分けはもちろん、CSSやWPを使った振り分けの紹介もされています。

何で振り分けを行うか迷った場合は、こちらを読むと良いと思います。

スマートフォン用ページに振り分けるときはrel=”canonical”を設定する

http://www.suzukikenichi.com/blog/using-rel-canonical-to-point-to-desktop-pages-if-you-have-smartphone-pages/

こちらのサイトは、PCサイト、スマートフォンサイトのSEO対策が記載されています。

今回の記事と直接は関係ありませんが、サイト制作の上で必須の知識だなと思いました。

スマートフォンUSERAGENT一覧+モバイル版クローラ

http://www.kagua.biz/android/ualist.html

ユーザーエージェントで、取得できる値の一覧が記載されています。

特殊な振り分けが必要で、実機がすぐに用意出来ない場合はこちらを参考にすると便利だと思います。

以前レスポンシブWEBサイトについてのとりあげた記事

また以前の記事でレスポンシブWEBサイトについての記事もありますのでこちらも合わせてご覧ください。

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました

簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～

簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～

簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～

PCサイトとスマートフォンサイトをどのように扱うか？国内のレスポンシブウェブサイトをまとめました

PCサイトとスマートフォンサイトをどのように扱うか？国内のレスポンシブウェブサイトをまとめました

PCサイトとスマートフォンサイトをどのように扱うか？国内のレスポンシブウェブサイトをまとめました

書籍を書かせていただきました

ポケット詳解 jQuery Mobile辞典

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

Amazonへ

すべての人に知っておいてほしい スタイルシートデザインの基本原則

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

Amazonへ

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】

マウスホイールに動きで横にスクロールの横長ページを作成する【jQuery連載16】

この記事に関連する記事