マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery)

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

投稿日:2014年11月12日 更新日:

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サイトでもご希望の動作を実装できます。
お試しになってはいかがでしょうか。

-javascript(jquery)

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

HTML5 【data-】 独自データ属性を使おう!

独自データ属性、カスタムデータ属性、data-role属性・・・ と色々な呼ばれ方をする、html5で追加されたオリジナルの属性をつくれる素敵な仕組み! 「href」はリンク先、「id」「class」 …

jQueryでタブを作ってみた

今回はjQueryでタブを作ってみました。 タブは皆さんご存知の通りよくあるタブです! Webサイトのページ内でコンテンツ要素が大量にある場合 そのまま表示させるとページが縦長になり ブラウザ上で縦ス …

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング

10月のPYPLプログラミング言語人気ランキング PYPL PopularitY of Programming Language index 10月のプログラミング言語人気ランキングの発表によりますと …

【jQuery】 超簡単!アコーディオンメニュー ②

【jQuery】 超簡単!アコーディオンメニュー ②

【jQuery】 超簡単!アコーディオンメニュー ① こちらでとっても簡単なアコーディオンを作成しましたが、これでは自分のデザインに活用できなかった・・・ そんな時はhtml5の新属性、独自データ属性 …

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

jQueryでイベントが発生した要素を指定する$(this)。 jQueryを初めて使った頃は$(this)ってなんだ!? なんで普通に<li>なら$(“li”)じゃだめなの~!? なんて …