Webとデザインのあれこれ

プログラミングとUIデザインの学習記録です。

kaminari

kaminariについて

有名なGemパッケージの一つです(名前めっちゃかっこいいですよね)。

ウェブページなどで大量の項目を一覧表示する場合などに、項目を複数のページに分けて表示しますよね。 f:id:b_leiu:20190509175641p:plain

例えば、Googleの検索結果が良い例ですね。

通常webページで大量の項目を表示する場合、1ページに表示する項目数が決まっています。ページ下部のリンク(「1,2,3」など)をクリックすると該当するn番目の検索結果のページに飛ぶことができます。 このような仕組みをページネーションと呼びます。

そして、一覧表示を複数のページに分けるこの仕組みを簡単に実装できるのがkaminari⚡️なのです。 Rails自体にページネーションの機能はありませんので、上手にkaminariを利用しましょう!

kaminariの導入

今回も引き続き、bundlerを用いてkaminariを利用します。 導入方法は非常にシンプルです!

Gemfileの編集

# Gemfile
gem 'kaminari'
gem 'kaminari-i18n'

Gemfileに上記の指定を加えて、bundle installを実行します。

kaminariを導入すると、モデルのクエリーメソッドにpageメソッドが追加されます。

pageメソッドはActiveRecord::Relationオブジェクトを受け取り、該当するオブジェクトを返すため、whereメソッドなどで絞り込んだ結果に対してpageメソッドを実行したり、pageメソッドで得られた結果に対してさらに操作したりできます。

現在のページ数を指定するのに使うメソッドと考えるとわかりやすいかと思います。

コントローラーのアクションの修正

def index
    @books = Book.page(params[:page]).per(3)
end

リンクにはpageパラメータがつきます。コントローラの中でpageメソッドにpage(params[:page])と指定すれば、ユーザーがクリックしたページ番号に応じたページネーションが動作するのです。

per(3)は1件辺りの表示数を指定しています。

テンプレートファイルの修正

# index.html.erb
省略
<%= paginate @books %>

各アクションのテンプレートではpaginateメソッドを使用します。paginateメソッドを利用することで、ページネーションのリンクを埋め込むことが可能となります。 pageメソッドで取り出したオブジェクトがpaginateメソッドに渡されるのです。

ページネーション機能の実装は以上となります。

f:id:b_leiu:20190509183755p:plain

デフォルトの表示件数について補足

デフォルトで1ページあたり25件のレコードが取り出されます。この数字を変更したい場合、以下の2種類の方法があります。

  1. 上記の例のように、都度コントローラーで指定(per(3))
  2. モデル内で一括指定

モデル内で指定

paginates_per 10

最後に

短いですが、以上となります。 kaminari、簡単にページネーション機能が実装できるのでとても便利でした。

参考文献:

qiita.com

www.amazon.co.jp