「いいね！取り消し」ボタンを作ろう
likesコントローラにdestroyアクションを作成、@current_user.idとparams[:post_id]をもとに削除する。
いいね済みにリンクをつけてアクションをつける。
ルーティングを設定
routes.rb
.
.
.
post "likes/:post_id/destroy" => "likes#destroy"
.
.
.
これでurlを入力するとdestroyアクションが動くようにする。
destroyアクションがどのような内容かを設定する
likes_controller.rb
.
.
.
def destroy
@like = Like.find_by(user_id: @current_user, post_id: params[:post_id])
@like.destroy
redirect_to("/posts/#{params[:post_id]")
end
.
.
.
投稿の詳細ページにlikesコントローラーのdestroyアクションが動くようにリンクを作る
show.html
.
.
.
<%= link_to("いいね！済み", "/likes/#{@post.id}/destroy", {method: "post"}) %>
.
.
.
これで動くか？
find_byメソッドの引数で、user_idの値は「@current_user.id」としてください
likes_controller.rb
@like = Like.find_by(user_id: @current_user, post_id: params[:post_id])
likes_controller.rb
@like = Like.find_by(user_id: @current_user.id, post_id: params[:post_id])
.idが抜けていた。
redirect_toメソッドの引数を、「"/posts/#{params[:post_id]}"」としてください
likes_controller.rb
redirect_to("/posts/#{params[:post_id]")
likes_controller.rb
redirect_to("/posts/#{params[:post_id]}")
最後の}がついていなかった。
成功！
いいねボタンをアイコンにしよう（1）
「Font Awesome」を使いアイコンにする
「Font Awesome」を読み込む
これを使うためには<head>タグで読み込ませなければならない。
「Font Awesome」を利用するには、
<head>タグなどの共通のHTMLはapplication.html.erbにあるのでそこに書く。読み込ませるためにタグを使う。
application.html
.
.
.
<head>
<title>TweetApp</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- FontAwesomeを読み込むlinkタグを追加してください -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
.
.
.
いいねボタンをハートにする
<span>に「fa fa-heart」というクラス名をつけることで、ハートアイコンを表示する
HTML要素に対してlink_toメソッドを使う。
<%= link_to(URL) do %>と<% end %>の間にHTML要素を書くことで、その部分をリンクにする。
<span>タグもHTML要素
<%= link_to("URL") do %>と<% end %>の間に<span>を書き、「fa fa-heart 」というクラス名をつけることでハートアイコンのリンクを作ることができます。
いいね済みにリンクをつける。
posts/show.html
.
.
.
<%= link_to("/likes/#{@post.id}/destroy", {method: "post"}) do %>
いいね！済み
<% end %>
.
.
.
HTML要素<span>タグをリンクにする（ハートになる）
posts/show.html
.
.
.
<%= link_to("/likes/#{@post.id}/destroy", {method: "post"}) do %>
<span class="fa fa-heart liked-btn"></span>
<% end %>
.
.
.
いいねにも同様のリンクをつける
posts/show.html
.
.
.
<%= link_to("/likes/#{@post.id}/create", {method: "post"}) do %>
<span class="fa fa-heart unliked-btn"></span>
<% end %>
.
.
.
いいねボタンとなるハートにスタイルシートで設定を加える。
posts.scss
.
.
.
// .unliked-btnのcolorを「#8899a6」にしてください
.unliked-btn {
color: #8899a6;
}
// .liked-btnのcolorを「#ff2581」にしてください
.liked-btn {
color: #ff2581;
}
// ここに指定されたCSSを貼り付けてください
.posts-show-item .fa {
font-size: 16px;
margin-right: 3px;
}
.
.
.
いいねの数を取得しよう
countメソッドを使い数を数える。
countメソッド
配列の要素数を取得するメソッドですが、テーブルのデータ数を取得するためにも利用することができます。
posts_controller.rbにいいねの数を取得する
いいねというのは一つの投稿とそれに対する不特定多数のユーザーとの関係である。
そのためwhereで絞り込む条件にuser_idでなくpost_idだと思う。
それは仮にuser_idで絞り込みをしてしまうと結果がそのユーザーがいいねをした全ての投稿の数になる。
しかし
今回いいねをしてくれた全てのユーザーの数を求めたいのでpost_idを使い絞り込む。
posts_controller.rb
def show
@post = Post.find_by(id: params[:id])
@user = @post.user
# 変数@likes_countを定義してください
@likes_count = Like.where(post_id: @post.id).count
end
コンソールで試した。
[1] pry(main)> Like.where(post_id: @post.id).count
NoMethodError: undefined method `id' for nil:NilClass
from (pry):1:in `__pry__'
[2] pry(main)> Like.where(post_id: 1).count
(0.1ms) SELECT COUNT(*) FROM "likes" WHERE "likes"."post_id" = ? [["post_id", 1]]
=> 0
多分これで良さそう。
show.html.erbに表示させる
show.html
.
.
.
<%= @like_count %>
.
.
.
成功！