はじめに
トップページを作成し、ヘッダーとフッターが表示されるよう設定するやり方を見ていきましょう。
RailsではHTMLファイルがブラウザに出力される際、layoutファイル + テンプレートファイルという形で表示されます。デフォルトではapplication.html.erb が選択されるようになっており、アプリケーション全体に適応させたいものはこちらに記述していきます。
マニフェストファイルとは
マニュフェストファイルというのは、どのCSSファイルやJavaScriptファイルを呼び出すのかを記載したファイルのことです。application.html.erbを見てみると、head内に記述があります。ここにどのマニフェストファイルに従うかが記述されています。
- layout/application.html.erb内の、<head> ~ </head>内で、application.css / application.jsを読み込んでいる。
- applicaton.css / application.js内で、どのファイルを読み込むかを取りまとめしている。
- 初期の段階では、同階層のすべてのファイルと自身を読み込むように定義している。
*= require_self
*= require_tree .//= require_tree .これらの記載はこのような意味合いとなります。
- 同階層に存在している全てのファイルを読み込む(= require tree)
- 自分自身を読み込む(require self)
部分テンプレートとは
個別のviewファイルを呼び出す場合は、部分テンプレートを使用します。
部分テンプレートとして柄うファイルは、頭に「_」を付けることで、Railsがそのファイルを部分テンプレートファイルであると認識します。
viewファイル内からテンプレートファイルを呼び出す際は、renderメソッドを使います。
<%= render 'shared/header' %>この記載はshared/_header.html.erbを呼び出しています。
作業の流れ
- application.cssをapplication.scssに変更
- トップページの表示
- ヘッダーの表示
- フッターの表示
application.cssをapplication.scssに変更する
- scssに変更する事で、変数や親子関係の定義など、効率化の機能が使用でき、全体のコード量を削減できます。
require_treeを使うと同ディレクトリのcssファイルをすべて読みこんでしまうため、ファイルを読み込む順番がわからなくなります。- それを防ぐために、
@importを使って必要なファイルのみ読み込むほうがファイル管理を安全にできます。
// before
//= requiree_tree .
// after
@import 'top';
トップページの表示
まずトップページを作成していきます。
$ bundle exec rails g controller static_pages topstatic_pages コントローラとtop アクションを生成しています。これにともないtop.html.erb も生成されているはずです。
class StaticPagesController < ApplicationController
def top; end
endルーティングの設定
top.html.erb がトップページとなるよう追記しましょう。
Rails.application.routes.draw do
root 'static_pages#top'
end
表記をヘルパーメソッドに変更
ヘルパーメソッドを使ってaタグやimgタグをlink_to やimage_tag に変更しておきましょう。
<!-- before -->
<a href="/">Top</a>
<!-- after -->
<%= link_to 'Top', root_path %>ヘッダーの表示
ヘッダー用のテンプレートファイルを用意し、適切なディレクトリに配置します。今回はshared/_header.html.erb を作成しました。
application.html.erbにテンプレートファイルを呼び出す記述を追記しましょう。
<body>
<%= render 'shared/header' %>
<%= yield %>
</body>ヘッダーなので<%= yield %> より上に追記することに注意しましょう。
フッターの表示
同様にフッター用のテンプレートファイルを用意し、適切なディレクトリに配置します。今回はshared/_footer.html.erb を作成しました。
<body>
<%= render 'shared/header' %>
<%= yield %>
<%= render 'shared/footer' %>
</body>フッターなので<%= yield %> より上に追記することに注意しましょう。
終わりに
部分テンプレートは非常に多く出てくる基本のテクニックですので、しっかり抑えておきましょう！
参考記事
コメント