ズラーっと並んだ画像を整理したい人におすすめgem(Kaminari)について紹介

5619 ワード
Gem pagenation Ruby Rails Ruby テキストリンク

どうもこんにちは、

フリーターのブロガーのエンジニア志望です。（ながっ）



今回は、僕が実際に使ってとてつもなく衝撃を受けたGemの一つである

kaminari

というかっこいい名前のGemを紹介しさせてもらいたいと思います！！

投稿型アプリ開発をしている中で商品画像が溜まってくると見づらくなって嫌だな〜と思うことありませんか？

そんな悩みを解決してくれるGemなので、投稿型アプリを作っている方はぜひ使ってみてください！！



まず前提として、
今回は既存アプリに導入するﾃｲで話させてもらいます。

なのでまだ投稿機能ができていないよ〜
という方はそこから始めてください。

ではまず最初にGemfileを開き

gem 'kaminari'

と下の方に書き込み

bundle install

してあげましょう

次にページネーションを適用したいviewファイル,
controllerファイルに
記入を加えます
僕の場合は本をページネーションしたかったので、
こう書きました

books_controller.rb

  def index
   @books =Book.all
   @books = Book.page(params[:page]).per(1).order('updated_at DESC')
   @book =Book.includes(:user)
   set_book_column 
  end
book.html.erb
<%# 本の情報 %>
  <div>
    <% @books.each do |book|%>
     <% if book.present?%>
      <tr>
        <td> <h3 class="item-name"><%= book.genre.type %></h3></td>
        <td> <h2 class="item-name"><%= book.name %></h2></td>
        <%= link_to "/books/#{book.id}" do %>
        <td><%= image_tag book.image , id: 'slideshow' if book.image.attached?%></td>
        <% end %>
      </tr>
     <%end%>
    <% end %>
   </div>
   <div id="page">
     <%=paginate @books %>
   </div>

加えた記述は

books_controller.rb
   @books = Book.page(params[:page]).per(1).order('updated_at DESC')
index.html.erb
<%=paginate @books %>



まさかのこれ
だけ

gemすげーってなります笑　(語彙力）

ちなみに

.order('updated_at DESC')

と加えると順番を最新のやつからにできるので
こだわりたい人は入れてみましょう。

また、デザインを良くしたい人は

application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Books</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <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_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  </head>

  <body>
    <%= yield %>
  </body>
</html>

してから

rails g kaminari:views bootstrap3

するとデフォルトでまぁまぁなデザインができます

ぜひ使ってみてください！！

また、
何か間違っている所があれば、
大変お手数ですが、この記事を見てくださった人が被害を受けないためにもコメントお願いします！！

この記事は以下の情報を参考にして執筆しました。