*

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

公開日: : 最終更新日:2015/10/20 楽天RMS, スマホ対策


スマートフォン用サイトを楽天Goldで作るショップ様も増えてきましたが、スマホの回線速度が早くなったとはいえ、長すぎるページは読み込みに時間がかかってしまいます。

そこでおすすめなのが「自動ページ送り」。
たとえばスマホで楽天の検索画面を開くと、検索結果の一番下まで行くと勝手に次の商品を読み込んでくれます。
楽天Goldでも実装できるので、ページの一番下まで行くと次のページを読み込むサンプルを作ってみました。
サンプルページで、動きをご確認ください。

自動ページ送りを楽天Goldで実装してみます。

jquery.autopagerをダウンロードする

自動ページ送りを実現する方法はいろいろありますが、今回はソースが簡単で設置がしやすいjQuery.autopagerを利用してみます。
上記のサイトからJavascriptをダウンロードしておきます。
※Javascriptの設定がわからない場合はこちらのサンプルをダウンロードして、ZIPファイルを解凍して下さい。

HTMLファイルを作成する

もっとも単純な形のHTMLファイルは以下のようになります。

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<script src=”http://code.jquery.com/jquery-1.9.1.min.js”></script>
<script src=”jquery.autopager-1.0.0.js”></script>
<script>
$(function() {
$.autopager();
});
</script>
</head>
<body>
<div class=”content”>
<!–ここまで商品やバナーを並べる–>
</div>
<!–次のページのURLを下に記載する–>
<a href=”sample_1.html” rel=”next”>Next</a>
</body>
</html>

上記の
<!–ここまで商品やバナーを並べる–>
となっている部分に、バナーなど通常のHTMLを記載していきます。
Class名を変更したり、</div>のとじタグの数が間違っていると上手く動かないのでご注意下さい。

次のページヘのリンクを用意する

上記のサンプルで、
<a href=”sample_1.html” rel=”next”>Next</a>
となっている部分が次のページを自動で読み込むために重要な部分です。
2ページ目のHTMLファイルへのリンクを入力しておきます。

2ページ目以降のHTMLファイルを用意する

先ほど作成したHTMLファイルをそのままコピーする形で大丈夫なので、2ページ目以降のHTMLも同様に作成します。
3ページ以上ある場合には、最後のリンクの部分を書き換えていきます。
保存するとき、ファイル名の末尾は_1.htmlという形になるようにします。
元のファイルがsample.htmlというファイル名なら、2ページ目以降はsample_1.html、sample_2.htmlとなります。

2ページ目以降のHTMLの注意

jquery.autopagerを利用した場合、2ページ目以降は

<div class=”content”>
</div>

で囲んである部分のみ、読み込まれます。
看板など、<div class=”content”>より上に記載したHTMLは読み込まないのでご注意下さい。

ページ送りのテストをする

以上の手順でHTMLファイルができたら、楽天Goldにアップロードしてテストしてみます。
jquery.autopager-1.0.0.jsというファイルも忘れずにアップロードしましょう。
【注意】マイドキュメントのファイルを直接開くなど、ローカル環境では動作しません。
サーバーにアップロードするか、XAMPPなどのローカルサーバーを用意してテストしましょう。

上手く動かない場合

上手く動かない場合、以下の様なことをしていないか確認してみてください。

HEAD部分を書き換えている

<html>
となっている部分をHTML4.01形式の書き方をすると動かないことがあります。
特にホームページビルダーなどで開くと、勝手に書き換えることがあるのでご注意下さい。

文字コードがUTF-8になっていない

jQueryを利用するので、文字コードはUTF-8のほうが問題が出にくいようです。
またFTPソフトではアップロードする際に文字コードを変えてしまうソフトも有ります。

ファイル名が連番になっていない

ファイル名が連番(_1.html _2.htmlのような形)でないと上手く動かないことがあるようです。

設定を変更する

サンプルではページの下まで行ったら勝手に次のページを読み込む設定にしていますが、JavaScriptファイルを編集すると「Next」を押さないと読み込まない設定にもできます。
14行目にある
autoLoad: true,

autoLoad: false,
にすると手動読み込みになります。

ライセンスについて

jquery.autopagerはMITライセンスになっています。
無料で利用でき、さらに再配布したり書き換えたりするのも自由ですが、コピーライト表示は必須です。
JavaScriptの先頭にあるコピーライト表示は消さないようにしましょう。

関連記事

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

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

楽天RMSでも出来るGoogle,YahooのSEO対策【1】

楽天ショップの場合、楽天サーチなど楽天サービスからの集客を意識しがちですが、rakuten.co.j

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

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

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

記事を読む

楽天Goldで作成したページのFacebook最適化(OGP設定)

楽天GoldページのFacebookへの対応の仕方-OGP 楽天Goldで作成したページも、Fac

記事を読む

Message

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

RPP(楽天 検索連動型広告)で商品を除外する方法

楽天RPP(キーワード広告)でパフォーマンスレポートの見方はこちらのR

RPP最初の画面
RPPパフォーマンスレポートの新規、既存などの意味は?

楽天RPP(キーワード広告)を運用していく上で大事なのは、成果を見て改

no image
RPP(楽天キーワード広告)の平均ROASは?

楽天では、RPP(楽天プロモーションプラットフォーム)という検索画面に

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

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

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

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

→もっと見る

PAGE TOP ↑