超簡単!jQuery不要でスマホ用ページにリダイレクト転送するJavascriptコード

2014.4.27 jQuery

非レスポンシブなサイトをスマホで閲覧した時、スマホ閲覧に最適化したページに転送する簡単なjavascriptです。

もしかしたら?というか案の定というか…結構、需要は無いかもしれませんが、
先日、僕は案件でちょうどその機能を使いたい時があったので、.htaccess記述なしで実装できた時の”助かった”感が今だに忘れられず、記事にしました。

ちなみに元ネタは
ソースコピーですぐ使えてスマホ専用サイト作成に便利!PC・スマートフォンサイトの振り分けJavaScript作りました。 | HTML5でサイトをつくろう
です。いつもありがとうございます!

では、早速コードを記載いたします。

(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 = '/';
		}
	}

}());

1行目から意味を解説していきます。

var ua = navigator.userAgent.toUpperCase();

まずここですが前半が重要です。
navigator.userAgentでブラウザのユーザーエージェントを表す文字列を返しています。
しかしここで返される値というのは偽装(言い方が悪いですが)できてしまうので(User Agent Switcherとかで)、厳密には、あまり信用が出来ないものとして捉えられる…そうです。

window.navigator.userAgent – Web API インターフェイス | MDN

そしてそのあとのtoUpperCase()、これが必要かは謎ですが、
取得したユーザーエージェント情報を「大文字」に変換しています。

toUpperCase – JavaScript | MDN

その「ユーザーエージェント(大文字)」を、変数uaに代入しておきます。

次に、2行目の

var url = document.location.pathname;

で、現在表示中のページのパス名を返します。そのままですね。
つまり、http://satohmsys.infoがドメインで、ブログの設置場所が/blog/だとすると、
さらに表示中のページがその下層にあるワケなので、返される値としては

/blog/表示中のページURL.html

とかになります。
ちなみに、location.pathnameでドメインから表示中のページまでのパスだけを返すのに対し、location.hostnameでsatohmsys.infoを返すことが出来ます。
今回は前者を使っています。

URL情報の取得|window.locationオブジェクト|JavaScript/DOM|PHP & JavaScript Room

 

3行目。var spDir = ‘/sp/’;は、あらかじめ、変数spDirにスマートフォン表示用のページの存在するURLを格納しておきます。

1行空け、5行目。

ua.indexOf('IPHONE') !=-1 || ua.indexOf('ANDROID') != -1 || ua.indexOf('MOBILE')

indexOfは、引数で指定された文字列が、対象の文章の中に含まれているかどうかを検索し、取得できた場合、その出現位置を返します。「-1」というのは、取得できなかった時に返される値ですので、つまりここは

ua = navigator.userAgent.toUpperCase();

これを使って条件分岐します。
取得したユーザーエージェント情報に「IPHONE」「ANDROID」「MOBILE」という文字列が含まれている場合は…「isSP()」という関数を実行

ユーザーエージェント情報に「IPHONE」「ANDROID」「MOBILE」がどれも含まれていない場合は「isPC()」という関数を実行

という意味です。これは「三項演算子」で条件分岐してあり、ifを簡略化したものです

で、そのあとに「is_SP()」という関数を定義しているのですが、ここではまず
前半のifで、現在表示中のページがspDirのURLであるかを判断します。trueならばreturn falseです。何も返しません。

が、もしspDirと現在表示中のページのURLが一致しない場合は、location.hrefを使って、spDirに飛ばします。

つづくisPC()

という関数が、上記のisSPの逆なのですが、現在表示中のページがspDirのURLと異なれば、return falseで何も返さない→つまり、スマホ表示用ページでない=PCを表示用ページということになり、そうでなければ、location.hrefで、PC表示用のURLを指定します。ここではドメイン直下のindexファイルにジャンプするようになっています。必要に応じ、変えてください。

このファイルを外部ファイルとして読み込むだけで、UAを判断して最適化されたページに案内することが出来ます!

しかし、内容がほぼ同じならレスポンシブにしたほうが…と思っていましたが
そうも行かないケースもあるんですよね~

それにしても、先日はこのスクリプトに、本当に助けられました…
htaccessとか記述せずに、こういったことが出来るのか、と
且つ、こんなに簡単なんだ、と…

何かの機会に是非とも試してみてください!

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。