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/