*

スマホ用サイトへの転送を記憶させる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()”という項目を付けます。
スマホで見る

関連記事

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

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

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

記事を読む

楽天RMSの項目選択肢別在庫に出る納期のデザインを変更

項目選択肢別在庫の納期情報の文字色・サイズなどの変更 1月13日から楽天では納期情報が必須になるた

記事を読む

no image

楽天スマホページ編集ツール

1年前に作った、スマホ用のカテゴリページを出力できるシステムを放置してたので、少しだけ手を入れてテス

記事を読む

楽天、YahooなどのCSVをExcelで安全に開くには?

楽天やYahooショッピングなど、ネットショップの業務をやっていると「CSVデータ」がないと出来ない

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

楽天の買い物かごボタンをカスタマイズ

この記事の「買い物かごをカスタマイズする方法」は、2015年に楽天RMSのHTMLソースが変わったた

記事を読む

no image

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

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

記事を読む

楽天ディレクトリID(商品ジャンル)とタグIDの変更

楽天ディレクトリID(商品ジャンル)とタグIDの変更の影響について 2014/05/18に楽天の全

記事を読む

no image

楽天Goldで自動ページ送りを実装

スマートフォン用サイトを楽天Goldで作るショップ様も増えてきましたが、スマホの回線速度が早くなった

記事を読む

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 ↑