【173日目】【1日20分のRailsチュートリアル】【第12章】フォローしているユーザーとフォロワーの数を表示する

今日は「12.2.2 統計とフォロー用フォーム」から。

12.2.2 統計とフォロー用フォーム

最初に、プロファイルページとHomeページに、フォローしているユーザーとフォロワーの統計情報を表示するためのパーシャルを作成します。次に、フォロー用とフォロー解除用のフォームを作成します。それから、フォローしているユーザーの一覧 (“following”) とフォロワーの一覧 (“followers”) を表示する専用のページを作成します。

やることいっぱい！

実際のページ作成は12.2.3まで行いませんが、ルーティングは今実装します (リスト12.15)。

Userコントローラにfollowingアクションとfollowersアクションを追加するルーティングを実装する。

config/routes.rb

  resources :users do
    member do
      get :following, :followers
    end
  end
#  resources :users

ちなみに、memberメソッドを使うとユーザーidが含まれているURLを扱うようになりますが、

へぇ～、そうなのか…。
URLは/users/1/followingや/users/1/followersのようになるらしい。

ルーティングを定義したので、統計情報のパーシャルを実装する準備が整いました。このパーシャルでは、divタグの中に2つのリンクを含めるようにします (リスト12.16)。

まずパーシャルのファイルを作って

$ touch app/views/shared/_stats.html.erb

下記内容で更新する。

app/views/shared/_stats.html.erb

<% @user ||= current_user %>
<div class="stats">
  <a href="<%= following_user_path(@user) %>">
    <strong id="following" class="stat">
      <%= @user.following.count %>
    </strong>
    following
  </a>
  <a href="<%= followers_user_path(@user) %>">
    <strong id="followers" class="stat">
      <%= @user.followers.count %>
    </strong>
    followers
  </a>
</div>

コラム8.1でも説明したとおり、@userが nilでない場合 (つまりプロファイルページの場合) は何もせず、nilの場合 (つまりHomeページの場合) には@userにカレントユーザーを設定します。

そういえばそんな処理もあったね。便利。

統計情報パーシャルができあがりました。Homeページにこの統計情報を表示するのは、リスト12.17のように簡単にできます。

パーシャル呼び出すだけ。簡単！

app/views/static_pages/home.html.erb

      <section class="stats">
        <%= render 'shared/stats' %>
      </section>

統計情報にスタイルを与えるために、リスト12.18のようにSCSSを追加しましょう (なお、このSCSSにはこの章で使用するスタイルがすべて含まれています)。

スタイル追加も忘れずに。

app/assets/stylesheets/custom.css.scss

.stats {
  overflow: auto;
  margin-top: 0;
  padding: 0;
  a {
    float: left;
    padding: 0 10px;
    border-left: 1px solid $gray-lighter;
    color: gray;
    &:first-child {
      padding-left: 0;
      border: 0;
    }
    &:hover {
      text-decoration: none;
      color: blue;
    }
  }
  strong {
    display: block;
  }
}

.user_avatars {
  overflow: auto;
  margin-top: 10px;
  .gravatar {
    margin: 1px 1px;
  }
  a {
    padding: 0;
  }
}

.users.follow {
  padding: 0;
}