#はじめに
前回の記事改【Railsチュートリアル】プロフィール画像をアプリ内で設定できるように変更に引き続きRailsチュートリアル第6版sample_appの機能拡張を進めていく。
今回は以下の様ないいね機能を実装していく。
instagramのいいねボタンによく似たハートが膨らむアニメーションを付けている。
前提
第6版sample_appが完成している
#Favoriteモデル
Favoriteテーブルを追加
$ rails g model Favorite user_id:integer micropost_id:integer
user_idとmicropost_idにインデックスを追加し、組み合わせがユニークであるという複合キーインデックスも追加する。
db/migrate/[timestamp]_create_favorites.rb
class CreateFavorites < ActiveRecord::Migration[6.1]
def change
create_table :favorites do |t|
t.integer :user_id
t.integer :micropost_id
t.timestamps
end
add_index :favorites, :user_id
add_index :favorites, :micropost_id
add_index :favorites, [:user_id, :micropost_id], unique: true
end
end
$ rails db:migrate
ユーザーとマイクロポストに、Favoriteに対して1対多の関連づけを追加し、またhas_many throughを用いてuser.likesとmicropost.liked_byを使えるようにする。
app/models/user.rb
class User < ApplicationRecord
.
.
.
has_many :favorites, dependent: :destroy
has_many :likes, through: :favorites, source: :micropost
.
.
.
end
app/models/micropost.rb
class Micropost < ApplicationRecord
.
.
.
has_many :favorites, dependent: :destroy
has_many :liked_by, through: :favorites, source: :user
.
.
.
end
app/models/favorite.rb
class Favorite < ApplicationRecord
belongs_to :user
belongs_to :micropost
validates :user_id, presence: true
validates :micropost_id, presence: true
end
ユーザーモデルにメソッドを追加する。
app/models/user.rb
class User < ApplicationRecord
.
.
.
# マイクロポストをライクする
def like(micropost)
likes << micropost
end
# マイクロポストをライク解除する
def unlike(micropost)
favorites.find_by(micropost_id: micropost.id).destroy
end
# 現在のユーザーがライクしていたらtrueを返す
def likes?(micropost)
likes.include?(micropost)
end
private
.
.
.
end
ルーティングを追加する。
config/routes.rb
Rails.application.routes.draw do
.
.
.
resources :users do
member do
get :following, :followers , :likes
end
end
.
.
.
end
#likeページの作成
ステータスページにlike数を追加。
app/views/shared/_status.html.erb
<% @user ||= current_user %>
.
.
.
<a href="<%= likes_user_path(@user) %>">
<strong id="likes" class="stat">
<%= @user.likes.count %>
</strong>
likes
</a>
</div>
ユーザーコントローラーにlikeアクションを追加。
app/controllers/users_controller.rb
class UsersController < ApplicationController
.
.
.
def likes
@title = "Likes"
@user = User.find(params[:id])
@microposts = @user.likes.paginate(page: params[:page])
render 'show_like'
end
private
.
.
.
end
ビューを作成する。
gravatarの部分はこちらの記事でimage_tagに変更している。
app/viwes/users/show_like.html.erb
<% provide(:title, @user.name) %>
<div class="row">
<aside class="col-md-4">
<section class="user_info">
<% if @user.avatar? %>
<%= image_tag @user.avatar.url, width: "100px", height: "100px", class:"icon"%>
<% else%>
<%= image_tag "default_user.jpeg", width: "100px", height: "100px", class:"icon"%>
<% end %>
<h1><%= @user.name %></h1>
<span><%= link_to "view my profile", @user %></span>
<span><b>Microposts:</b> <%= @user.microposts.count %></span>
</section>
<section class="stats">
<%= render 'shared/stats' %>
</section>
</aside>
<div class="col-md-8">
<h3><%= @title %></h3>
<% if @user.likes.any? %>
<ol class="microposts">
<%= render @microposts %>
</ol>
<%= will_paginate @microposts %>
<% end %>
</div>
</div>
#likeボタンの作成
yarnを用いてFontAwesomeをインストールする。
$ yarn add @fortawesome/fontawesome-free
以下の記述を追加する。
app/javascript/packs/application.js
.
.
.
import '@fortawesome/fontawesome-free/js/all';
app/assets/stylesheets/custom.scss
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims';
.
.
.
ルーティングを追加する。
config/routes.rb
Rails.application.routes.draw do
.
.
.
resources :favorites, only: [:create, :destroy]
end
マイクロポストパーシャルにrenderを追加する。
app/views/microposts/_micropost.html.erb
<li id="micropost-<%= micropost.id %>">
.
.
.
</span> <span class="like" id="like_form_<%= micropost.id %>">
<% if micropost.liked_by.include?(current_user) %>
<%= render "microposts/unlike", micropost: micropost %>
<% else %>
<%= render "microposts/like", micropost: micropost %>
<% end %>
</span>
</li>
likeパーシャル、unkikeパーシャルを追加する。
app/viws/microposts/_like.html.erb
<span class="timestamp"><%=micropost.liked_by.count%> like</span>
<%= form_for(current_user.favorites.build, remote: true, class:"btnlike") do |f| %>
<div><%= hidden_field_tag :micropost_id, micropost.id %></div>
<%= button_tag(class: "btn-like" ) do %>
<i class="far fa-heart heart-empty "></i> <% end %>
<% end %>
app/viws/microposts/_unlike.html.erb
<span class="timestamp"><%=micropost.liked_by.count%> like</span>
<%= form_for(current_user.favorites.find_by(micropost_id: micropost.id),
html: { method: :delete }, remote: true) do |f| %>
<%= button_tag( class: "btn-like") do %>
<i class="fas fa-heart heart"></i>
<% end %>
<% end %>
cssを追加する。
app/assets/stylesheets/custom.scss
.
.
.
.heart {
color: rgb(255, 74, 74);
font-size: 25px;
animation: anime 1s;
}
@keyframes anime{
15% { transform: scale(1.3); }
20% { transform: scale(1); }
}
.heart-empty {
font-size: 25px;
-webkit-text-stroke: 5px white
}
.btn-like:hover > .heart-empty {
color: rgb(168, 168, 168);
}
.btn-like {
position: relative;
left: 60px;
}
.btn-like {
border: none;
background-color: rgb(255, 255, 255);
:hover {
background-color: rgb(255, 255, 255);
}
}
Favoriteコントローラーを作成し、以下を記述する。
$ rails g controller Favorites
app/controllers/favorites_controller.rb
class FavoritesController < ApplicationController
before_action :logged_in_user
def create
micropost = Micropost.find(params[:micropost_id])
current_user.like(micropost)
redirect_back(fallback_location: root_url)
end
def destroy
micropost = Favorite.find(params[:id]).micropost
current_user.unlike(micropost)
redirect_back(fallback_location: root_url)
end
end
#Ajaxによる非同期化
like_html.erbとunlike_html.erbにremote:trueを追加する。
app/views/microposts/_like.html.erb
<%= form_for(current_user.favorites.build, remote: true) do |f| %>
.
.
.
app/views/microposts/_unlike.html.erb
<%= form_for(current_user.favorites.find_by(micropost_id: micropost.id),
html: { method: :delete }, remote: true) do |f| %>
.
.
.
Favoriteコントローラーを変更する。
app/contorollers/favorites_contoroller.rb
class FavoritesController < ApplicationController
before_action :logged_in_user
def create
@user = current_user
@micropost = Micropost.find(params[:micropost_id])
current_user.like(@micropost)
respond_to do |format|
format.html { redirect_back(fallback_location: root_url) }
format.js
end
end
def destroy
@user = current_user
@micropost = Favorite.find(params[:id]).micropost
current_user.unlike(@micropost)
respond_to do |format|
format.html { redirect_back(fallback_location: root_url) }
format.js
end
end
end
JS-ERbファイルを作成する。
app/views/favorites/create.js.erb
$("#likes").html('<%= @user.likes.count %>');
$("#like_form_<%= @micropost.id %>").html("<%= escape_javascript(render('microposts/unlike',
micropost: @micropost)) %>");
app/views/favorites/destroy.js.erb
$("#likes").html('<%= @user.likes.count %>');
$("#like_form_<%= @micropost.id %>").html("<%= escape_javascript(render('microposts/like',
micropost: @micropost)) %>");