スマホ用サイトへの転送を記憶させるJavaScript(楽天Gold用)
楽天Goldでページを作成している場合、レスポンシブデザインでないかぎり、
スマホでページを見ている人はスマホ専用サイトに転送する必要があります。
「スマホサイトがあります、表示しますか?」と表示して
お客様に毎回選択させているショップ様がほとんどのようですが、
毎回メッセージを出すのはユーザビリティとして非常に劣悪です。
かと言って、強制的に転送するのもPCとスマホで情報量が違うから、好ましくありません。
そこで、PC版を見るかスマホ版を見るか、選んだ内容を記憶させておきましょう。
まず、楽天Goldのページの<BODY>より前の部分に、以下のJavaScriptを貼っておきます。
1.楽天GoldのPC板ページに貼るJavaScript
<script type=”text/javascript”>
// 動作確認テスト用 localStorage.removeItem(“sp_set”);
var spsite=”スマホサイトURL”;
var ua=navigator.userAgent;
switch ( localStorage.getItem(“sp_set”) ){
case “sp”:
location.href = spsite;
break;
case”pc”:
break;
case null:
if( ua.indexOf(‘iPhone’) > 0 || ua.indexOf(‘iPod’) > 0 || ua.indexOf(‘Android’) > 0 ){
if(confirm(‘スマートフォン用サイトを表示しますか?’)) {
localStorage.setItem(“sp_set”,”sp”);
location.href = spsite;
}else{
localStorage.setItem(“sp_set”,”pc”);
}
}
}
</script>
JavaScriptの設定
3行目のスマホサイトURL欄に、転送させたいスマホページのURLを入れます。
また、// 動作確認テスト用 の部分を消すと毎回確認のメッセージが出るようになるので、転送が問題ないかチェックすることができます。
問題なかったら、「// 動作確認テスト用 localStorage.removeItem(“sp_set”);」の部分は行ごと消して大丈夫です。
スマホサイトの設定
1の設定だけだと、一度スマホサイトを見たあとに、PC版を見たいと思ってPC版トップページを開いても常にスマホ版に転送されるようになってしまいます。
そこで、スマートフォン版ページの方にも「PC版を見る」などのリンクを置いて、HTML
を以下のようにしておきます。
2.スマートフォン板ページに貼るJavaScript
<script type=”text/javascript”>
function pcmove(){
localStorage.setItem(“sp_set”,”pc”);
</script>
スマートフォン版ページの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>
PC版ページのHTMLの設定
上記のJavaScriptをPC版ページのHTMLのBODYより前に貼ったあと、スマホ版を見るなどのリンクを作り、リンクの中にonclick=”spmove()”という項目を付けます。
スマホで見る
関連記事
-
楽天ショップのショップ内サーチのカスタマイズ
楽天ショップで設置できる店舗内検索について 店舗内検索のフォームは実は裏側でいろいろなパラメータを
-
楽天Goldで作成したページのFacebook最適化(OGP設定)
楽天GoldページのFacebookへの対応の仕方-OGP 楽天Goldで作成したページも、Fac
-
楽天RMSの項目選択肢別在庫に出る納期のデザインを変更
項目選択肢別在庫の納期情報の文字色・サイズなどの変更 1月13日から楽天では納期情報が必須になるた
-
楽天RMSでの消費税の変更方法
4月1日から消費税率が8%に変更になりますが、 1月27日現在の発表では楽天市場では消費税は自動で
-
楽天ディレクトリID(商品ジャンル)とタグIDの変更
楽天ディレクトリID(商品ジャンル)とタグIDの変更の影響について 2014/05/18に楽天の全
-
お荷物伝票番号付きURLの発送メールへの入れ方 楽天RMS対応
配送状況に関する問い合わせを減らすには? ネットショップでよくあるお問い合わせの一つが、配送状況の
-
楽天スマホページでヒートマップを導入して改善
ヒートマップとは、ユーザーがどのように行動したか、可視化してくれるツールです。 以下のように、どこ
-
楽天R-Backofficeに受注CSVを戻すときの注意点
R-BackofficeにCSVアップロードで注文修正すると消費税が8%に! 楽天ネットショップで
-
楽天Goldで作ったページをモバイルフレンドリー対応にするには?
Googleが、2015年4月21日からスマートフォン対応していないサイトは検索での順位を落とすと発
-
楽天、YahooなどのCSVをExcelで安全に開くには?
楽天やYahooショッピングなど、ネットショップの業務をやっていると「CSVデータ」がないと出来ない