マーカーネット株式会社

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

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

関連記事

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

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

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

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

2013年も気が付けば残り1週間。早いものですね~(しみじみ) WEBの業界は流行り廃りが激しいもので、 デザインに限って見ても、この1年間でもさまざまな動きがありましたね。 2014年、WEBデザイ …

超簡単!【CSS3】ロールオーバー効果

超簡単!【jQuery】ロールオーバー効果 こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果を …

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

画像を自動的にlightBox風に表示するjQuery ColorboxのWordPressプラグイン

jQueryプラグイン「Colorbox」は便利ですが、 さらにWordPressプラグインとして導入すれば 設定は更に簡単になります。 ソースをいじる必要はありませんので初心者にもおすすめです。 W …

javascriptの便利なライブラリについて

javascriptの便利なライブラリについて

オブジェクト(配列)や文字列の処理は自作の作成した場合、時間を要してしまします。 そこで、これらの処理をおこなう際に便利なJavascriptライブラリを紹介します。 1. underscore.js …