【Pc2Sp.js】PCサイトとスマホサイトを自動振り分け(切り替えボタン付)

やりたいこと。

  1. PCサイトをスマートフォンで見ると、自動的にスマートフォンサイトへ切り替える(振り分ける)。
  2. スマートフォンサイトでは「PCサイトを見る」ボタンを表示させ、クリックするとPCサイトへ移動する。
  3. PCサイトでは、スマートフォンのみ「スマートフォンサイトを見るボタン」を表示する。

こんなんどうやって作れん・・・
って調べてたら、まさにドンピシャのjQueryライブラリを発見!

「to-R」で紹介されている「Pc2Sp.js」というライブラリが上の要望を全て満たしてくれる。

1.Pc2Sp.jsを使ってみる

まず参考のサイトか上のリンクから「Pc2Sp.js」をダウンロードする。
ダウンロードしたファイルはjQueryの後に読み込む。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.Pc2Sp.js"></script>

この2つのファイルはPCサイト・スマートフォンサイト両方で読み込まなければならない。

その後、PCサイトとスマートフォンサイトで別々の JavaScriptを読み込む必要がある。

PCサイトで読み込むのは以下のコード。
スマートフォンでPCサイトを見たら、スマートフォンサイトへ飛ばす用。

$.switchPc2Sp({
    mode : "pc" ,
    spLinkBlockInPc : "#spLinkBlockInPc" ,
    anchorToPcInSp : "#anchorToPcInSp"
});

これだけじゃダメで、PCサイト内にリンクを貼っておく。
この aタグで指定したリンクに自動で飛ぶので、適宜修正。

<div id="spLinkBlockInPc">
    <a href="sp.html" id="anchorToSpInPc">SPサイトを見る</a>
</div>

さらにCSSで、通常は見えないようにしておく。

#spLinkBlockInPc {
    display:none;
}

PCサイトのほうはこれでOK。

スマートフォンサイトで読み込むのは以下のコード。
PCで見たらスマートフォン祭を見たらPCサイトへ飛ばす用。

$.switchPc2Sp({
    mode : "sp" ,
    anchorToPcInSp : "#anchorToPcInSp"
});

こちらにもPCサイトへのリンクを貼っておく。
この aタグのリンクに強制的に異同スルことになる。

<a href="pc.html" id="anchorToPcInSp">PCサイトを見る</a>

こんな感じ。
jQueryMobileでも使える。

参考

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 – to-R

スポンサーリンク
ad
ad

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ad