【Rails初心者】ページネーションを実装して自分好みにデザインを変える

railsでのページネーションの実装とデザインの変更方法をまとめました。
ページネーションのデザインを自分好みに作れるとテンション上がります。
最終目標はこちら⬇︎
<img width="491" alt="スクリーンショット 2019-05-23 21.13.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/d5c31b41-2fc8-3c64-b42d-a784e5a49291.png">




#ページネーションの実装
kaminariというページネーション用のgemを使って実装していきます。
簡単に実装できるので一緒にやっていきましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/627df594-7214-86a7-d276-e4bc2f1c23ac.png)
このようなページネーションができます。

##1.kaminariのインストール
Gemfileに`gem 'kaminari'`を追加し、`$ bundle install`でインストールします。

```ruby:Gemfile
# 最後の行に追加
gem 'kaminari'
```

`$ bundle install`

gemをインストールした後は一度サーバを再起動しないとうまく読み込まれません。`Ctrl-c `でサーバを止め、`$ rails s`でサーバを起動しましょう。

これでkaminariをインストールすることができました。

##2.ページネーションを表示させる
controllerで、ページネーションを表示させたいデータに`.page(params[:page])`を追加します。
今回は例として、投稿データ(Post.all)にページネーションをつけていきます。

```ruby:app/controllers/users_controller.rb
def index
  # ページネーションをつけたいデータに.page(params[:page])を追加
  @posts = Post.all.page(params[:page])
end
```

次に、viewでページネーションを表示させたいところに`<%= paginate @posts %>`を追加します。

```erb:app/views/posts/index.html.erb
<h1>投稿一覧</h1>

<ul>
  <% @posts.each do |post| %>
    <li><%= post.content %></li>
  <% end %>
</ul>

<%= paginate @posts %>
```

これでページネーションが実装できました！

ページネーションが1ページに表示するレコード数はデフォルトで25件です。ページネーションを表示させるために、レコード数が26件以上になるようデータを作りましょう。

レコード数が26件以上あれば、ページネーションが表示されます。

##3.ページに表示するレコード数の変更
1ページに表示するレコード数はデフォルトで25件です。このレコード数を変更したい場合は、controllerで`.per(表示したいレコード数)`を追加します。

例えば、`.per(10)`を追加すると1ページに10件のみレコードを表示します。

```ruby:app/controllers/users_controller.rb
def index
  # .page(params[:page])の後に.per(10)を追加
  @posts = Post.all.page(params[:page]).per(10)
end
```

これで1ページに表示するレコード数を10件にすることができます。

#ページネーションのデザイン変更
ページネーションが実装できたら、デザインを変更して見た目を分かりやすくしましょう。

##1.bootstrapで見た目を整える
kaminariにbootstrapを適用させて、整ったページネーションにします。

まずはじめにbootstrapを読み込みます。
`app/views/layouts/application.html.erb`に以下のコードを追加して、アプリ全体にbootstrapを適用します。

```erb:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Microposts</title>
    <%= csrf_meta_tags %>

    <!-- コード追加　Bootstrap CSS読み込みコード-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- コード追加　Bootstrap JavaScript読み込みコード-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
```

これでアプリにbootstrapが適用されます。

次に、kaminariにbootstrapを適用させます。
以下のコマンドを実行しましょう。

```shell:command
$ rails g kaminari:views bootstrap3
```

このコマンドにより`app/views`に`kaminari`フォルダが自動生成され、ページネーションにbootstrapデザインが適用されます。
<img width="505" alt="スクリーンショット 2019-05-25 9.37.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/2e7a354c-214a-c442-c991-fcef983aea4c.png">
スッキリしたデザインのページネーションになりました！

##2.cssでデザインを変える
bootstrapを適用させることで、かなり見やすいページネーションになりました。次は、cssを変更してさらに自分好みのデザインに変えていきましょう。
`app/assets/stylesheets/application.css`からデザインを変更していきます。

```css:app/assets/stylesheets/application.css
/*ページネーション自体のデザイン*/
.pagination>li>a {			
  border: none;		/*枠線をなくす*/
  color: #696969;	/*文字の色を変える*/
}

/* 表示しているページ番号のデザイン */
.pagination>.active>a {		
  background: #93c9ff;	   /*背景の色を変える*/
  border-radius: 15px;	   /*角を丸くする*/
}

/*ホバー時のデザイン*/
.pagination>li>a:hover {		
  border-radius: 15px;	  /*角を丸くする*/
}
```
このようにcssを設定すると、デザインは以下のようになります。
<img width="476" alt="スクリーンショット 2019-05-25 11.51.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/750a071c-0b83-1eb3-86b4-a10e99587943.png">

かわいらしいデザインになりました。


##3.ラベルを日本語に変更する
ラベルとは、ページ番号の前後についている`<<First`や`<Prve`のことです。
デフォルトでは英語表記なので、こちらを日本語に変更していきます。

###railsアプリのデフォルト言語を日本語に設定する
ラベルはi18nに対応しています。
`config/application.rb`の`module`に`config.i18n.default_locale = :ja`を追加し、デフォルト言語を日本語に設定しましょう。

```ruby:config/application.rb
#最後
module Testapp(自分のアプリ名)
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
    config.i18n.default_locale = :ja #追加
  end
end
```
サーバを再起動して設定を反映させます。`Ctrl-c `でサーバを止め、`$ rails s`でサーバを起動しましょう。

###ラベルの変更
`config/locales`に日本語変換用のymlファイル`ja.yml`を作成し、以下のコードを追加します。

```yml:config/locales/ja.yml
ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "..."
```
これでページネーションのラベルを日本語に変更できました!
<img width="422" alt="スクリーンショット 2019-05-25 14.31.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/b8f5f5cd-958f-fc33-0c7e-da6c666ed671.png">
初期デザインと比べて、見やすいページネーションになりました。

##おまけ：ラベルをシンプルにする
ラベルをアイコンのみにすることで、よりシンプルなページネーションを作ることができます。
今回は、**Font Awesome**からアイコンを探し使っていきます。

[Font Awesomeのサイト](https://fontawesome.com/)

まずはじめに、Font Awesomeを読み込みます。
`app/views/layouts/application.html.erb`に以下のコードを追加して、アプリ全体にFont Awesomeを適用します。

```html:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Microposts</title>
    <%= csrf_meta_tags %>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- コード追加　Font Awesome読み込みコード-->
　　 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  </head>
```
これでFont Awesomeが適用されました。

次に、`config/locales/ja.yml`を編集します。
使用したいアイコンのコードに書き換えましょう。

```yml:config/locales/ja.yml
ja:
  views:
    pagination:
      first: <i class="fas fa-angle-double-left"></i>
      last: <i class="fas fa-angle-double-right"></i>
      previous: <i class="fas fa-angle-left"></i>
      next: <i class="fas fa-angle-right"></i>
      truncate: "..."
```

よりシンプルなページネーションにすることができます。
<img width="350" alt="スクリーンショット 2019-05-25 15.03.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373922/ef175101-15cd-2c80-2f19-d120cf0696ee.png">

##参考
[Kaminariの使い方 まとめ - 猫Rails](http://nekorails.hatenablog.com/entry/2018/10/15/005146)