第4回: コントローラとビューの生成(2)
2010/04/29
前回は、タスク管理ツールの要となる tasks コントローラのスケルトンを生成しました。
今回は、ビューを整えていきましょう。
レイアウト
エディタで app/views/layouts/application.html.erb を開いてください。初期状態は次のようになっています。
<!DOCTYPE html> <html> <head> <title>Nchak</title> <%= stylesheet_link_tag :all %> <%= javascript_include_tag :defaults %> <%= csrf_meta_tag %> </head> <body> <%= yield %> </body> </html>
このファイルはレイアウトと呼ばれるHTMLテンプレートです。レイアウトは、アクションに対応するHTMLテンプレート本体がはめ込まれる「土台」の役割をします。
本体がはめ込まれるのは &;%= yield %&; と書かれた部分です。
application.html.erb は、アプリケーション全体で使用されるデフォルトのレイアウトです。tasks コントローラ専用のレイアウトが必要であれば、app/views/layouts ディレクトリに tasks.html.erb というファイルを作成します。
では、application.html.erb の title 要素の中身を「Nchak」から「Nchak - タスク管理ツール」に変更してみましょう。
<!DOCTYPE html> <html> <head> <title>Nchak - タスク管理ツール</title> (省略)
ブラウザを再読込すると、タブブラウザの場合は次のようにタイトル表示が変化します。
Rails 2.3 までは、最初に rails コマンドでアプリケーションを生成するときに、application.html.erb は作られませんでした。Rails 3.0 のちょっとした進歩です。
部分テンプレート
次に、レイアウトにヘッダとフッタを埋め込むことにしましょう。
まず、app/views ディレクトリの下に shared ディレクトリを作成してください。
その下に _header.html.erb ファイル（ファイル名先頭のアンダースコアに注意）を新規に作成して、次のように書き込みます。
<div id="header"> <%= image_tag 'nchak_logo.png', :size => '131x65', :alt => 'サイトロゴ' %> </div>
同じ場所に _footer.html.erb ファイルを新規に作成して、次のように書き込みます。
<div id="footer"> <strong>nchak</strong> - Powered by <strong>Ruby on Rails 3.0</strong> </div>
ファイル名がアンダースコアで始まるテンプレートは部分テンプレートと呼ばれ、別のテンプレートの中に埋め込まれます。
続いて、次の画像をダウンロードして public/images ディレクトリの下に nchak_logo.png という名前で保存します。
public/stylesheets ディレクトリに layout.css ファイルを作成して、次のように書き込みます。
[訂正] 読者の方からのご指摘により、app/stylesheets を public/stylesheets と訂正いたしました(2010/10/03)。
body {
background-color: #5555be;
}
div#wrapper {
width: 600px;
margin: 10px auto;
background-color: #fff;
}
div#header, div#footer {
color: #666;
margin: 5px;
padding: 5px;
}
div#footer {
text-align: center;
}
div#contents {
background-color: #fff;
color: #000;
margin: 5px;
padding: 5px;
border: solid 1px #ccc;
}
最後に、app/views/layouts/application.html.erb を次のように修正します。
(省略)
<body>
<div id="wrapper">
<%= render 'shared/header' %>
<div id="contents">
<%= yield %>
</div>
<%= render 'shared/footer' %>
</div>
</body>
</html>
Rails 2.2 までは部分テンプレートをテンプレートに埋め込む際、render :partial => 'foo' のように書く必要がありましたが、Rails 2.3 以降は render 'foo' と簡潔に書けるようになりました。テンプレートの中で render メソッドを使用するのは、部分テンプレートを埋め込む場合がほとんどなので、これは歓迎すべき仕様変更です。
[訂正] この記事の発表時には、render 'foo' と書けるようになった Rails のバージョンを 3.0 と書きましたが、正しくは 2.3 です。ただし、Rails 2.3 のドキュメントには、render :partial => 'foo' という書き方しか載っていません。Rails 2.1 までは render 'foo' は render :file => 'foo' と同値で、Rails 2.2 で仕様変更が予告され、Rails 2.3 で仕様が変更されました。
以上の変更の結果、アプリケーションの外観は次のように変化します。
