サイトアイコン マーカーネット株式会社

PCサイトとスマートフォンサイトを振り分けるjQueryライブラリ<Pc2Sp.js>をHTML4で利用する方法。

PCサイトとスマートフォンサイトを切り替えたい場合、
「Pc2Sp.js」というjQueryライブラリを利用すると実装できます。

このライブラリの紹介はネット上でたくさん見つかると
思いますので、今回は割愛し、下記の現象でうまく動作しない方へ向け
解決方法をご紹介します。

『 「Pc2Sp.js」で実装後、スマートフォンサイトから「PCサイトへ切り替える」ボタンをクリックすると、スマホサイトへ強制的に戻ってしまう・・(PCサイトに切り替わらない)』

この現象に遭遇された方は、まずは問題の起きるPCサイトが、
「HTML4」か「HTML5」で組まれているか確認してみてください。
もし、HTML4であれば、うまく動作しないでしょう・・(HTML4の方は続きをお読みください。)

うまく動作しない原因は、 Pc2Sp.js ファイル内で記述されている
localStorage.setItem がHTML5の機能のため、
PCサイトがhtml5でないと、そもそも利用できないのです。


HTML4での代替手段としてPc2Sp.js + jqueryのcookieを利用してみます。

1) jquery.cookie.min.js を読み込む (Pc2Sp.jsは読み込んでいる前提です)

<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js”></script>

2)jquery.Pc2Sp.js ファイルの記述を一部書き換える

↓のように html5の「localStorage.getItem」「localStorage.setItem」を
jquery.cookieの $.cookie に置き換えます。(元の行をコメントアウトの上、赤字の3行を追加)

//if(!localStorage)return this; // HTML5
//if(!$.cookie(‘pc_flag’))return this; // jquery.cookie  // コメントアウト

//&& localStorage.getItem(“pc_flag”)==”true” // HTML5
&& $cookie(“pc_flag”)==”true” // jquery.cookie

//&& localStorage.getItem(“pc_flag”)!=”true” // HTML5
&& $cookie(“pc_flag”)!=”true” // jquery.cookie

//localStorage.setItem(“pc_flag”,”true”); // HTML5
//$.cooki(‘pc_flag’, ‘true’); // jquery.cookie
$.cooki(‘pc_flag’, ‘true’ , { path : “/ “} ); // jquery.cookie


※, { path : “/ “} がないとSP⇒PCに行っても、cookieに保存されないので
この第3引数は必要です!!適切なパスを設定してください。

これでHTML4のPCサイトでもご希望の動作を実装できます。
お試しになってはいかがでしょうか。

モバイルバージョンを終了