WEB

超簡単!スマホでアクセスしたpc用ページからスマホ用ページに飛ばすJavascript

非レスポンシブなサイトをスマホで閲覧した時、スマホ閲覧に最適化したページに転送する簡単な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;

で、現在表示中のページのパス名を返します。そのままですね。
つまり、https://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とか記述せずに、こういったことが出来るのか、と
且つ、こんなに簡単なんだ、と…

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

でわ!