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)

関連記事

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

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

今回はCSS3でロールオーバー効果をかける方法をご紹介します。 目次1 共通HTML、CSS1.1 HTML1.2 CSS赤字が今回追記した箇所になります。1.3 解説2 下から上に2.1 CSS赤字 …

jQueryを使ってみよう【開閉式メニューを作る編】

jQueryを使ってみよう【開閉式メニューを作る編】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 jQueryの便利な使い方をご紹介します。 jQu …

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

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

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

面白い動きや便利な機能をJSで実装! その5:ちょっと変わったマウスオーバーの応用編

面白い動きや便利な機能をJSで実装! その5:ちょっと変わったマウスオーバーの応用編

javascript(jquery)でマウスオーバー時に変わった動きを付けたいと思います。 面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。の続きになり …

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …