第3回 レイアウトと部分テンプレート

2007/10/08

今回のテーマはテンプレートを分割する仕組み、レイアウト部分テンプレートです。
レイアウトは、メインのテンプレートを包み込むテンプレートです。次の2つのRHTMLテンプレートをご覧ください。

<html>
<head>
  <title><%= @title %></title>
</head>
<body>
<%= yield :layout %>
</body>
</head>
<h1><%= @title %></h1>
<h2><%= @chapter_heading %></h2>
<% @paragraphs.times do |p| -%>
  <p><%= p %></p>
<% end -%>

上がレイアウトで、下がメインのテンプレートです。レイアウトもテンプレートの一種であることに注意してください。対応するアクションは次のようになっています。結果のHTMLコードを想像してみてください。

@title = '個人情報保護方針'
@chapter_heading = '基本方針'
@paragraphs = [
  '当社は、個人情報保護法および関連するその他の法令・規範を遵守します。',
  '当社は、個人情報をお客様に明示した利用目的の範囲内で取り扱います。',
  '当社は、個人情報への不正アクセスの予防に努めます。'
]

答えはこうです。

<html>
<head>
  <title>個人情報保護方針</title>
</head>
<body>
<h1>個人情報保護方針</h1>
<h2>基本方針</h2>
  <p>当社は、個人情報保護法および関連するその他の法令・規範を遵守します。</p>
  <p>当社は、個人情報をお客様に明示した利用目的の範囲内で取り扱います。</p>
  <p>当社は、個人情報への不正アクセスの予防に努めます。</p>
</body>
</head>

ちょっとインデントが不規則ですが気にしないでください。最終的なHTMLコードのインデントを揃える方法については、連載の後ろの方で説明する予定です。

さて、レイアウトテンプレートの body 要素の内側にある次の行に着目してください。

<%= yield :layout %>

少々独特の表現ですが、これはこのまま丸暗記してください。ここにメインのテンプレートがレンダリングされて挿入されます。ちなみに、英語の yield は「(作物などを)産出する」という意味の動詞です。

上記の例は、あまり大きなHTMLコードではないため、ありがたみが伝わりにくいかもしれませんが、Webページを分割することでHTMLの構造が把握しやすくなります。

続いて部分テンプレートについて学びましょう。

部分テンプレートは、テンプレートの中に包み込まれたテンプレートの断片です。外側のテンプレートは、レイアウトでもメインのテンプレートでも構いません。次の2つのRHTMLテンプレートをご覧ください。

<html>
<head>
  <title><%= @title %></title>
</head>
<body>
  <div id="container">
    <div id="header"><%= render :partial => "header" %></div>
    <div id="main"><%= yield :layout  %></div>
    <div id="linkList"><%= render :partial => "link_list" %></div>
    <div id="footer"><%= render :partial => "footer" %></div>
  </div>
</body>
</head>
<a href="/index.html"><img src="/images/company_logo.gif"
  width="161" height="64" alt="トップページ" border="0" /></a>
<hr />

下のテンプレートには header という名前が付いていると考えてください。上のテンプレートの <%= render :partial => "header" %> の部分に埋め込まれるものです。:partial オプションを付けて render メソッドを呼ぶと、その位置に部分テンプレートが挿入されます。英語の partial は「部分的な」という意味の形容詞です。

ここで、次のようなCSSファイルを用意すれば、よくある「段組みレイアウト」になりますね。

#container {
  width: 750px;
}

#header {
  background-color: #ddddee;
  height: 80px;
}

#main {
  float: left;
  width: 550px;
}

#linkList {
  float: right;
  width: 200px;
}

#footer {
  background-color: #eedddd;
  height: 40px;
}

スタイルシートを用いると文書の構造と体裁が分離されます。さらに、レイアウトと部分テンプレートを用いると文書の構造から内容を分離させることができます。Web制作は複雑な作業です。分離できるものは分離して、なるべく小さな単位にして取り扱うのが、作業効率を上げ、ミスを減らすコツです。

次回は、いよいよ Rails をインストールして動かしてみます。お楽しみに。