マーカーネット株式会社

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

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-javascript(jquery)

関連記事

面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成!

web制作をされている方ならば、サイトを訪れてくれた人を少しでも長く引き留めたいと思われると思います。 一体どうやって見てくれる人の興味をひけるのか。色々な方法がありますが、その一つとして面白い動きを …

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

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

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

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …

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

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

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

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

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