前基礎Ruby on Rails Chapter3 テンプレート
次基礎Ruby on Rails Chapter4 データベースとモデル

レイアウトテンプレート

レイアウトテンプレートとは

テンプレートをレンダリングして、レイアウトテンプレートの中に埋め込んでHTMLを出力する。
<%= yield %>の部分にアクション用のテンプレートが埋め込まれる。
csrf_meta_tags、csp_meta_tag、stylesheet_link_tag、javascript_include_tagは、それぞれのメソッドが作ったタグが埋め込まれる。
<%= csp_meta_tag %>は、Rails5.2で導入されたメソッドで、Content Security Policy(CSP)に関するタグを埋め込むために使用する。

デフォルトテンプレート

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Asagao</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

モックアップのレイアウトテンプレート

titleの所を、<%= page_title %>に書き換える。
application_helper.rbのApplicationHelperモジュールに、page_titleメソッドを追加する。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= page_title %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

app/helpers/application_helper.rb

module ApplicationHelper
  def page_title
    title = "Morning Glory"
    title = @page_title + " - " + title if @page_title
    title
  end
end

http://localhost:3000/about を開く。

レイアウトテンプレートの切り替え

レイアウトテンプレートを切り替える3つの方法

layoutsディレクトリに、top.html.erbのような、コントローラ名.html.erbのテンプレートを置く。
layoutメソッドを使う。（親クラスに指定すれば継承される）

class TopController < ApplicationController
  layout "sample"

renderメソッドにlayoutオプションをつけてテンプレートファイルを指定する。

def show
  render layout: "error"
end

def raw
  # アクション用のテンプレートをそのまま全体とするには、falseを指定する。
  render layout: false
end

部分テンプレート

部分テンプレートの使い方

部分テンプレート用のファイルは、_menu_bar.html.erbのようにファイル名の前に_をつける。
<%= render "menu_bar" %>のように、_と.html.erbを除いたものを引数に指定する。
別のディレクトリにある部分テンプレートの読み込みには、<%= render "shared/menu_bar" %>のように、ディレクトリ名/を付ける。

モックアップの部分テンプレート

デフォルトレイアウトテンプレート

views/layouts/application.html.erbの一部

  <body>
    <div id="container">
      <header>
        <%= render "shared/header" %>
      </header>
      <main>
        <%= yield %>
      </main>
      <aside id="sidebar">
        <%= render "shared/sidebar" %>
      </aside>
      <footer>
        <%= render "shared/footer" %>
      </footer>
    </div>
  </body>

ヘッダ部分テンプレート

app/views/shared/_header.html.erb

<%= image_tag "logo.gif", size: "272x48", alt: "Morning Glory" %>
<nav class="menubar">
  <ul>
    <%= menu_link_to "TOP", :root %>
    <%= menu_link_to "ニュース", "#" %>
    <%= menu_link_to "ブログ", "#" %>
    <%= menu_link_to "会員名簿", "#" %>
    <%= menu_link_to "管理ページ", "#" %>
  </ul>
</nav>

メニューヘルパーメソッド

app/helpers/application_helper.rbの一部

module ApplicationHelper
  #（省略）
  
  # 第3引数は省略可
  def menu_link_to(text, path, options={})
    content_tag :li do
      # 現在と同じページの場合はリンクにしない
      link_to_unless_current(text, path, options) do
        content_tag(:span, text)
      end
    end
  end
end

サイドバー部分テンプレート

app/views/shared/_sidebar.html.erb

<%= render "shared/login_form" %>

<h2>最新ニュース</h2>
<ul>
  <% 5.times do |i| %>
    <li><%= link_to "ニュースの見出し", "#" %></li>
  <% end %>
</ul>

<h2>会員のブログ</h2>
<ul>
  <% 5.times do |i| %>
    <li><%= link_to "ブログの見出し", "#" %></li>
  <% end %>
</ul>

ログイン部分テンプレート

app/views/shared/_login_form.html.erb

<h2>ログイン</h2>
<form id="login-form">
  <div>
    <label>ユーザ名：</label>
    <input type="text">
  </div>
  <div>
    <label>パスワード：</label>
    <input type="password">
  </div>
  <div>
    <input type="submit" value="ログイン">
  </div>
</form>

フッタ部分テンプレート

app/views/shared/_footer.html.erb

<%= link_to "このサイトについて", :about %>｜
Copyright(C)<%= link_to "Oiax Inc.", "http://www.oiax.co.jp" %>
2007-2018

トップページの修正

app/views/top/index.html.erb

<%= 5.times do |x| %>
  <h2>見出し</h2>
  <p>
    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
    <%= link_to "もっと読む","#" %>
  </p>
<% end %>

http://localhost:3000 を開く。

スタイルシート

cssファイルは、app/assets/stylesheetsの下に置く。
application.cssの *= require_tree .と*= require_selfは消さない。

http://localhost:3000 を開く。

参考
改訂4版基礎 Ruby on Rails (IMPRESS KISO SERIES)