はじめに

本記事では、slickを用いた記述をいたします。
slickはjQueryベースのスライダーを作成するためのプラグインです。

コード

いろんなサイトやYouTubeの動画を参考にしましたが、
CDNを使用するのが一番良いなという結論に至っています。
（ファイル保存とか色々グダってトラウマ）

<!DOCTYPE html>
<html>
  <head>

省略

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  </head>

  <body>
    <%= yield %>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  </body>
</html>

これだけです。

あと、gem 'jquery-rails'は予めbundle installしています。

以下長いのでランキングの部分だけ。

<h2 class="ranks-title">Ranking !</h2>
  <div class="ranks">
    <% @ranks.each do |food| %>

      <div class="ranks-img-content">
        <h2 class="food-post-user">
          <%= link_to user_path(food.user_id) do %>
            <%= food.user.nickname %>
          <% end %>
        </h2>
            <%= link_to food_path(food) do %>
              <%= image_tag food.image, class: "food-img" if food.image.attached? %>
              <div class="food-img-info">
                <h2 class="shop-name">
                  <%= food.shop_name%>
                </h2>
                <h2 class="food-name">
                  <%= food.food_name%>
                </h2>
              </div>
            <% end %>
      </div>
    <% end %>
  </div>

<script type="text/javascript">
  $(function() {
    $('.ranks').slick({
      dots: true
    });
  });
</script>

ドットは付けたいなと思ったので、即記述しました。
矢印が画面外にいってしまっているので、明日調整しようと思います。

また、
scriptタグを一番下にして記述しましたが、まあまあ汚いコードだと思っています。
ここ含めてリファクタリングのこと考えないとな。

ランキングのことをお話ししているので、
コントローラーも記載します。

  def index
    @foods = Food.order("created_at DESC")
    @like = Like.new
    @ranks = Food.find(Like.group(:food_id).order('count(food_id) desc').limit(5).pluck(:food_id))
  end

いいね数が多い順番で、上から５位までをとっています。
難点なのが、過去の投稿全てのランキングになってしまっているので、改善が必要。
1週間や1ヶ月にいいね獲得数ランキングにするのが一番ベスト。
考えます。

また、リファクタリングの点では、モデルに記載するのが良いですが、
出来上がったことの満足感で後回しにしてしまっています。
後々改善します。

終わりに

導入しましたが、プラグインは便利でかっこいいですね。
導入後、楽しくていっぱい遊んでしまいます。

矢印が画面外にいる点が気持ち悪いので、明日の目標です。

以下参考サイトです。

【Rails】便利なpluckメソッドをマスターしよう！
Railsで週間いいねランキングを作る！
slickの公式サイト
 【Rails】slickでスライドショーを表示させる
 slickの使い方からカスタマイズまで【スライダープラグイン決定版】
jQueryスライダープラグイン9選！スライドショーを手軽に作成
 どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方
 【jQuery】一行でスライダーが動く！slickをご紹介！

それでは、明日も頑張りましょう！！

[jQuery]ランキングしたものをslickで表現する

はじめに

コード

終わりに