3
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-09-01

どうもこんにちは、

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



今回は、僕が実際に使ってとてつもなく衝撃を受けた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 %>



まさかのこれ
だけ:sunny:

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

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

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

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

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

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0