![見出し画像](https://assets.st-note.com/production/uploads/images/18227855/rectangle_large_type_2_76e2bec21a8b5edc3980edb4bc2ca990.jpeg?width=1200)
railsチュートリアル魔改造編 第22章 フォロー・フォロワー画面魔改造魔改造
第22章 フォロー・フォロワー画面魔改造編
フォロー・フォロワー画面を魔改造していきます。
いつものようにトピックブランチを作成します。
cd ‾/environment/sample_app
git checkout -b rails-makaizou-22
22.1 フォロー・フォロワー画面はどこから飛ぶ?
呼んでいるのは
ホーム画面/sample_app/app/views/static_pages/home.html.erb
プロフィール画面/sample_app/app/views/users/show.html.erb
フォロー・フォロワー画面/sample_app/app/views/users/show_follow.html.erb
から/sample_app/app/views/shared/_stats.html.erbを介して呼ばれる
/sample_app/app/views/shared/_stats.html.erb
から、
/sample_app/app/controllers/users_controller.rb
の
followingアクション、followersアクションをそれぞれ呼び、
/sample_app/app/views/users/show_follow.html.erbへ飛ぶ
22.2 フォロー魔改造
/sample_app/app/controllers/users_controller.rbのfollowingアクションで文字列を変えられる
22.3 フォロワー魔改造
/sample_app/app/controllers/users_controller.rbのfollowersアクションで文字列を変えられる
22.4 ツイート数魔改造
/sample_app/app/views/users/show_follow.html.erbで変更
22.5 プロフィール画像魔改造
/sample_app/app/views/users/show_follow.html.erbで変更
22.6 プロフィールへ魔改造
/sample_app/app/views/users/show_follow.html.erbで変更
22.7 最後に
保存する
rails test
git add -A
git status
/sample_app/app/controllers/users_controller.rb
/sample_app/app/views/static_pages/home.html.erb
/sample_app/app/views/shared/_stats.html.erb
/sample_app/app/views/users/show.html.erb
/sample_app/app/views/users/show_follow.html.erb
git commit -m "add 22"
git checkout master
修正前ファイルをブログ用に保存しておく
git merge rails-makaizou-22
git push origin master
修正後ファイルをブログ用に保存しておく
そしてherokuの操作
source <(curl -sL https://cdn.learnenough.com/heroku_install)
heroku maintenance:on
git push heroku master
heroku pg:reset DATABASE
jun-killer-makaizou
heroku run rails db:migrate
heroku run rails db:seed
heroku restart
heroku maintenance:off
22.8.1 修正後
リスト22.1
/sample_app/app/controllers/users_controller.rb
----------------------------
class UsersController < ApplicationController
before_action :logged_in_user, only: [:index, :edit, :update, :destroy,
:following, :followers]
before_action :correct_user, only: [:edit, :update]
before_action :admin_user, only: :destroy
#ユーザーを探す画面で呼ばれるアクション
# /sample_app/app/views/layouts/_header.html.erbから飛ぶ
def index
@users = User.where(activated: true).paginate(page: params[:page])
#/sample_app/app/views/users/index.html.erbへ
end
#/users/1とかで呼ばれるアクション
def show
#userの情報を取得する
@user = User.find(params[:id])
#userの持つmicropostを取得する
#paginateメソッドとシンボルとparamsは
@microposts = @user.microposts.paginate(page: params[:page])
#/sample_app/app/views/users/show.html.erbへ
end
# /signup で呼ばれるアクション
# app/views/users/new.html.erbへ
def new
#ユーザーを新規に作成する
@user = User.new
end
# app/views/users/new.html.erbでform_forによって送信を押した後に呼ばれる
def create
#入力フォームに入力された値でユーザーデータを作成する
#user_paramsは同ファイルのprivateに定義がある
#user_paramsはStrongParameterが返ってくる
@user = User.new(user_params)
#セーブに成功した?
if @user.save
#メールを送信する
#send_activation_emailの定義はapp/models/user.rbにある
#メールの内容は以下で編集できる
#app/views/user_mailer/account_activation.html.erb
#app/views/user_mailer/account_activation.text.erb
@user.send_activation_email
#メールを送信したことを通知する
flash[:info] = @user.email+"にメールを送信しました。お手数ですが、承認をお願いします。"
#トップページに移行する
redirect_to root_url
#セーブに失敗した?
else
#再度入力をお願いする
#エラー文は自動的に出るようになってる
render 'new'
end
end
#設定画面へ
#/sample_app/app/views/layouts/_header.html.erbから飛ぶ
#/sample_app/app/views/users/edit.html.erbへ
def edit
end
#/sample_app/app/views/users/edit.html.erbで送信ボタンが押されたら飛ぶ
def update
#設定が変更できる場合
if @user.update_attributes(user_params)
flash[:success] = "設定を変更しました。"
redirect_to @user
#設定が変更できなかった場合
else
render 'edit'
end
end
#/sample_app/app/views/users/_user.html.erbから
#ユーザーを削除するときに呼ばれる
def destroy
#削除する人を取得する
@delete_user = User.find(params[:id])
#削除時のメッセージを名前付きで表示する
flash[:success] = @delete_user.name + "さんを削除しました"
#削除
@delete_user.destroy
#ユーザーを探す画面に戻る
redirect_to users_url
end
#フォローアクション
def following
#タブに表示する文字列
@title = "フォロー"
#誰のフォロー画面か
@user = User.find(params[:id])
#フォロー全員を取得する
@users = @user.following.paginate(page: params[:page])
#/sample_app/app/views/users/show_follow.html.erbへ
render 'show_follow'
end
#フォロワーアクション
def followers
#タブに表示する文字列
@title = "フォロワー"
#誰のフォロー画面か
@user = User.find(params[:id])
#フォローワー全員を取得する
@users = @user.followers.paginate(page: params[:page])
#/sample_app/app/views/users/show_follow.html.erbへ
render 'show_follow'
end
private
#paramsの中身を:userの:name,:email,:password,:password_confirmationのみにして返す
#StrongParameterというやつ
def user_params
params.require(:user).permit(:name, :email, :password,
:password_confirmation)
end
# beforeアクション
# 正しいユーザーかどうか確認
def correct_user
@user = User.find(params[:id])
redirect_to(root_url) unless current_user?(@user)
end
# 管理者かどうか確認
def admin_user
redirect_to(root_url) unless current_user.admin?
end
end
リスト22.2
/sample_app/app/views/static_pages/home.html.erb
----------------------------
<%# ログイン中? %>
<% if logged_in? %>
<%# Bootstrapでくくる準備 %>
<div class="row">
<%# 12分割して左側幅4つ分を使用する %>
<aside class="col-md-4">
<%# ユーザーの情報を表示する %>
<section class="user_info">
<%= render 'shared/user_info' %>
</section>
<%# ステータスを表示する %>
<section class="stats">
<%= render 'shared/stats' %>
</section>
<%# マイクロポストフォームを表示する %>
<section class="micropost_form">
<%= render 'shared/micropost_form' %>
</section>
</aside>
<%# 12分割して右側幅8つ分を使用する %>
<div class="col-md-8">
<%# 他の人のマイクロポストを表示する %>
<h3>Micropost Feed</h3>
<%= render 'shared/feed' %>
</div>
</div>
<%# ログインしていない? %>
<% else %>
<%# タイトル %>
<div class="center">
<%= image_tag("title.jpg", alt: "title") %>
<h1>railsチュートリアル<br>魔改造</h1>
<%# サブタイトル %>
<h2>
全ページ……魔改造してやる!<br>このサイトから……一ページ残らず!
</h2>
<%# 新規登録ボタンを赤色(danger)にする %>
<%= link_to "新規登録", signup_path, class: "btn btn-lg btn-danger signup " %>
</div>
<% end %>
リスト22.3
/sample_app/app/views/shared/_stats.html.erb
----------------------------
<%#
ホーム画面/sample_app/app/views/static_pages/home.html.erb
プロフィール画面/sample_app/app/views/users/show.html.erb
フォロー・フォロワー画面/sample_app/app/views/users/show_follow.html.erb
から飛ぶ
%>
<% @user ||= current_user %>
<div class="stats">
<%# フォローの数を表示する %>
<a href="<%= following_user_path(@user) %>">
フォロー
<strong id="following" class="stat">
<%= @user.following.count %>
</strong>
</a>
<%# フォロワーの数を表示する%>
<a href="<%= followers_user_path(@user) %>">
フォロワー
<strong id="followers" class="stat">
<%= @user.followers.count %>
</strong>
</a>
</div>
リスト22.4
/sample_app/app/views/users/show.html.erb
----------------------------
<%#
/sample_app/app/controllers/users_controller.rbのshowから飛ぶ
#userの情報を取得する
@user = User.find(params[:id])
#userの持つmicropostを取得する
#paginateメソッドとシンボルとparamsは
@microposts = @user.microposts.paginate(page: params[:page])
%>
<% provide(:title, @user.name) %>
<%# BootStrapで区切る%>
<div class="row">
<%# 左側4つはアイコンと名前とフォロー数とフォロワー数を表示 %>
<aside class="col-md-4">
<section class="user_info">
<h1>
<%# ユーザーアイコン %>
<%= gravatar_for @user %>
<%# ユーザー名 %>
<%= @user.name %>
</h1>
</section>
<%#
フォローとフォロワーの数を表示する
/sample_app/app/views/shared/_stats.html.erb
%>
<section class="stats">
<%# /sample_app/app/views/shared/_stats.html.erbへ%>
<%= render 'shared/stats' %>
</section>
</aside>
<%# 右側8つ %>
<div class="col-md-8">
<%# フォローボタン %>
<%#/sample_app/app/views/users/_follow_form.html.erbへ %>
<%= render 'follow_form' if logged_in? %>
<%# つぶやきを表示する %>
<% if @user.microposts.any? %>
<h3>ツイート <%= @user.microposts.count %></h3>
<%# マイクロポスト %>
<%# /sample_app/app/views/microposts/_micropost.html.erbへ%>
<ol class="microposts">
<%= render @microposts %>
</ol>
<%= will_paginate @microposts %>
<% end %>
</div>
</div>
リスト22.5
/sample_app/app/views/users/show_follow.html.erb
----------------------------
<%#
/sample_app/app/controllers/users_controller.rbの
followingアクション
followersアクションでそれぞれ@titleが決定する
%>
<% provide(:title, @title) %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# %>
<%# Bootstrapで区切る %>
<div class="row">
<%# 左4列 %>
<aside class="col-md-4">
<%# ユーザー情報 %>
<section class="user_info">
<%# アバター %>
<%= gravatar_for(@user, size: 200) %>
<%# プロフィール画面へ %>
<h1><span><%= link_to @user.name, @user %></span></h1>
<%# ツイート %>
<span><%= @user.microposts.count %> <b>ツイート</b></span>
</section>
<%# フォロー・フォロワー情報 %>
<section class="stats">
<%# フォロー・フォロワー数表示 %>
<%# /sample_app/app/views/shared/_stats.html.erbへ%>
<%= render 'shared/stats' %>
<%# フォロー・フォロワーアイコン表示 %>
<% if @users.any? %>
<div class="user_avatars">
<% @users.each do |user| %>
<%= link_to gravatar_for(user, size: 15), user %>
<% end %>
</div>
<% end %>
</section>
</aside>
<%# 右4列 %>
<div class="col-md-8">
<%# フォロー・フォロワー %>
<h3><%= @title %></h3>
<% if @users.any? %>
<ul class="users follow">
<%= render @users %>
</ul>
<%= will_paginate %>
<% end %>
</div>
</div>
22.8.2 本章のまとめ
どのページになにが書かれているのかを辿るのに慣れた
アイコンを大きくしてみた
プロフィールという文字を消して、ユーザー名を入力したらプロフィールに辿れるようにできた
修正前
修正後
https://jun-killer-makaizou.herokuapp.com/
この記事が気に入ったらサポートをしてみませんか?