Program LOG

勉強した内容をまとめ中。。。間違ってたら教えて。。。

Ruby on Rails - kaminariでページング

ruby Ruby on Rails(ROR)

この前までに、登録、読込、更新、削除を行ってきたので、ざっくりとしたRailsの概要をつかむことが出来ました。
今回はライブラリを使用してページング機能を実装してみたいと思います。
前回までのファイルは一旦封印して、１から実装したいと思いますｗ
また、前回行った最短開発環境構築を行っている前提で解説していきたいと思いますので、
これまでの経緯は下記ページを参考になさってください！

目次を作成しました！以下のページへ！
初めてのruby開発 - 目次 - Program LOG
WindowsでRuby on Rails最短開発環境構築 - Program LOG

参考にしたサイト

#06 rails db/rails consoleを使おう | Ruby on Rails 4入門 - プログラミングならドットインストール
» Railsライブラリ紹介: ページングを行う「kaminari」 TECHSCORE BLOG
Rails4のページングを含むルーティングについて - QA@IT

Railsライブラリ「kaminari」

Railsには様々なライブラリが存在しています。
そのライブラリの「kaminari」を使用してページングを実装していきたいと思います。

kaminari の導入

まずは、kaminariを導入していきます。
Gemfileに以下の行を追加します。

gem 'kaminari'

次に、bundle installを実行します。

[vagrant@localhost sample]$ bundle install
Fetching gem metadata from https://rubygems.org/...........
Fetching additional metadata from https://rubygems.org/..
Resolving dependencies...
・・・中略
Installing kaminari 0.15.1
・・・中略
Your bundle is complete!
Use `bundle show [gemname]` to see where a bundled gem is installed.

これで使用する準備完了です！

テストデータの用意

今回は、テスト用にPagetestというモデルをgenerateしてみました。以下の通りです。

[vagrant@localhost sample]$ rails generate model Pagetest title:string
      invoke  active_record
      create    db/migrate/20140512131735_create_pagetests.rb
      create    app/models/pagetest.rb
      invoke    test_unit
      create      test/models/pagetest_test.rb
      create      test/fixtures/pagetests.yml
[vagrant@localhost sample]$ rake db:migrate
== 20140512131735 CreatePagetests: migrating ==================================
create_table(:pagetests)
 > 0.0024s
== 20140512131735 CreatePagetests: migrated (0.0024s) =========================

sqliteを使ったことが無いので、テーブル一覧を確認するだけでもいっぱい×２でしたｗ
さて、続いて、テストデータのインサートを行っておきたいと思います。

[vagrant@localhost sample]$ rails console
irb(main):001:0>Pagetest.create(title: "test1")

rails consoleで上記のような内容を50個作成しました。
最後にコントローラーをgenerateして準備完了となります。

[vagrant@localhost sample]$ rails g controller Pagetest
      create  app/controllers/pagetest_controller.rb
      invoke  erb
      create    app/views/pagetest
      invoke  test_unit
      create    test/controllers/pagetest_controller_test.rb
      invoke  helper
      create    app/helpers/pagetest_helper.rb
      invoke    test_unit
      create      test/helpers/pagetest_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/pagetest.js.coffee
      invoke    scss
      create      app/assets/stylesheets/pagetest.css.scss
[vagrant@localhost sample]$ rails s
=> Booting WEBrick
=> Rails 4.1.1 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
=> Notice: server is listening on all interfaces (0.0.0.0). Consider using 127.0.0.1 (--binding option)
=> Ctrl-C to shutdown server
[2014-05-12 13:40:30] INFO  WEBrick 1.3.1
[2014-05-12 13:40:30] INFO  ruby 2.0.0 (2014-05-08) [x86_64-linux]
[2014-05-12 13:40:30] INFO  WEBrick::HTTPServer#start: pid=14588 port=3000

基本的なページング

さて、準備が完了したので、実装していきたいと思います。
まずは、コントローラーから修正していきます。
基本的な扱い方ですが、以下のように「page」スコープを使用していきます。
以下の例では、2ページ目を表示します。

class PagetestController < ApplicationController
  def index
    @item = Pagetest.page(2)
  end
end

このままだと実用的では無いので、、、以下のように設定しました。

class PagetestController < ApplicationController
  def index
    @item = Pagetest.page(params[:page]).per(10).order("created_at DESC")
  end
end

次にビューを作っていきます。

<table>
  <tr>
    <td>タイトル</td>
  </tr>
  <% @item.each do |v| %>
  <tr>
    <td><%= v.title %></td>
  </tr>
  <% end %>
</table>
<%= paginate(@item) %>

paginate関数？を使用する事で自動的にページャーが表示されます。

各種設定について

kaminariの基本的な設定は、以下のようにconfigファイルを生成する事で
デフォルトを設定する事が出来るようになります。
以下のようにgenerateする事で自動生成されます。

[vagrant@localhost sample]$ rails generate kaminari:config
      create  config/initializers/kaminari_config.rb

生成されたファイルを開くと以下のようになっていますので、
デフォルト設定したい場合は、修正しましょう。

Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
end

各設定項目の意味は以下の通りです。

  • config.default_per_page
    • ページあたりの表示件数
  • config.max_per_page
    • ページあたりの表示件数の最大
  • config.window
    • 現在ページから左右に何ページ分のリンクを生成するかの設定
  • config.outer_window
    • PrevとNextから何ページ分リンク生成するかの設定、以下のleft、rightを指定した場合はそちらが優先されます。
  • config.left
    • Prevから何ページ分リンクを生成するかの設定
  • config.right
    • Nextから何ページ分リンクを生成するかの設定
  • config.page_method_name
    • モデルに追加されるページ番号を指定するスコープ名
  • config.param_name
    • ページ番号を渡すためのリクエストパラメーター

モデルでの指定

class Pagetest < ActiveRecord::Base
 paginates_per 10
 max_paginates_per 20
end

Viewでの指定

<%= paginates(@user, :outer_window => 3) %>
<%= paginates(@user, :params => {:other_param => 'p'}) %>

日本語設定について

ロケールファイルを修正すると、日本語化することが出来ます。
ロケールファイルは、以下のように設定すると反映するようになります。
/config/application.rb

config.i18n.default_locale = :ja

そして、「/config/locales/」の中に「ja.yml」ファイルを作成し、
以下のように記載します。

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

以上で設定が完了となります！
非常に簡単な設定でいけるようになります。
また、Bootstrapと併用して使うのが主流になってきているようです。
それは、また別の記事で書いていければと思います。

使用環境