YouTubeチャンネルの動画を一覧表示したい

桃鈴ねねさんが大好きで勝手にファンサイトを作ってます。

要するにアーカイブを全部表示したいと思っています。
ただまぁ流石に現時点で280本近くあるアーカイブを全部表示するのも問題なので、ページネーションを使いましょう。

gem "kaminari"

で、いつも通り、bundle install(migration済みの場合はローカルサーバーの再起動)

次はルーティング

config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: "home#index"
  resources :archive
end

特に意味はないですが、全部ルーティングしておきました。
後々、追加機能を作りたくなった時に便利だと思うので。

次はcontroller

app/controllers/archive_controller.rb

class ArchiveController < ApplicationController
  def index
    @archive = Archive.all.page(params[:page]).per(15)
  end
end

今回はkaminariを導入しているので、Archive.allの後にオプションをつけます。
perの引数に1ページあたりに表示する件数を設定できます。
ちなみに特に設定しなくても大丈夫ですが、デフォルトは25件になってます。

app/views/archive/index.html.erb

#詳しい構成は省略
<h2 class="major">Archives</h2>
　　<h3>オススメ動画</h3>
　　　　<div class="archive">
　　　　　　<%= render partial: "archive" , collection: @archive %>
　　　　</div>
<%= paginate @archive %>

renderメソッドを使用して、さらにオプションをcollectionにします。
これで先程のcontrollerで設定した@archiveに入っている要素の数だけ、繰り返してくれるので、便利です。
最後のpaginateは実際にページネイトを表示したい場所に入れてください。

app/views/archive/_archive.html.erb

  <div class = "archive_card">
    <%= image_tag (archive.archiveimg) , class: :music_img %>
    <p><%= archive.archivetitle %></p>
  </div>

先程の繰り返しになりますが、collectionのおかげで、この辺の記述はシンプルに。
わざわざeachで繰り返し処理を記述する必要もないです。

app/assets/stylesheets/main.css.erb

.archive{
  column-count: 2;
  display: inline-block;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.archive_card{
width:100%;
height:100%;
padding : 0;
margin: 0 ;
position: relative;
}

.archive_card p{
  font-size : 0.5rem;
  position: absolute;
  color: black;
  top: 80%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background-color: rgba(255, 255, 255, 0.6);
  width:100%;
  font-weight:bold;
  text-align:center;
}

最後にCSSですね。
まずdisplay: inline-block;とかで横並びにしちゃってjustify-contentでspacebetweenにしてます。
あとサムネイル画像の上にタイトルを表示したいと思いました。
理由は単純で、アーカイブが多いから。
なんせ280件もあるので、いちいちサムネイルとタイトルをそれぞれ表示してたら情報量が多いし、そもそもタイトルの長さもまちまちでカラム表示しててもズレが生じてしまうので、サムネイル上にタイトルを表示すると言うことで落ち着きました。

重要なポイントだけ記述しておくと、サムネイル画像の親要素であるarchive_cardにposition:relativeを指定してその子要素のp要素にposition:abusolute;を指定しました。
これでサムネイルの画像にp要素を載せることができます。
あとはp要素にbackgroundカラーを指定して、透過もしておきます。
サムネイルは比較的上部に桃鈴ねねさんの顔がくることが多いので、下の方にタイトルを表示して可愛い顔と被らないようにします。
これがもしブログみたいな感じだったらセンターでも良いのでしょうが。

さて、長くなりましたが、完成形です。
PC表示

スマホ表示

必要な情報はありつつも、シンプルな構成にできたと思います。
これと似たようなことを他のモデルでも行うので、ひとまずベースがこんな感じ、と言うことで。