[Rails] kaminariを使って掲示板にページネーションを実装する

学習記録

はじめに

掲示板とブックマーク一覧画面にページネーションを実装します。

1ページあたり20件の掲示板を表示するようにしましょう。

ページネーションとは?

コンテンツの量が増えていくと、1つのページに大量のコンテンツが表示されるので読み込み速度が遅くてなってしまいます。また、スクロールするのも大変になります。これを解決するのがページネーションというもので、例えば1つのページに一度に20件表示するようにページを分割します。

ページネーションによるメリット

・情報量が多くなることによる読み込み速度の低下を避けることができる

・ページ読了に必要とされるスクロール量を軽減する

・ユーザーが現在の居場所を把握しやすくなる

https://i.gyazo.com/0fe9f27f2f684b8fb006f0a1da89a0db.png
google検索結果のページネーションリンク

必要な作業

  • kaminariの導入
  • コントローラにページネーションのコードを追記する
  • ページネーションを表示させる
  • ページネーションのデザイン変更

kaminariの導入

railsではkaminariというgemを使用します。

1. Gemfileに追加

Gemfileに記述し、インストールしましょう。

gem 'kaminari', '1.1.1'
$ bundle install

2. kaminariの仕様

a. 基本的な使い方

コントローラ側にこのようなコードを記述します。

@users = User.order(:name).page(params[:page])

View側で paginate というヘルパーメソッドを呼びます。

<%= paginate @users %>

b. page メソッド

kaminariを導入することで使えるようになるメソッドです。このメソッドは、「何ページ目を表示させるか」と言う感じで、ページネーションにおけるページ数を指定します。viewで使うヘルパーメソッド paginate からリクエストする際、paramsの中にpageというキーが追加されて、その値にpaginate がview側で指定したページ番号となってコントローラに送られます。コントローラ側で扱う際はparams[:page] という形で取得できます。

c. per メソッド

kaminariを導入することで使えるようになるメソッドです。このメソッドは1ページあたりに表示する件数を設定します。perメソッドの引数として渡した数値が、View側での1ページあたりに表示する件数になります。

d. paginate メソッド

こちらのヘルパーをviewに埋め込むことで、簡単にページネーションリンクが生成されます。

3. ページネーションの設定ファイルを生成する

下記のジェネレータコマンドによって、デフォルトの設定ファイルをconfig / initializersディレクトリに生成することができ、ファイルを編集します。

$ rails g kaminari:config

生成されたファイルを見てみましょう。

# frozen_string_literal: true
Kaminari.configure do |config|
  config.default_per_page = 20  # ここの数値に修正を加えましょう
  # config.max_per_page = 25   
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.params_on_first_page = false
end

今回は1ページあたり20件の掲示板が表示されるようにしたいので、数値を修正しましょう。

また、各々のメソッドのデフォルト値は公式リファレンスより、このようになっています。

default_per_page      # 25 by default
# 1ページあたりの表示件数(デフォルトは25レコード)

max_per_page          # nil by default
# 1ページあたりの最大表示件数(デフォルトはnil。つまり無限)

max_pages             # nil by default
# 最大ページ数(デフォルトはnil)

window                # 4 by default
# 現在のページから、左右何ページ分のリンクを表示させるか(デフォルトは4件)

outer_window          # 0 by default
# 最初(First)と最後(Last)のページから、左右何ページ分のリンクを表示させるか(デフォルトは0件)

left                  # 0 by default
# 最初(First)のページから、何ページ分のリンクを表示させるか(デフォルトは0件)

right                 # 0 by default
# 最終(Last)ページから、何ページ分のリンクを表示させるか(デフォルトは0件)

page_method_name      # :page by default
# モデルに追加されるページ番号を指定するスコープの名前:page by default

param_name            # :page by default
# ページ番号を渡すために使用するパラメータ名(デフォルトは:page)

