1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Ruby on Railsで簡単に新着マークを作る方法

Last updated at Posted at 2021-01-23

#はじめに
独学で学習中の学生がこの記事を書いています。
間違っているところやこんな書き方はしないなど思われるかもしれませんが、優しく指摘してもらえるととても嬉しいです。

#作りたいもの
677B1C4C-90FF-451F-9F2E-8A60A12F20AD_4_5005_c.jpeg

ここで作りたいものは新着マークです。
新しい投稿があると、その投稿から7日間の間だけ表示される新着マークを作りたいと思います。(
7日経つを自動で消える)
※日数は変更可能

#前提条件
投稿機能と投稿一覧は既に実装済みということで進めていきます。

#必要になる情報
1 現在の時間
2 新規投稿された時間
3 新規投稿された時間から7日後の時間

#作成の流れ
1 現在の時間を取得(可変)
2 投稿された時間の取得(不変)
3 投稿された時間から7日後の時間を取得(不変)
4 3が1よりも先である(未来である)場合に新着マークを表示される

#1 現在の時間を取得

app/controllers/posts_controller.rb
def index
 @posts = Post.page(params[:page]).per(10)
 @current_time = Time.current
end

indexアクションの1行目は、kaminariを使って既に投稿されている10記事の情報を取得しています。
2行目は、現在の時間を取得しています。Railsでは、2種類のタイムゾーンがあり、様々な現在時間の取得方法がありますが、TimeWithZoneクラスを使う方法が一番良いとされているようなので、Time.currentを使っています。(Time.zone.nowでも同じ)
詳しくは、こちらの記事が参考になると思います。

#2 投稿された時間の取得と3 投稿された時間から7日後の時間を取得

app/views/posts/index.html.erb
<% @posts.each do |post| %>
  省略〜
 <% post.created_at.since(7.day) %>         
<% end %>

@postsから1記事ずつ取り出し、その記事が作成された時間(2番)をcreated_atで取得、そしてそこにsinceメソッドを使い、投稿された時間から7日後の時間(3番)を取得しました。
※sinceメソッドの引数を変更すれば、新着マークの表示期間を変更可能

#4 新着マークを表示させる

app/views/posts/index.html.erb
<% @posts.each do |post| %>
  省略〜
 <% if @current_time < post.created_at.since(7.day) %> 
    <div class = "new-mark">新着</div>
  <% end %>        
<% end %>

投稿された時間から7日後の時間が現在の時間よりも先であれば(未来であれば)新着マークを表示するようにしたいので、if文を使い、その中に、表示したい内容を入れます。
これで、完成です。
※デザインの部分は省略しています。

#まとめ
今回はRuby on Railsで期間限定の新着マークを作ってみました。
おそらく、実際は、cookieを使って実装する方が、新着情報を使って他に機能を作る時など、色々な面で使いやすいと思います。
なので、次回はcookieでの実装にもチャレンジしてみようと思います。

###参考文献
RubyとRailsにおけるTime, Date, DateTime, TimeWithZoneの違い

1
2
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
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?