【Rails】kaminariの使い方を徹底解説!

Rails

kaminariとは

railsのgemの一つでページネーションを簡単に実装するためのものです。

そもそもページネーションってなに?

ページネーションというのは1つのページに掲載するコンテンツが多くなってしまった時、複数ページに分けて表示させるようにしたものです。
みなさんもYahoo!やGoogleで検索したときに1 2 3 ・・・・と表示されているのをみたことがあるかと思います。

ページネーション

なぜページネーションが必要なのか

トップページはほとんどのサイトが情報の一覧を載せています。
その情報が少なければいいですが、例えば投稿一覧がトップページに表示されるサイトの場合、全ての投稿がトップページに表示されると読み込むまでに時間がかかりますし、かなり読みにくくなってしまいますよね。

そんなときにページネーションの機能を実装しておけば表示される項目が一定数を越えると自動的に次のページへ内容を移行してくれるのでものすごい便利になります。

gemをインストールしよう

それではrailsのアプリでページネーション機能を実装してみましょう。
Gemfileの一番下にこのように記述してください。

ruby
1
gem 'kaminari'

その後、ターミナルで「bundle install」を行いましょう。
これでkaminariで定義されたメソッドや機能を使うことができるようになります。

ページネーションを定義してみよう

それでは実際のコードを書き方を確認してみましょう。
コントローラーでは下記の様に定義します。

ruby
1
2
3
def index
  @users = User.page(params[:page]).per(10)
end

「page」と「per」いうメソッドがkaminariで定義されたメソッドです。
「per」メソッドの引数にどれだけのレコードが表示されたらページを増やすかを指定できます。

ビューでページネーションが表示される場所は下記のように定義します。

erb
1
<%= paginate @users %>

たったこれだけでページネーションが実装できます。
ものすごい便利なgemですね!

もちろんページネーションが表示されるには表示される数が定義した数より多い必要があります。

ページネーションの見た目を変える方法

kaminariで表示させるページネーションはビューの中でcssを当てる事は出来ません。
見た目を変えたい場合はターミナルで下記のコマンドを実行します。

shell
1
$ rails g kaminari:views default

すると「app/views」フォルダに「kaminari」が追加されます。
そのフォルダの中にページネーションの部分のhtmlが記述されているので、そちらで変更を行いましょう。

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

bootstrapなどのcssのフレームワークを使っている場合、表示やデザインが崩れる場合があります。
その時は上のコマンドの「default」の部分をそれぞれのフレームワークの名前に指定します。
bootstrap4を使っている場合は下記のコマンドになります。

shell
1
$ rails g kaminari:views bootstrap4

用意されているフレームワークは下記のものがあります。

  • bootstrap4
  • bourbon
  • bulma
  • foundation
  • materialize
  • pure css ※指定するコマンドは「purecss」
  • semantic ui ※指定するコマンドは「semantic_ui」

このコマンドを実行し、ビューファイルを作成すると何も編集しなくてもそれぞれのフレームワークのスタイルに最適化されます。

kaminariを日本語化する方法

ビューファイルではページネーション内の文字を変更することはできません。
デフォルトだと英語なので日本語にしたい時は新たなファイルを作成します。

config/localesフォルダにkaminari_ja.ymlというファイルを作成し、下記のようなコードを書けばOKです。

ruby
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "..."
  helpers:
    page_entries_info:
      one_page:
        display_entries:
          zero: ""
          one: "<strong>1-1</strong>/1件中"
          other: "<strong>1-%{count}</strong>/%{count}件中"
      more_pages:
        display_entries: "<strong>%{first}-%{last}</strong>/%{total}件中"

これでページネーション内の文字を編集することができます。

実際のアプリでページネーションを使ってみよう

それでは実際にアプリの中でページネーションを実装してみましょう。
下記のコマンドを順に実行してみましょう。
①git clone -b kaminari https://github.com/miyagit/programan_dojo.git

② cd programan_dojo

③ bundle install
→ rbenv: version ‘2.4.1’ is not installed と表示された場合は、ruby -v と実行してください。
ruby -vと実行し出てきたversion(例: 2.3.1)と出てきたら、

