基礎Ruby on Rails Chapter3 レイアウトテンプレート

前 [基礎Ruby on Rails Chapter3 テンプレート](https://qiita.com/tseno/items/e6587a28cc80a0341636)
次 [基礎Ruby on Rails Chapter4 データベースとモデル](https://qiita.com/tseno/items/b878c41b0e9be2e35c56)

## レイアウトテンプレート

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

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

デフォルトテンプレート

```erb: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メソッドを追加する。

```erb: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>
```

```ruby: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 を開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/0d3afbf6-ca53-f0c8-2415-08774a1944b8.png)

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

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

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

```ruby
class TopController < ApplicationController
  layout "sample"
```
  - renderメソッドにlayoutオプションをつけてテンプレートファイルを指定する。

```ruby
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" %>`のように、`ディレクトリ名/`を付ける。

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

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

```erb: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>
```

ヘッダ部分テンプレート

```erb: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>
```

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

```ruby: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
```

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

```erb: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>
```

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

```erb: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>
```

フッタ部分テンプレート

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

### トップページの修正

```erb:app/views/top/index.html.erb
<%= 5.times do |x| %>
  <h2>見出し</h2>
  <p>
    ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。
    <%= link_to "もっと読む","#" %>
  </p>
<% end %>
```
http://localhost:3000 を開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/b7aad6c6-7ba4-bc78-209e-50a2c6df631c.png)


## スタイルシート

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

http://localhost:3000 を開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/470a0fe8-d3aa-deba-d122-7426bff1184a.png)




参考
[改訂4版 基礎 Ruby on Rails (IMPRESS KISO SERIES)](https://www.amazon.co.jp/%E6%94%B9%E8%A8%824%E7%89%88-Ruby-Rails-IMPRESS-KISO/dp/429500460X/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=1536666358&sr=1-1)