Pc2Sp.jsは、PCサイトとスマホサイトの両方が用意されたサイトで、それぞれに表示の切り替えを行うことができるjQueryプラグインです。Pc2Sp.jsはto-Rさんが配布しています。
よくスマホサイトで[PCサイトを表示]のようなボタンがあって、タップするとスマホからPCサイトを表示するのを見かけたことがある方も多いのではないでしょうか。Pc2Sp.jsを導入すると、ああいうことができるようになります。
ということで、Pc2Sp.jsの導入手順を紹介したいと思います。
PCサイト側の設定
PCサイト側では、スマホサイトへのリンクを設置します。URLは変更してください。
<div id="spLinkBlockInPc"> <a href="http://hogehoge.com/sp/" id="anchorToSpInPc">スマホサイトを表示</a> </div>
CSSで以下のようにしておけば、スマホでアクセスした時だけ表示するようにすることも可能です。
#spLinkBlockInPc{
display:none;
}
続いて、Pc2Sp.jsをダウンロードして、サーバーに設置します。
サーバーにファイルを設置したら、jQueryとPc2Sp.jsをロードします。記述場所は</body>の直前でOKです。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.Pc2Sp.js"></script>
<script>
$.switchPc2Sp({
mode : "pc" ,
spLinkBlockInPc : "#spLinkBlockInPc" ,
anchorToPcInSp : "#anchorToPcInSp"
});
</script>
ファイルパスは適宜変更してください。また、jQueryはサーバー上に設置してもOKです。
スマホサイト側の設定
PCサイトへのリンクを設置します。URLは変更してください。
<a href="http://hogehoge.com/" id="anchorToPcInSp">PCサイトを表示</a>
jQueryとPc2Sp.jsをロードします。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.Pc2Sp.js"></script>
<script>
$.switchPc2Sp({
mode : "sp" ,
anchorToPcInSp : "#anchorToPcInSp"
});
</script>
PCサイトと同様にファイルパスは適宜変更してください。
動作について
これでPCサイトとスマホサイトの表示切り換えができるようになります。
スマホからサイトにアクセスした場合、まずはスマホサイトにリダイレクトされます。
スマホサイトに設置したPCサイトへのリンクにアクセスすると、PCサイトが表示されます。PCサイト側に設置したスマホサイトへのリンクにアクセスするまでは、ページ遷移してもPCサイトが表示され続けます。
あとがき
設置も簡単ですぐに導入できますね。
ユーザーエージェントを切り替える機能がブラウザについているので、そもそも表示切り替えボタンはいらないという意見もあるかと思います。でも、制作案件でスマホサイトに[PCサイトを表示]ボタンを設置することって結構あるんですよね。
実際に色んなクライアントの意見を聞くと、あまりITに詳しくない人ほどこのボタンを使っていることがわかります。たしかに、ブラウザでユーザーエージェントを切り替える機能とか知らないですよね。
そんなわけで、表示の切り替えボタンを設置しようか迷っている方は、一度試してみてはいかがでしょうか。