*

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

公開日: : 楽天RMS, スマホ対策


楽天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()”という項目を付けます。
スマホで見る

関連記事

no image

楽天ショップのショップ内サーチのカスタマイズ

楽天ショップで設置できる店舗内検索について 店舗内検索のフォームは実は裏側でいろいろなパラメータを

記事を読む

楽々商品登録 関連商品イメージ

楽々商品登録君のカスタマイズ事例(1)

弊社で販売している多モール商品登録ソフト、楽々商品登録君のカスタマイズ事例です。 キッチンジャンル

記事を読む

楽天Goldで作ったページをモバイルフレンドリー対応にするには?

Googleが、2015年4月21日からスマートフォン対応していないサイトは検索での順位を落とすと発

記事を読む

no image

楽天ペイ(RMS)で効率的に受注管理するには?

楽天ペイは今までの受注管理、R-Backofficeと異なりステータス管理ができないなど使い勝手が異

記事を読む

スマホ時代に合わせた楽天Goldページの最適化

楽天PCページのスマホ対策が大事だという事例。 スマートフォン対策を色々やった店舗様のGoogle

記事を読む

no image

楽天Goldのhttps:修正手順(SSL対応)

楽天Goldを使っている場合のSSL修正の手順 YahooショッピングのSSL対応に続いて、楽天市

記事を読む

楽天RMSの納期を一括設定するには【2月29日まで】

楽天の週間サポートニュースなどでも告知されていますが、2015年1月13日から商品ごとの納期情報の設

記事を読む

no image

楽天RMSのページをスタイルシートでカスタマイズ

簡単にスタイルシートで楽天RMSページをカスタマイズできる方法 前回、楽天RMSの項目選択肢別在庫

記事を読む

no image

[03/23加筆]ネットショップモール・ショッピングカートでしないといけない消費税対応(楽天・Yahoo・Amazonなど)

いよいよ4月1日より、消費税率が8%になります。 ネットショップでも消費税を変更しないといけません

記事を読む

楽天R-Backofficeに受注CSVを戻すときの注意点

R-BackofficeにCSVアップロードで注文修正すると消費税が8%に! 楽天ネットショップで

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

no image
楽天ペイ(RMS)で効率的に受注管理するには?

楽天ペイは今までの受注管理、R-Backofficeと異なりステータス

Yahooショッピング SEO(7)3月14日から低評価でペナルティ

Yahooショッピングで2017年10月に発表された、評価が悪いショッ

no image
楽天Goldのhttps:修正手順(SSL対応)

楽天Goldを使っている場合のSSL修正の手順 Yahooショッピン

no image
Amazonセラーセントラルの乗っ取り多発!二段階認証を

Amazonで詐欺出品者が急増中 Amazonセラーセントラルで、以

no image
Yahooショッピングの常時SSL(AOSSL)で厳密に置換したい場合

Yahooショッピングの常時SSL(AOSSL)、トリプルはどうするか

→もっと見る

PAGE TOP ↑