第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 をインストールして動かしてみます。お楽しみに。
