アラサーからのエンジニア転身blog

プログラミングの勉強や転職に関して記事にしていきます。

ruby on rails ツイッタートレンドの時間毎の表示の実装(企業からいただいた課題)

本日訪問した企業より、スクールで作った最終作品に対して、追加課題をいただきました。
実装を行いましたので、備忘録として残します。


最終作品:ツイッター
既実装機能:ハッシュタグ機能 ハッシュタグのトレンド表示機能(トレンドの表示はハッシュタグの多い順に上位6件を表示)
課題:トレンドの表示を1時間、1日、1週間で時間要素を加えて表示

TIMEクラスでの時間範囲の指定、renderのcollectionオプションにasでローカル変数を定義できるのは使えます!!


コントローラーに1時間以内、1日以内、1週間以内に登録されたデータを抽出するコードを追記

    hour_from = Time.now - 1.hour  #1時間前
    day_from = Time.now - 1.day #1日前
    week_from = Time.now - 1.week #1週間前
    to = Time.now #Timeクラスで現在時刻を獲得

 #現在から各指定時間までにcreated_atしたTagsテーブルのレコードをtags_countが多い順に上位6件まで @trendの配列に格納
    @trend = Tag.where(created_at: hour_from..to).order("tags_count DESC").limit(6)
    @day_trend = Tag.where(created_at: day_from..to).order("tags_count DESC").limit(6)
    @week_trend = Tag.where(created_at: week_from..to).order("tags_count DESC").limit(6)

表示するVIEWに@trend、@day_trend、@week_trendを展開

%ul.nav.nav-tabs
  %li.nav-item
    %a.nav-link.active{"data-toggle": "tab", href: "#latast-trands"} hour
  %li.nav-item
    %a.nav-link{"data-toggle": "tab", href: "#day-trands"} day
  %li.nav-item
    %a.nav-link{"data-toggle": "tab", href: "#week-trands"} week
.card.pl-md-3.pt-md-3.pb-md-3
  %h4 トレンド
  .tab-content
    #latast-trands.tab-pane.active
      = render partial: "partial/trend", collection: @trend
    #day-trands.tab-pane
      = render partial: "partial/trend", collection: @day_trend, as: "trend"
    #week-trands.tab-pane
      = render partial: "partial/trend", collection: @week_trend, as: "trend"


partial/_trend.html.haml内容

= link_to "/post/hashtag/#{trend.name}" ,class: "replyblue" do
  %h5 ##{trend.name}
%p #{trend.tags_count}件のツイート