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

公開日： 2015/05/18 : 最終更新日：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”>より上に記載したHTMLは読み込まないのでご注意下さい。

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

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