スマホ用サイトへの転送を記憶させるJavaScript（楽天Gold用）

公開日： 2016/02/24 : 楽天RMS, スマホ対策

楽天Goldでページを作成している場合、レスポンシブデザインでないかぎり、
スマホでページを見ている人はスマホ専用サイトに転送する必要があります。

「スマホサイトがあります、表示しますか？」と表示して
お客様に毎回選択させているショップ様がほとんどのようですが、
毎回メッセージを出すのはユーザビリティとして非常に劣悪です。

かと言って、強制的に転送するのもPCとスマホで情報量が違うから、好ましくありません。
そこで、PC版を見るかスマホ版を見るか、選んだ内容を記憶させておきましょう。
まず、楽天Goldのページの<BODY>より前の部分に、以下のJavaScriptを貼っておきます。

1．楽天GoldのPC板ページに貼るJavaScript

JavaScriptの設定

3行目のスマホサイトURL欄に、転送させたいスマホページのURLを入れます。
また、// 動作確認テスト用　の部分を消すと毎回確認のメッセージが出るようになるので、転送が問題ないかチェックすることができます。
問題なかったら、「// 動作確認テスト用　localStorage.removeItem(“sp_set”);」の部分は行ごと消して大丈夫です。

スマホサイトの設定

1の設定だけだと、一度スマホサイトを見たあとに、PC版を見たいと思ってPC版トップページを開いても常にスマホ版に転送されるようになってしまいます。
そこで、スマートフォン版ページの方にも「PC版を見る」などのリンクを置いて、HTML
を以下のようにしておきます。

2．スマートフォン板ページに貼るJavaScript

スマートフォン版ページのHTMLの設定

上記のJavaScriptをスマホ版ページのHTMLのBODYより前に貼ったあと、PC版を見るなどのリンクを作り、リンクの中にonclick=”pcmove()”という項目を付けます。
PC版を見る
これで、PC版を見たい人は転送されることなくPC版が見えるようになります。

3．PC版ページの仕上げ

これでスマホサイトを見たあとPCサイトを見たい人はPCサイトが見えるようになりましたが、もう一度スマホサイトを見たい人が見えるようにする必要があります。
2の手順と同様に、まず以下のJavaScriptをPC版ページのBODYより前に入力します。
<script type=”text/javascript”>
function spmove(){
localStorage.setItem(“sp_set”,”sp”);
</script>