params_on_first_page  # false by default
# デフォルトでは、最初のページでparamsを無視する。フィルター機能などをparamsを利用して実装していた場合に、問題が起きる場合があり、その解決策としてのメソッド。
[参考](https://nekorails.hatenablog.com/entry/2018/10/15/005146)

コントローラにページネーションのコードを追記する

設定が終わったので早速 page メソッドを適用させたいアクションに使ってみましょう。

def index
  @boards = Board.all.includes(:user).order(created_at: :desc).page(params[:page])
end

def bookmarks
  @bookmark_boards = current_user.bookmark_boards.includes(:user).order(created_at: :desc).page(params[:page])
end

ページネーションを表示させる

コントローラで設定したインスタンス変数をpaginate ヘルパーメソッドに渡してViewファイルに埋め込みます。

<%= paginate @boards %>
<%= paginate @bookmark_boards %>

ページネーションのデザイン変更

1. フレームワークのデザインを適用させる

ジェネレートコマンドによって、任意のテンプレートファイルを選択して適用させることができます。

$ rails g kaminari:views THEME

THEME 任意のテンプレートファイル

このコマンドはkaminari_themesというリポジトリから指定したテーマのテンプレートファイルをフェッチしています。

以下の記事から他のスタイルも参考にしてみてください。

【Rails】ページネーション「kaminari」で用意されているテーマ一覧とスタイルのカスタマイズ
はじめに Railsアプリにページネーションを簡単に実装できるkaminariというGemには、BootstrapなどのCSSフレームワークのテーマ(テンプレートファイル)が用意されています。わざわざCSSフレームワークのクラスを手動で付与しなくても、専用コマンドを実行するだけで各テーマのテンプレートファイルをRail...

今回は事前に使用しているBootstrap4のスタイルを採用します。

$ rails g kaminari:views bootstrap4

2. 手動で見た目を変える

また、フレームワークデザインを使わない場合、自分でCSSを当てることもできます。

$ rails g kaminari:views default

このコマンドによってapp/views フォルダにkaminari が追加されます。

そのフォルダの中にページネーションの部分のhtmlが記述さていますので、そちらで変更を行ってください。

まとめ

  • ページネーションは、1つのページに掲載するコンテンツ数を制限して表示させるもの
  • railsではkaminariというgemを使って簡単にページネーションを実装できる
  • ページネーションの設定を変えるに場合は、コマンドを実行して生成されたファイルを生成する
  • ページネーションの見た目を変える場合は、コマンド実行してフレームワークを適用させる

終わりに

kaminariによって非常に簡単にページネーションを実装させることができました。自分で設定を変えてみてどう変化するか試してみましょう。

参考記事

第10章 ユーザーの更新・表示・削除 - Railsチュートリアル
SNS開発やWebサイト制作が学べる大型チュートリアル。作りながら学ぶのが特徴で、電子書籍や解説動画、質問対応、社員研修、教材利用にも対応しています。
ページネーションとは?SEO上で考慮すべき実装ポイント
ページネーションとは長くなってしまったWebページを複数に分割し、分割された各ページに対しリンクを設置しアクセスしやすくすることを指します。ブログサイトの記事一覧ページや、Google検索、ECサイトなどによく設置されています。 この記事ではページネーションのSEO効果や設定方法を解説します。 2019...
【Rails】kaminariの使い方をざっくりまとめてみた
GitHub - kaminari/kaminari: ⚡ A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Ruby webapps
⚡ A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Ruby webapps - GitHub - kaminari/kaminari: ⚡ A Scope & Engine ba...
【Rails】ページネーション「kaminari」で用意されているテーマ一覧とスタイルのカスタマイズ
はじめに Railsアプリにページネーションを簡単に実装できるkaminariというGemには、BootstrapなどのCSSフレームワークのテーマ(テンプレートファイル)が用意されています。わざわざCSSフレームワークのクラスを手動で付与しなくても、専用コマンドを実行するだけで各テーマのテンプレートファイルをRail...
kaminariの使い方を理解してページネーションを実装しよう
ページネーションを簡単に実装できるgemのkaminariの使い方を解説しています。この記事を読めば簡単にページネーションを実装することができるようになります。ページネーションのデザインや文字の変更方法などもこの記事で理解しておきましょう。

コメント

タイトルとURLをコピーしました