Railsでビューのレイアウトを指定する

Railsのレイアウトファイルの使い方について説明します。

ページのヘッダー、ナビゲーションバー、フッターなどの大枠はRailsアプリを通して共通になるのが一般的です。

Railsではこのような共通の枠組みを記載したファイルを「レイアウトファイル」と呼び、app/views/layouts配下に配置します。

また、コントローラーやアクションで個別で指定したり、レイアウトファイルを非表示にしたり、レイアウトファイルに動的データを渡すことができます。

動作確認

Rails 4.1

1. デフォルトのレイアウトファイル

デフォルトでは、「app/views/layouts/application.html.erb」がレイアウトファイルとして使われます。
そして、yieldの箇所が各コントローラーで表示するテンプレートが表示されます。

# app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>ControllerTest</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

2. レイアウトファイルを指定

コントローラーにlayout宣言をすることで、コントローラーが使うレイアウトを指定することができます。

# app/controllers/products_controller.rb
class ProductsController < ApplicationController
  # app/views/layouts/special_layout.html.erbをレイアウトファイルとして使う
  layout "special_layout"
  # except(除く)やonly(のみ)を使うことで、レイアウトを指定するアクションを絞ることができる
  # layout "special_layout", except: [:new, :edit]
  ...
end

また、renderメソッドのlayoutオプションを指定することで、アクション内でレイアウトを指定できる。

def index
  @products = Product.all

  # special_layoutで、index.html.erbを表示する
  render :index, layout: "special_layout"
  # レイアウトを使わないで、index.html.erbを表示する
  # render :index, layout: false
end

3. レイアウトファイルにデータを渡す

レイアウトファイル内では、テンプレートファイルで使用できるインスタンス変数やセッションデータなどすべてのデータにアクセスできます。
さらに、テンプレートファイルで設定されたインスタンス変数にもアクセスすることができます。

これを利用することで、ヘッダー、サイドバー、フッターにページ固有のHTMLを表示することができます。
よくある例として、「ページ固有のタイトル表示」、「ページ固有のコンテンツ表示」の仕方を説明します。

ページ固有のタイトルを表示する

まず、個々のテンプレートファイルでprovideメソッドでタイトルを設定します。

# テンプレートファイル
<%= provide(:title, "個別タイトル") %>
<h1>個別タイトル</h1>
...

レイアウトファイルでは設定された値をyeildで表示します。

# レイアウトファイル
<!DOCTYPE html>
<html>
<head>
  <!-- 「Sample Application | 個別タイトル」とタイトルに表示される -->
  <title>Sample Application | <%= yield(:title) %></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
...

ページ固有のコンテンツを表示する

まず、個々のテンプレートファイルでcontent_forメソッドでコンテンツを作成します。
ここでは、サイドバーの表示を設定しています。

# テンプレートファイル
<h1>テンプレートファイル</h1>

<%= content_for(:sidebar)  do %>
  <li>このリストはこのテンプレートが表示された</li>
  <li>ときだけ表示されます。</li>
<% end %>

レイアウトファイルでは設定されたコンテンツをyeildで表示します。

# レイアウトファイル
...
</head>
<body>
  <div class="main">
    <%= yield %>
  </div>
  <div class="sidebar">
    <ul>
      <li>全てのページに表示されるリスト項目</li>
      <!-- テンプレートファイルに定義した sidebar が表示されます。
             設定されていない場合はこのli要素は表示されせん -->
      <%= yield(:sidebar) %>
    </ul>
  </div>
</body>
</html>