vim .ruby-versionとし、
ruby -vで出てきた値(例: 2.3.1)に書き換えてください。

続いてvim Gemfileとし、ruby 2.4.1と書いてある部分をruby -vで出てきた値(例: 2.3.1)に書き換えてください。

④ rails db:create && rails db:migrate && rails db:seed

環境構築が完了しました。と表示されると、
本当にrails applicationが動作するかrails sコマンドで起動しましょう。

rails sを起動し、ブラウザでlocalhost: 3000と入力して下記のような画面が出てくれば環境構築完了です!

環境構築

kaminariのgemを追加しよう

それではページネーションを簡単に実装できるgemのkaminariをインストールしましょう。
Gemfileの末尾に下記のコードを入力してください。

ruby
1
gem 'kaminari'

その後、ターミナルで「bundle install」を実行しましょう。

コントローラーにページネーションのコードを書いてみよう

これでkaminariが定義しているメソッドを使うことができるようになりました。
早速Mainコントローラーのtopアクションで使ってみましょう。
Mainコントローラーのtopアクションを下記のように編集してください。

ruby
1
2
3
4
    def top
        @title = "gemのkaminariを使ってページネーションを実装してみよう"
        @users = User.page(params[:page]).per(5)
    end

次にビューにページネーションが表示される記述をします。
top.html.erbを下記のように編集してください。

erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class='p-top'>
    <p class='p-top__title'>今回の記事の目標:<%= @title %></p>
    <table border="1" class='p-top__introduce'>
    <tr>
    <th>id</th>
    <th>名前</th>
    <th>年齢</th>
    <th>身長</th>
    <th>体重</th>
    </tr>
    <% @users.each do |user| %>
    <tr>
      <td><%= user.id %></td>
      <td><%= user.name%></td>
      <td><%= "#{user.age}歳" %></td>
      <td><%= "#{user.tall}cm" %></td>
      <td><%= "#{user.weight}kg" %></td>
      </tr>
    <% end %>
  </table>
  <%= paginate(@users) %>
</div>

21行目にコードを追加しました。

今回の記述ではTOPページに表示されるユーザーをperメソッドで5人と指定しました。
ですのでユーザーが5人以上登録されているとページネーションが表示されるはずです。
実際のビューで確認をしてみましょう。

その前に新しくgemをインストールしたのでサーバーの再起動をしましょう。
サーバーを立ち上げていたらcontrol+ cでサーバーを止めてrails sでサーバーを立ち上げてください。

サーバー再起動

このようにしっかりとページネーションが付いていますね!
表示されているユーザーも7人から指定した通り5人になっているのがわかります。
残りの2人は次のページに表示されているはずです。
「2」をクリックして確認してみましょう。

ページネーション

ちゃんと残りの2名が表示されていますね!

ただページネーションがかなり画面の左に寄ってしまっているので中央に寄せましょう。
ページネーションを表示させるコードに下記のスタイルを指定してください。

erb
1
<div class='p-top__paginate'><%= paginate(@users) %></div>

新たなスタイルを追加したのでスタイルシートにも定義しましょう。
assets/stylesheets/top.scssのファイルを下記のように編集してください。

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.p-top {
  min-width: 960px;
  &__title {
    text-align: center;
    font-size: 16px;
  }

  &__introduce {
    margin: 0 auto;
    th {
        padding: 0 15px;
    }
    td {
      padding: 0 15px;
    }
  }
  &__paginate {
    text-align: center;
    margin:0 auto;
  }
}

このように中央寄せになっているのが確認できます。

中央寄せ

それでは1ページに表示されるレコード数を変えてみましょう。
現在は5人なので3人にしてみましょうか。
それにはどの部分を変えたらよかったでしょう。

そうですね「per」メソッドの引数の値を変えてあげれば良いですね。
下記のようにMainコントローラーのtopアクションを編集しましょう。

ruby
1
@users = User.page(params[:page]).per(3)

それではビューが変わっているか確認してみましょう。

ビューの確認

このように表示される人数が3人になり、その分ページネーションのページ数が3になっているのが確認できました。

まとめ

kaminariはページネーションを簡単に実装できるgemです。