質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

2回答

3415閲覧

いいね機能ができません

szngk

総合スコア14

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2018/09/10 09:05

編集2018/09/20 21:18

postモデル、userモデルを使用してアプリを作ったのち(ある入門書にそってdeviseは、accountモデルを使用)、いいね機能(likeモデル)を追加しようとしています。

いいねボタンを押しても、コンソールにエラー表示は出ないのですが、以下のことができません。
① いいねボタンを押す前は、白ハートの設定なのに、黒ハートで表示される。 (
⇨これは解決しました。)
② いいねボタンを押しても、一瞬色が変わり(黒ハート→白ハート)、また元(黒ハート)に戻る。 (⇨現在 色の変化は反対で同じ状態です。)
③ ログインUserが自分の投稿に、いいねボタンを押すことができる。(一瞬ボタンの色が変わる)
④ いいねのカウントが表示されない。

初心者で基本的なことがわかっておらず、すみませんが宜しくお願いします。(Windows10 Ruby 2.4.4 Rails 5.1.6)

account.rb

ruby

1devise :database_authenticatable, :registerable, 2 :recoverable, :rememberable, :trackable, :validatable 3♯belongs_to :user 4end

post.rb

ruby

1 belongs_to :user 2 has_many :likes, dependent: :destroy 3 4 def like_user(user_id) 5  likes.find_by(user_id: user_id) 6 end 7end

user.rb

ruby

1 has_many :posts 2 has_many :likes, dependent: :destroy 3 belongs_to :account 4end

like.rb   (likes_countカラムをpostsテーブルに追加済)

ruby

1 belongs_to :post, counter_cache: :likes_count 2 belongs_to :user 3 4 validates :user_id, presence: true 5 validates :post_id, presence: true 6end

likes_controller.rb

ruby

1 before_action :set_post, only: [:create, :destroy] 2 3 def create 4 @like = Like.create(user_id: current_account.id, post_id: params[:post_id]) 5 end 6 7 def destroy 8 like = Like.find_by(user_id: current_account.id, post_id: params[:post_id]) 9 like.destroy 10 end 11 12 private 13 def set_post 14 @post = Post.find(params[:post_id]) 15 end 16end

_like.html.erb

ruby

1<% if account_signed_in? %> 2 <% if post.like_user(current_account.id) %> 3 <%= link_to post_like_path(post_id: post.id), method: :delete, id: "like-button", remote: true do %> 4 <i class="fas fa-heart"></i> 5 <span> 6 <%= post.likes_count %> 7 </span> 8 <% end %> 9 <% else %> 10 <%= link_to post_likes_path(post), method: :post, id: "like-button", remote: true do %> 11 <i class="fa fa-heart fa-fw"></i> 12 <span> 13 <%= post.likes_count %> 14 </span> 15 <% end %> 16 <% end %> 17<% else %> 18 <i class="fa fa-heart fa-fw"></i> 19 <span> 20 <%= post.likes_count %> 21 </span> 22<% end %>

create.js.erb / destroy.js.erb

ruby

1$("#like-button-<%= @post.id %>").html("<%= j(render partial: 'like', locals: { post: @post }) %>")

posts/index.html.erb

ruby

1<p id="notice"><%= notice %></p> 2 3<h1>Posts</h1> 4 5<%= render 'form', post: @post %> 6<%= link_to 'go home >>', controller: :users %> 7<hr> 8<h2>Posted Posts.</h2> 9<table width="90%"> 10 <thead> 11 <tr> 12 <th width="18%">Title</th> 13 <th width="7%"></th> 14 <th width="65%">Content</th> 15 <th width="150px">User</th> 16 </tr> 17 </thead> 18 19 <tbody> 20 <% @posts.each do |post| %> 21 <tr>= 22 <td><%= post.title %></td> 23 <!-- いいね追加・削除 --> 24 <td><span id="like-button-<%= @post.id %>"> 25 <%= render partial: 'likes/like', locals: { post: post, likes: @likes } %> 26 </span></td> 27 <td><%= post.content %></td> 28 <td><%= link_to post.user.sitename, 29 controller: :users, action: :show, 30 id:post.user_id %></td> 31 </tr> 32 <% end %> 33 </tbody> 34</table> 35 36<div><%= paginate @posts %></div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

railsやruby、その他gemのバージョンを確認してみてください。
読まれている専門書とバージョンが食い違っている場合挙動や色が異なる場合があり、見た限りその感じにすごく似ています。

投稿2018/09/20 03:58

Yaiba184

総合スコア122

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

szngk

2018/09/20 14:51 編集

①の いいねボタンの当初の色、解決しました!   (いいね機能は、入門書には記述がなく独自に追加しています。)  入門書は「Rails5」で、font-awesome5を使ったのですが、font-awesome4.7.0に変更すると、最初に白のハートマークが現れるようになりました。アドバイス頂き有難うございます! (②~④については同じ状態です。) (account.rbの belongs_to :userは、新規User登録ができなくなっていたのに気づき削除しています。また何か気づかれましたら宜しくお願いします。 有難うございました!)
guest

0

自己解決

解決しました。(deviseは、userモデルを使用して作り直し、http://blog.livedoor.jp/tomoyayoshikawa1022/archives/3697356.html のサイトを参考にして、いいね機能を作成。https://qiita.com/miyazaki_yusuke/items/8f0a4cb20a56cab313ea のサイトのCodeを参考に追加・変更をしてAjax機能を追加しました。)

投稿2018/12/01 14:51

szngk

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問