アプリ開発実践入門4 Controllerとview レイアウト

今日の教科書

レイアウトを作る

レイアウトファイルについて

railsではアクションとテンプレートに

タグだけあればWebページを表示できる。
application.html.erb：デフォルトのレイアウト
mailer.html.erb：HTMLメールのレイアウト
mailer.text.erb：テキストメールのレイアウト

application.html.erbについて

<%= csrf_meta_tags %>：CSRF対策のタグ。自動でレンダリング時に対策をしてくれるタグを生成する。
<%= csp_meta_tag %>：JavaScriptのセキュリティのためのタグをヘッダーに出力してくれる。
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>：スタイルシート関連のタグを出力してくれる。ページそのもののスタイルシートと、アプリ全体のスタイルシートの両方を読み込む際に、必要なタグを生成する。
<%= javascript_pack_tag 'application', 'data-turbolinks-track':
'reload' %>：railsが必要とするJavaScriptのライブラリをロードするためのタグを生成する。
<%= yield %>：表示されるページの内容を出力する。

のなかにこれだけあればいい。

メインのレイアウトを作ろう

新しいファイルを「コントローラ名.html.erb」で「layouts」フォルダ内に作る。
必要なソースコードを記述する。

BootstrapのCSSのスタイルシートを使う

HTML 外部リソースへのリンク要素

<link href="main.css" rel="stylesheet">:

内に記述すると外のスタイルシートとリンクする。
現状、main.cssにはBootstrapへのパスを入れて読み込ませている。

renderでヘッダー・フッター表示

ヘッダー部分に<%= @title %>を追加。
ボディにヘッダーとフッターの2つのテンプレートをレンダリングし出力するタグを追加。。
<%= render template:'layouts/コントローラ名_header' %>：ヘッダーの出力
<%= render template:'layouts/コントローラ名_footer' %>：フッターの出力
レイアウトフォルダ内のヘッダーとフッターのテンプレートを読み込み、出力。

ヘッダー・フッターを作る

レイアウトフォルダ内に「コントローラ名_header.html.erb」のファイルを作成する。フッターも同様。
ソースコードを記述する。
HTMLテンプレートも修正しておく。
コントローラも修正。
ここでlayoutを記述。対応するコントローラで使用するレイアウトをを設定する値。横にコントローラ名を書くだけで
「layouts」フォルダ内のHTMLテンプレートがレイアウトとして使われる。「application」にすればそっちのテンプレートが使われる。