STEP 9: タスクの簡易表示

2010/02/12

前回に引き続き、基本の7アクション以外のアクションを追加します。

/tasks/123 で id の値が 123 であるタスクの詳細画面が表示されますが、/tasks/123/simple で簡易表示されるようにしてみましょう。


まず、ルーティングを修正します。

$ edit config/routes.rb
ActionController::Routing::Routes.draw do |map|
  map.root :controller => 'top', :action => 'index'

  map.resources :tasks,
    :member => { :simple => :get },  
    :collection => { :unfinished => :get }
end

:member => { :simple => :get }, という一行を加えています。

"collection" が「集合」を意味するのに対して、"member" は「要素」を意味します。

unfinishedアクションは「未完了タスク」という集合を表示(GET)するものでした。それに対して、simpleアクションは「特定のタスク」を表示(GET)します。ただし、その表示のスタイルを「簡潔(simple)」と指定しています。

通常私は、GETメソッドでアクセスするアクションに対して「形容詞」の名前を与えます。こうすると link_to メソッドの第二引数に [ :simple, @task ] のように指定できるため、英文法的に「すわり」がいいからです。常によいアクション名を思いつくわけではありませんが、一貫性のある命名規則を使用するように努力することは大事だと思います。


続いて、Tasks コントローラにsimpleアクションを追加します。

$ edit app/controllers/tasks_controller.rb
class TasksController < ApplicationController
  (省略)

  def show
    @task = Task.find(params[:id])
  end

  def simple
    @task = Task.find(params[:id])
  end

  (省略)
end

simpleアクション用のテンプレートを作成します。

$ edit app/views/tasks/simple.html.erb
<h1>タスク簡易表示</h1>

<div class="task">
  <%= content_tag(:span, h(@task.subject), :class => @task.done? ? 'done' : '') %>
  <span class="due_date"><%= @task.due_date.strftime('%Y/%m/%d') %></span>
</div>

スタイルシートを修正します。

$ edit public/stylesheets/application.css
(省略)
table.attributes th {
  text-align: right;
  background-color: #cc4;
}

div.task {
  border: 1px solid #008;
  padding: 2px;
}

div.task span.done {
  text-decoration: line-through;
}

div.task span.due_date {
  color: #080;
  font-size: smaller;
}
(省略)

ヘルパーメソッドoperations_on_taskを修正します。

$ edit app/controllers/tasks_controller.rb
module TasksHelper
  def operations_on_task(task)
    links = []
    links << link_to('簡易表示', [ :simple, task ])
    links << link_to('編集', [ :edit, task ])
    links << link_to('完了', '#')
    links << link_to('削除', task, :method => :delete,
      :confirm => '本当に削除しますか?')
    links.join(' | ')
  end
end

ブラウザでタスク一覧ページを表示します。

画面キャプチャ1

適当なタスクの「簡易表示」リンクをクリックします。

画面キャプチャ2