ビューの実装

ビューの実装

1.エラー処理

現状では以下のようなエラーが表示されないので、それを実装します。

では、エラーを表示するためのコードをuser_clips/_form.html.erbに追加します。以下のように記述してください。

<% if clip = user_clip.clip %>
  <% if clip.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(clip.errors.count, "error") %>prohibited this user_clip from being saved:</h2>
      <ul>
        <% clip.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
<% end %>

2.自分のクリップだけ表示させる(コントローラ)

ユーザークリップでは、ユーザーごとに自分のクリップのみを表示させるようにします。

これは、以下のようにコントローラのindexアクションを変更する事で実現できます。ログイン中ユーザーを取得して、そのユーザーのクリップのみを検索しています。

#user_clips_controller.rb

def index
    # @user_clips = UserClip.all #これを消去
  @clips = current_user.user_clips.order(created_at: :desc)
end

コードを確認していきましょう。

まず、 @user_clips = UserClip.all というコードの文頭に#をつけてコメントアウトしています。

次に  @clips = current_user.user_clips.order(created_at: :desc) というコードです。

@clipsというインスタンス変数に、current_user(現在ログインしているユーザー)に紐づいたclipsのデータを代入しています。続く、.order(created_at: :desc)というコードですが、()内の条件で並べ替えるという意味です。つまり、@clips = current_user.user_clips.order(created_at: :desc)とは現在ログインしているユーザーに紐づいたclipsを作られた順番に並べ替えなさいという意味です。

ちなみに、created_at: :desc は降順で並べ替える時に使います。昇順の場合はcreated_at: :asc です。

2.自分のクリップだけ表示させる(ビュー)

ビューの方にも変更を加えます。index.html.erbを開いて、以下のように記述してください。

#user_clips/index.html.erb

<% @user_clips.each do |user_clip| %>
 <% clip = user_clip.clip %>
 <tr>
  <td><%= clip.url %></td>
  <td><%= clip.title %></td>
  <td><%= clip.description %></td>
  <td><%= image_tag clip.image, width: 200 if clip.image %></td>
  <td><%= link_to 'Show', clip_path(clip) %></td>
  <td><%= link_to 'Delete', ..%></td>
 </tr>
<% end %>
 <% clip = user_clip.clip %>

というコードを追加したのはなぜなのでしょうか。この1文がないとコードは以下のようになります。

なんだか長くて見づらいですね。 そこでclipという変数にuser_clip.clipを代入することですっきりとしたコードになります。

3.自分のクリップの詳細

次に、showアクションを編集します。自分のクリップを@clip変数に入れる事で、自分のクリップの詳細を見られるようにします。

#user_clips_controller.rb

  def show
    @clip = @user_clip.clip
  end

ビューも変更しましょう。show.html.erbを開いて、タイトルと概要と画像が見れるように以下のように記述してください。

#show.html.erb

<h1><%= @clip.title %></h1>
<p><%= @clip.description %></p>
  <%= image_tag @clip.image, width: 500 if @clip.imge %>

自分のクリップの詳細を表示するので、

課題

アーティクルがどのカテゴリーに属しているかをビューで表示してみましょう。indexとshowで実装してみて下さい。

まとめ

この教程では、ユーザークリップの作成を行いました。ユーザークリップは、ユーザーとクリップモデルを多対多の関係で結ぶ中間モデルです。ユーザークリップを作成したことで、ユーザーは自分のクリップ一覧を見ることが出来たり、クリップにユーザークリップ数を表示させることが出来るようになりました。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×