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

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

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

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

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

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

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サイト閲覧した場合は、スマートフォン用ディレクトリへと遷移させます。

[javascript font_size="90%"]
(function(){
var ua = navigator.userAgent.toUpperCase();
if(ua.indexOf(‘IPHONE’) != -1 || (ua.indexOf(‘ANDROID’) != -1 && ua.indexOf(‘MOBILE’) != -1)){
location.href = ‘/sp/’;
}
}());
[/javascript]

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

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

[javascript font_size="90%"]
(function(){
var ua = navigator.userAgent.toUpperCase();
if(!(ua.indexOf(‘IPHONE’) != -1 || (ua.indexOf(‘ANDROID’) != -1 && ua.indexOf(‘MOBILE’) != -1)){
location.href = ‘/’;
}
}());
[/javascript]

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

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

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

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