非レスポンシブなサイトをスマホで閲覧した時、スマホ閲覧に最適化したページに転送する簡単な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 = '/'; } } }());１行目から意味を解説していきます。
var ua = navigator.userAgent.toUpperCase();
まずここですが前半が重要です。
navigator.userAgentでブラウザのユーザーエージェントを表す文字列を返しています。
しかしここで返される値というのは偽装（言い方が悪いですが）できてしまうので（User Agent Switcherとかで）、厳密には、あまり信用が出来ないものとして捉えられる…そうです。
window.navigator.userAgent – Web API インターフェイス | MDN
そしてそのあとのtoUpperCase()、これが必要かは謎ですが、
取得したユーザーエージェント情報を「大文字」に変換しています。
toUpperCase – JavaScript | MDN
その「ユーザーエージェント（大文字）」を、変数uaに代入しておきます。
次に、２行目の
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
３行目。var spDir = ‘/sp/’;は、あらかじめ、変数spDirにスマートフォン表示用のページの存在するURLを格納しておきます。
１行空け、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とか記述せずに、こういったことが出来るのか、と
且つ、こんなに簡単なんだ、と…
何かの機会に是非とも試してみてください！
でわ！
