(cache)ツイートの詳細画面を追加する - さらなる高みへ -higher ground -

ここではツイートの詳細画面を表示できるようにする。
ツイートに限らず、あるリソースの詳細画面表示は同じ方法で実現することができる。

ツイートの詳細画面を表示する

現在の実装では、ツイートをフィールドに一覧に表示させることはできてもツイッターやフェイスブックのようにその投稿の詳細画面（＝個別ページ）はない。

そこで、ツイートに詳細ボタンを追加して、ツイートの詳細ページに遷移できるようにする。
手順はユーザーのマイページを実装した時とほぼ同じで、以下のとおりである。

作業内容

１．ツイート詳細画面のルーティングを記述する

２．tweets controllerにアクションを作成する

３．ツイート詳細画面のビューを追加する

４．ツイート詳細画面へのリンクを作成する

1.ツイート詳細画面へのルーティングを記述する

まずはルーティングから記述してく。
ツイート詳細画面のルーティングはマイページのルーティングに非常に似ている。

こちらもまたツイート毎にパスが異なり、idが1のツイートの詳細画面のパスは/tweets/1のようなパスになる。
ツイートに関するアクションなのでtweetsコントローラを使う。
アクション名はマイページ同様showアクションを使う。

【例】
config/routes.rb

  Rails.application.routes.draw do
    get     '/コントローラ名/:id'        => 'コントローラ名#show'
  end

config/routes.rbを以下のように編集する

11行目を追記する。

config/routes.rb

Rails.application.routes.draw do
  devise_for :users
  root 'tweets#index'               
  get   'tweets'      =>  'tweets#index'
  get 'tweets/new' => 'tweets#new'     
  post 'tweets' => 'tweets#create'  
  get 'users/:id' => 'users#show'    
  delete 'tweets/:id' => 'tweets#destroy'  
  get 'tweets/:id/edit' => 'tweets#edit' 
  patch 'tweets/:id'  => 'tweets#update'
  get 'tweets/:id' => 'tweets#show'       #ツイート詳細画面
end

マイページへのルーティング同様ハッシュ形式でツイートのidの値を受け取っている。

２.tweets_controllerにアクションを定義する

次はツイート詳細画面に必要な情報をデータベースから取ってくるためのshowアクションを定義していく。

usersコントローラのshowアクションで実装したことを思い出しながら、showアクションを定義する。
また、ログインしていないユーザでも詳細ページに遷移できるようにするためにbefore_actionの設定を変更する必要がある。

問題1：ツイート詳細ページに表示したい情報をshowアクションに定義しましょう

作業ファイル：app/controllers/tweets_controller.rb

ヒント：ログインしていないユーザでも詳細ページに遷移できるようにするためにbefore_actionにshowアクションを追加しましょう。

tweets_controller.rb

class TweetsController < ApplicationController
  before_action :move_to_index, except: :index
# 中略

  def show
    @tweet = 詳細ページを見たいツイート
  end

  private
  def tweet_params
    params.permit(:image, :text)
  end

  def move_to_index
   redirect_to action: :index unless user_signed_in?
  end
end

【問題1の解答を確認する】　

これでツイート詳細画面に遷移するためのアクションを作ることができた。アクションを定義した後はそれに対応するビューを作っていく。

３.ツイート詳細画面のビューを追加する

showアクションを定義したら、次はツイート詳細ページのビューを作っていく。

ここではtweetsコントローラのshowアクションに対応するビューファイルを作っていく。
まずは必要なビューファイルを作る。

以下の指示に従い、app/views/tweets/show.html.erbを作成する。

app/views/tweets/show.html.erb

新規作成するファイル

・app/views/tweets/show.html.erb

作成したファイルを、以下のように編集する。

app/views/tweets/show.html.erb

<div class="contents row">
  <div class="content_post" style="background-image: url(<%= @tweet.image %>);">
    <% if user_signed_in? && current_user.id == @tweet.user_id %>
      <div class="more">
        <span><%= image_tag 'arrow_top.png' %></span>
        <ul class="more_list">
          <li>
            <%= link_to '編集', "/tweets/#{@tweet.id}/edit", method: :get %>
          </li>
          <li>
            <%= link_to '削除', "/tweets/#{@tweet.id}", method: :delete %>
          </li>
        </ul>
      </div>
    <% end %>
    <%= simple_format(@tweet.text) %>
    <span class="name">
      <a href="/users/<%= @tweet.user.id %>">
        <span>投稿者</span><%= @tweet.user.nickname %>
      </a>
    </span>
  </div>
</div>

基本的にはviews/tweets/index.html.erbと同じ構造をしている。
each文がないことに注意する。

４.ツイート詳細画面へのリンクを作成する

次はツイート詳細ページに遷移するためのボタンをビューに追加していく。
今回はログインしていないユーザでも詳細ページに遷移できるようにするために、if文の条件分岐の外に詳細ボタンを追加していく。

ツイートの詳細ページはツイート作成者ではなくても見られるようにしたいため、ツイート右上にあるドロップダウンボタンはツイート投稿者でなくとも表示させるようにする必要がある。

あとはlink_toメソッドを使いながらshowアクションへのルーティングが走るボタンを作成していく。

問題2：ツイート詳細ページに行くボタンを作ろう

作業ファイル：app/views/tweets/index.html.erb

ヒント：showアクションへのパスをterminalで確認し、link_toメソッドを使いながら実装していきましょう。

views/tweets/index.html.erb

<div class="content_post" style="background-image: url();">
  <div class="more">
    <span><%= image_tag 'arrow_top.png' %></span>
    <ul class="more_list">
      <li>
        <ツイート詳細画面を呼び出すためのルーティング>
      </li>
      <% if user_signed_in? && current_user.id == tweet.user_id %>
      <li>
         <%= link_to '編集', "/tweets/#{tweet.id}/edit", method: :get %>
      </li>
      <li>
         <%= link_to '削除', "/tweets/#{tweet.id}", method: :delete %>
      </li>
      <% end %>
    </ul>
  </div>  

/ 中略

</div>

【問題2の解答を確認する】　

できたらツイート詳細ボタンをクリックして、ツイート詳細画面を確認する。
一見ツイート一覧と変わりませんが、ツイートが一つしか表示されないような画面が出てきたら成功。

要点チェック

詳細画面はshowアクションで実装する。マイページもツイートの詳細画面も追加方法はほとんど同じ。