Madogiwa Blog

主に技術系の学習メモに使っていきます。

RubyonRails:kaminariを使ってページャーを簡単に実装する

f:id:madogiwa0124:20170729104257p:plain

開発中のサービス「いつもの更新、いつでも確認 | Moook」でページャーを実装する際に使用したgemkaminariの使い方をメモφ(..)

github.com

使い方

gemのインストール

kaminariを使うには、gemファイルに追加しbundle installを実行します。

Gemfile

gem 'kaminari'

実装

ページャーを作るために必要な箇所はControllerViewのみです・ω・ 処理の概要を説明すると下記のような感じです。

Source 実装内容
Controller リクエストパラメーターから渡されたページ番号を使って、検索結果取得範囲を制御する。
View ページャーを生成し、設置する

具体的なプログラムも下記に記載しておきますφ(..)

Controller

  def index
    @pages = Page.favorited_pages(current_user).page(params[:page]).per(9)
  end

取得結果に.page(params[:page])及び.per(1ページ辺りの件数)追記することで、ページ番号を指定した検索結果の制御が行えます。
検索結果の制御は、引数のページ番号とクエリメソッドのlimitoffsetを使って実現されていますφ(..)
offsetlimitの詳細は、下記記事にまとめたので知りたい人がいれば見てみてください。

madogiwa0124.hatenablog.com

View

ページャーの設置を行う前に、ページャーのviewを生成します。
下記コマンドを実行すると、app/views/kaminari配下にページャーのviewファイルが作成されます。

$ rails g kaminari:views default

その後、Controllerで取得したインスタンス変数をpagenateに引数として渡してあげれば、ページャーが生成されます。

<%= paginate(@pages) %>

また、bootstrapをページャーに反映させるのも下記からファイルを取得してapp/views/kaminari配下のファイルを差し替えてあげれば簡単に出来ます!

github.com

↓こんな感じ

f:id:madogiwa0124:20170927214342p:plain

ローカライズ

先程の画像では、ページャーの日本語化が行われていました。
これは、kaminariページャーの表示をconfig/locales/ja.ymlに追記することで設定できます。 これをやらないと翻訳を失敗した際に上手く表示されません・・・。
※私が導入した際もtruncateが翻訳に失敗し、Truncateと表示されてしまいました(´・ω・`)

ja.yml

  views:
    pagination:
      first: "最初"
      last: "最後"
      previous: "前"
      next: "次"
      truncate: "..."

applicaiton.rbconfig.i18n.default_locale=:jaとなっていることが前提です。

おわりに

kaminariを使えば、簡単にページャーを設定することが出来ます!
ページャーを用いることで、取得レコード数が制限され表示のパフォーマンスも良くなると思いますので、皆さんも自分が作っているRailsアプリケーションに導入してみてはいかがでしょうか?ヽ(´エ`)ノ