Icon Ruby on Rails 3.0 日記

第4回: コントローラとビューの生成(2)

前回は、タスク管理ツールの要となる 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>
(省略)

ブラウザを再読込すると、タブブラウザの場合は次のようにタイトル表示が変化します。

画面キャプチャ1

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 という名前で保存します。

nchakサイトロゴ

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 で仕様が変更されました。

以上の変更の結果、アプリケーションの外観は次のように変化します。

画面キャプチャ2

（2010/04/29）

記事に関するご質問は、 hermes@oiax.jp までメールでお送りください。

ウェブサイト構築の発注先を検討されているお客様は、ご相談フォームをご利用ください。