公開日: | 最終更新日:
【Rails】 kaminariの使い方を理解してページネーションを実装しよう
kaminariとは、rubyのgemの一つでページネーションを簡単に実装するためのものです。
ページネーションというのは1つのページに掲載するコンテンツが多くなってしまった時、複数ページに分けて表示させるようにしたものです。
みなさんもYahoo!やGoogleで検索したときに1 2 3 ・・・・と表示されているのをみたことがあるかと思います。この部分をページネーションと呼びます。
Railsでは、kaminariというgemを使うことによって簡単に実装することが出来ます。
kaminariの使い方
この章では、kaminariの使い方について丁寧に解説します。
なぜページネーションが必要なのか
トップページはほとんどのサイトが情報の一覧を載せています。
その情報が少なければいいですが、例えば投稿一覧がトップページに表示されるサイトの場合、全ての投稿がトップページに表示されると読み込むまでに時間がかかりますし、かなり読みにくくなってしまいますよね。
そんなときにページネーションの機能を実装しておけば表示される項目が一定数を越えると自動的に次のページへ内容を移行してくれるのでものすごい便利になります。
gemをインストールしよう
それではrailsのアプリでページネーション機能を実装してみましょう。
Gemfileの一番下にこのように記述してください。
1
gem 'kaminari'
その後、ターミナルでbundle install
を行いましょう。
これでkaminariで定義されたメソッドや機能を使うことができるようになります。
ページネーションを定義してみよう
それでは実際のコードを書き方を確認してみましょう。
コントローラーでは下記の様に定義します。
1
2
3
def index
@users = User.page(params[:page]).per(10)
end
page
とper
いうメソッドがkaminariで定義されたメソッドです。
per
メソッドの引数にどれだけのレコードが表示されたらページを増やすかを指定できます。
ビューでページネーションが表示される場所は下記のように定義します。
1
<%= paginate @users %>
たったこれだけでページネーションが実装できます。
ものすごい便利なgemですね!
もちろんページネーションが表示されるには表示される数が定義した数より多い必要があります。
ページネーションの見た目を変える方法
kaminariで表示させるページネーションはビューの中でcssを当てる事は出来ません。
見た目を変えたい場合はターミナルで下記のコマンドを実行します。
1
$ rails g kaminari:views default
するとapp/views
フォルダにkaminari
が追加されます。
そのフォルダの中にページネーションの部分のhtmlが記述されているので、そちらで変更を行いましょう。
cssのフレームワークのデザインを適用させる
bootstrapなどのcssのフレームワークを使っている場合、表示やデザインが崩れる場合があります。
その時は上のコマンドのdefault
の部分をそれぞれのフレームワークの名前に指定します。
bootstrap4を使っている場合は下記のコマンドになります。
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です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ja:
views:
pagination:
first: "« 最初"
last: "最後 »"
previous: "‹ 前"
next: "次 ›"
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}件中"
これでページネーション内の文字を編集することができます。
実際のアプリでページネーションを使ってみよう
この章では、アプリケーションにページネーションを追加する方法について解説します。実際に手を動かすことで理解を深めることが出来るので、是非挑戦しましょう。
環境を構築する
それでは実際にアプリの中でページネーションを実装してみましょう。
下記のコマンドを順に実行してみましょう。
1
2
3
git clone -b kaminari https://github.com/miyagit/programan_dojo.git #1.リポジトリを複製する
cd programan_dojo #2.programan_dojoディレクトリへ移動
bundle install #3.gemをインストール
上記のbundle install
を実行した際にrbenv: version ‘2.4.1’ is not installed
と表示された場合は、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)に書き換えてください。
最後に以下を実行します。
1
rails db:create && rails db:migrate && rails db:seed #4.データベース作成と初期データ投入
上記を実行すると「環境構築が完了しました。」と表示されるので、アプリケーションが動作するかrails sコマンドで起動しましょう。
サーバーを起動して、ブラウザにlocalhost: 3000
と入力し、下記のような画面が出てくれば環境構築完了です!
kaminariのgemを追加しよう
それではページネーションを簡単に実装できるgemのkaminariをインストールしましょう。
Gemfileの末尾に下記のコードを入力してください。
1
gem 'kaminari'
その後、ターミナルでbundle install
を実行しましょう。
コントローラーにページネーションのコードを書いてみよう
これでkaminariが定義しているメソッドを使うことができるようになりました。
早速Mainコントローラーのtopアクションで使ってみましょう。
Mainコントローラーのtopアクションを下記のように編集してください。
1
2
3
4
def top
@title = "gemのkaminariを使ってページネーションを実装してみよう"
@users = User.page(params[:page]).per(5)
end
次にビューにページネーションが表示される記述をします。
top.html.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名が表示されていますね!
ただページネーションがかなり画面の左に寄ってしまっているので中央に寄せましょう。
ページネーションを表示させるコードに下記のスタイルを指定してください。
1
<div class='p-top__paginate'><%= paginate(@users) %></div>
新たなスタイルを追加したのでスタイルシートにも定義しましょう。
assets/stylesheets/top.scss
のファイルを下記のように編集してください。
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アクションを編集しましょう。
1
@users = User.page(params[:page]).per(3)
それではビューが変わっているか確認してみましょう。
このように表示される人数が3人になり、その分ページネーションのページ数が3になっているのが確認できました。他にもRailsについて体系的に学びたい方は、こちらの参考書もよく使われています。
この記事のまとめ
- kaminariは、ページネーションを簡単に実装できるgem
- ページネーションは、複数ページに分けて掲載するコンテンツを表示させるようにしたもの
- ページネーションの見た目を変える場合は、コマンド実行して
app/viewsフォルダ
に追加されたkaminari
を変更する必要がある