【Rails】自動で次のページへ！！jscrollによるページネーションの無限スクロール

自動で次のページに移行

ページネーションを実装して思うことは、最近は次へボタンなんて存在せず、スクロールするとどんどん新しい商品やツイートが表示されたりするということだ。

今回はそれを実装する。
使うのは、gem'kaminari'（ページネーション機能） + プラグイン”jScroll”（無限スクロール）である。

まずはgem'kaminari'でページネーションを実装

参考になるページはここです。
【Rails初心者】ページネーションを実装して自分好みにデザインを変える

Gemfile

gem 'kaminari'

gemを追記したら

ターミナル

$ bundle install

インストールが完了したら、コントローラーに記述する。

products_controller.rb

class UsersController < ApplicationController
  def index
    @products = Product.order(created_at: "DESC").includes(:host).page(params[:page]).per(1)
     #.page(params[:page]).per(1)は１ページ、１つのproductだけ表示の意味
  end
end

次はページネーションの次へ、戻るなどのボタンを表示させる。

index.haml

= render 'shared/main-header'
.container-fluid
  .row.py-5.w-100
    = render 'shared/side'
    .col-8.main
      .jscroll
        = render partial: 'user', collection: @products, as: "product", class: "jscroll"
        .skill-list
          = paginate @products # ここを追加するだけ
          

これでページネーションの実装完了です。

kaminariは遅いので、加工します。

kaminariは便利ですが、読み込みが10秒ぐらいかかって非常に重い。
だから、記述を変えます。

参考になるサイト:巨大レコードのkaminariページネーションは工夫が必要

products_controller.rb

class UsersController < ApplicationController
  def index
    @products = Product.order(created_at: "DESC").includes(:host).page(params[:page]).without_count.per(1)
    # .without_countを追加しています
  end
end

.without_countを追加することで、本来のkaminariの機能は使えなくなります。
次へボタンと戻るボタンは表示可能です。

index.haml

= render 'shared/main-header'
.container-fluid
  .row.py-5.w-100
    = render 'shared/side'
    .col-8.main
      .jscroll
        = render partial: 'user', collection: @products, as: "product", class: "jscroll"
        .skill-list
          // = paginate @products これを削除して、下記を追加
          = link_to_prev_page @products, '前のページ', class: "prev"
          = link_to_next_page @products, '次のページ', class: "next"

これで戻るボタンと次へボタンを表示させました。
1秒ほどで、ページを開けるようになりましたね！！

では、本題の下にスクロールすると、勝手に次のページに移行するようにしましょう！！

無限スクロール

jScrollのインストール

CDNで追加する場合

スクリプトを読み込ませて簡単に導入しましょう！

application.html.haml

%head
  %script{src: "https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"}

直接JSファイルを導入する場合

jscrollのGithubからダウンロードしよう。

ZIPファイルを解答したら、
jquery.jscroll.min.jsをasset/javascripts配下におきます。

そしたら、jScrollを読み込ませるようにします

assets/javascripts/application.js

//= require jquery.jscroll.min.js 

実はここが失敗が起こりやすい箇所です！！！！

解説します
私は下記のようにしてます

application.js

//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery.jscroll.min.js
//= require popper
//= require bootstrap-sprockets

重要なのはここです。

application.js

//= require jquery
//= require jquery.jscroll.min.js

これだけだとエラーなく利用できます。

エラー

Uncaught TypeError: $(...).jscroll is not a function
// 「.jscrollってイベント処理なんて、知らねえぞええぞゴラアアアアアアア！！」と怒られます。これに苦戦しましたね。

間違えて下記にしてしまうと使えません

失敗例

//= require jquery
//= require jquery.jscroll.min.js
//= require jquery3

//= require jquery と //= require jquery3が入っていて、
エラーが起こるパターンです。
もしも複数入っている場合、片方消しましょう。

jQueryで無限スクロールの処理作成

では続きを進めていきます。
それではjQueryで無限スクロールの処理を作成します。

jscroll用のjs

$(document).on('turbolinks:load', function() {
  $('.jscroll').jscroll({
    // 無限に追加する要素は、どこに入れる？
    contentSelector: '.jscroll', 
    // 次のページにいくためのリンクの場所は？ ＞aタグの指定
    nextSelector: 'a.next',
    // 読み込み中の表示はどうする？
    loadingHtml: '読み込み中'
  });
});

これでdiv.jscrollをスクロールすると.jscrollに次のページの要素を追加するよ。ということになります

詳しいオプションは下記のサイトが参考になります。
無限スクロールのプラグイン「jScroll」の使い方

これで完了です！！
エラーが難しかったですが、原因がわかってよかったです。

参考リンク

kaminari系

【Rails初心者】ページネーションを実装して自分好みにデザインを変える
gem'kaminari'のオプション
参考になるサイト:巨大レコードのkaminariページネーションは工夫が必要

無限スクロール系

kaminari + jscrollを使った無限スクロールの実装
無限スクロールのプラグイン「jScroll」の使い方
Github:jscroll