2013-04-27 14:13

アプリケーション共通のレイアウトを作成する

レイアウトとは?

サイトの外枠のことです。
このサイトで説明すると、ページ上部の写真部分をヘッダ、この記事の右側のProfile等が記載されている部分をサイドメニュー、ページ最下部のCopyrightが表示されている部分をフッタといい、ヘッダやフッタ、サイドメニューらのページ上の配置定義をレイアウトと言います。

ページ全体の構成を定義するレイアウトに対して、レイアウトによって構成されるヘッダやフッタ、サイドメニューなどを部分テンプレートと呼びます。

レイアウトの雛形

レイアウトは基本的にapp/views/layouts/application.html.erbで定義します。

rails newでアプリケーションを生成した直後は次のようになっているハズです。
次の例はアプリケーション名を"piyopiyo"とした場合のものです。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>Piyopiyo</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

yieldというのは個別のテンプレートを埋め込む為のメソッドです。
個別のテンプレートとは、コントローラで定義したアクションのそれぞれに対応するコンテンツを指します。
アプリケーションでは、このコンテンツ部分をページごとに入れ替えて表示し、それ以外の部分はどのベージにおいても共通の内容を表示します。

コンテンツ部分の表示はこちら ⇒ Viewの生成

部分テンプレートを配置する

上でデフォルトのレイアウトを示しましたが、

<body> 〜 </body>

を見てみると、<%= yield %>があるのみです。
このレイアウトには、コンテンツが1つしかないということです。
ここに部分テンプレートを配置していきます。

とりあえず、ヘッダとフッタを配置してみます。

app/views/layouts/application.html.erb
<body>
<div id="container">

  <div id="header">
<%= render "shared/header" %>
  </div>

  <div id="content">
<%= yield %>
  </div>

  <div id="footer">
<%= render "shared/footer" %>
  </div>

</div>
</body>

まず、ページ全体を指す領域としてcontainerを記述し、body全体を指定しています。
こうしておくと、スタイルを設定する際に何かと便利です。

その次にheaderを記述しています。
レイアウトでは、直接部分テンプレートであるheaderの内容を書き込むのではなく、renderメソッドで部分テンプレートを呼び出すだけに留めます。
このrenderメソッドでは"shared/header"を引数に指定していますが、app/views/shared/_header.html.erbに記述した部分テンプレートの中身を呼び出しています。
部分テンプレートのファイル名はアンダースコアで始めます。

<%= yeild %>はcontentで囲んでいます。
body全体をcontainerで囲むのと同様にこうしておくと後に役に立つことがあるでしょう。

最後のfooterはheaderと同様にrenderメソッドで部分テンプレートを埋め込んでいます。
footerでは、app/views/shared/_footer.html.erbを呼び出しています。

では、実際に部分テンプレートを記述してみましょう。
続きは次回 ⇒ 部分テンプレートを作成する