やりたいこととしては、非同期通信を用いたいいね機能を実装したい(動画投稿ページに)
ポートフォリオの概要としては、動画を投稿する専用のページとツイート専用のページを分けています。
投稿一覧ページに飛ぶことができるようになったのですが、非同期通信が動かなくなってしまいました。
こちらは動画のURLです。
https://gyazo.com/33390355c75c2a7d6a17ed0878109781
問題のソースコード
非同期処理を書いたコード
create.js.erb
document.getElementById('like_<%= @movie.id %>').innerHTML = '<%= j(render @movie) %>'
destroy.js.erb
document.getElementById('like_<%= @movie.id %>').innerHTML = '<%= j(render @movie) %>'
ビューファイル
<div class="content-wrapper">
<div class="content-block">
<% @movies.each do |movie| %>
<div class="content">
<div class="user-about">
<div class="image">
<% if movie.user.image.attached? %>
<%= image_tag movie.user.image %>
<% else %>
<%= image_tag no.user.png %>
<% end %>
</div>
<div class="profile">
<div class="name-history">
<div class="name">
<%= movie.user.nickname %>
</div>
<div class="mania-histry">
<%= "学習歴:#{movie.user.mania_histry}年" %>
</div>
</div>
<div class="enjoy-point">
<%= "楽しいポイント#{movie.user.enjoy_point}"%>
</div>
</div>
</div>
<div class="text">
<p>タイトル: <%= movie.title %></p> <br>
<p>説明: <%= movie.introduction %></p>
<div class = 'video'>
<video src=<%= rails_blob_path(movie.movie) %> type="movie/mp4", controls></video>
</div>
</div>
<div class="action-menu">
<tr id="post_<%= movie.id %>">
<%= render 'like',movie: movie %>
</tr>
<div class="comment">
<%if user_signed_in?%>
<h3>コメント件数: <%= movie.comments.count %></h3>
<%= link_to "コメントする", "/movies/#{movie.id}", class: "comment-buttom" %>
<% else %>
<h3>コメント件数: <%= movie.comments.count %></h3>
<%= link_to "コメントを見る", "/movies/#{movie.id}", class: "comment-buttom" %>
<% end %>
</div>
<div class="user-action">
<%if user_signed_in?%>
<% if current_user.id == movie.user.id || user_signed_in %>
<%= link_to "編集", edit_movie_path(movie) %>
<%= link_to "削除", movie_path(movie), method: :delete %>
<% end %>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
<div class="sidebar">
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
ビューファイルの部分テンプレート
<% if user_signed_in? %>
<div class="like">
<h3>いいね件数: <%= post.likes.count %></h3>
<div class = 'like-button'>
<% if current_user.liked_by?(post.id) %>
<td><%= link_to 'いいねを外す', destroy_like_path(post), class: "like-link", method: :DELETE, remote: true %></td>
<i class="fa fa-heart unlike-btn"></i>
<% else %>
<td><%= link_to 'いいね', create_like_path(post), class: "like-link", method: :create, remote: true %></td>
<i class="fa fa-heart like-btn"></i>
<% end %>
</div>
</div>
<% end %>
ここからはモデルについて書いていきます
ユーザーに関するモデル
class User < ApplicationRecord
# Include default devise modules. Others available are:
# :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :validatable
has_one_attached :image
has_many :posts
has_many :likes
has_many :comments, dependent: :destroy
has_many :movie_likes
has_many :movies
def liked_by?(post_id)
likes.where(post_id: post_id).exists?
end
def movie_liked_by?(movie_id)
movie_likes.where(movie_id: movie_id).exists?
end
with_options presence: true do
validates :nickname
validates :mania_histry
validates :enjoy_point
validates :email
validates :password, length: { minimum: 6 }
end
validate :image_presence
def image_presence
if image.attached?
if !image.content_type.in?(%('image/jpeg image/png'))
errors.add(:image, 'にはjpegまたはpngファイルを添付してください')
end
end
end
end
動画投稿に関するモデル
class Movie < ApplicationRecord
has_one_attached :movie
has_many :liked_users, through: :likes, source: :user
has_many :comments, dependent: :destroy
belongs_to :user
has_many :movie_likes
with_options presence: true do
validates :title
validates :introduction
validates :movie
end
validate :movie_presence
def movie_presence
if movie.attached?
if movie.content_type.in?(%('movie/mp4 movie/mov'))
errors.add(:movie, 'にはmp4またはmovファイルを添付してください')
end
else
errors.add(:movie, 'ファイルを添付してください')
end
end
end
いいね機能に関するモデル
補足:
今回いいね機能を実装するにあたって、「ツイートを投稿する部分のいいね機能」 (like.rb) と「動画投稿に関する部分のいいね機能」 (movie_like.rb) を分けており、それはコントローラーも同じです。
movie_like.rb
class MovieLike < ApplicationRecord
belongs_to :user
belongs_to :movie
end
いいね機能に関するコントローラー
class MovieLikesController < ApplicationController
before_action :movie_params
def create
MovieLike.create(user_id: current_user.id, movie_id: params[:id])
redirect_to movies_path
end
def destroy
MovieLike.find_by(user_id: current_user.id, movie_id: params[:id]).destroy
redirect_to movies_path
end
def movie_params
@movie = Movie.find(params[:id])
end
end
movies_controller
class MoviesController < ApplicationController
before_action :authenticate_user!, only: [:new, :update, :create, :edit, :update, :destroy]
before_action :find_movie, only: [:edit, :update, :show, :destroy]
def index
@movies= Movie.all.order(id: "DESC")
@movie_like = MovieLike.new
end
def new
@movie = Movie.new
end
def show
@comment = Comment.new
@comments = @movie.comments.order(id: "DESC")
end
def create
@movie = current_user
@movie = Movie.create(movie_params)
if @movie.save
redirect_to movies_path,notice:'投稿に成功しました'
else
redirect_to new_movie_path,notice:'投稿に失敗しました'
end
end
def edit
end
def update
@movie.update(movie_params)
redirect_to movies_path
end
def destroy
if @movie.destroy
redirect_to movies_path,alert: '投稿を削除しました'
else
redirect_to movies_path
end
end
private
def movie_params
params.require(:movie).permit(:title, :introduction, :movie).merge(user_id: current_user.id )
end
def find_movie
@movie = Movie.find(params[:id])
end
def force_redirect_unless_my_movie
return redirect_to movies_path,alert:'権限がありません'if @movie.user != current_user
end
end
以上です