(railsアプリ名)/app/views/layouts
ここが、Railsにおける共通デザインのテンプレート置き場になっています。
(railsアプリ名)/app/views/layouts/application.html.erb
「rails new」コマンドを実行した際に自動生成されます。
このファイルが、標準のレイアウトファイルになり、viewを生成するタイミングでまず解釈します。
ファイルの内容としては下記のようになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Sample</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> |
<%= csrf_meta_tags %>
「クロスサイトリクエストフォージェリ(CSRF)」という、Railsアプリ外部からの不正アクセスに対処するためのHTMLタグです。
実際に出力されるHTMLタグは下記のようになっていました。
|
1 2 |
<meta name="csrf-param" content="authenticity_token" /> <meta name="csrf-token" content="Zu0BFyAHY4vy1vZox/SLf3QK7yYVGKG7LXBaHnWvXWKmsCITcI5NTHxqVtQnU7cUVswfehAi1OAcTe8Ri+bGtw==" /> |
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Railsが提供するCSSタグを生成します。
実際に出力されるHTMLタグは下記のようになっていました。
|
1 2 3 4 |
<link rel="stylesheet" media="all" href="/assets/scaffolds.self-384abb57dd34fcbbc2aff6bb0df48fd7e114af47551ce155a09aec39ae700446.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/test.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" /> <link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" /> |
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Railsが提供するJavaScriptタグを生成します。
実際に出力されるHTMLタグは下記のようになっていました。
|
1 2 3 4 5 6 7 8 |
<script src="/assets/rails-ujs.self-551fbd47b981dacbb84a270f9123074caf39eb72aaf6f478ab597c6f81435e4b.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/activestorage.self-6e8d967adecc8b2a7259df0f51ef5b6f171c33267c7d149a474beccd90c68697.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/turbolinks.self-2db6ec539b9190f75e1d477b305df53d12904d5cafdd47c7ffd91ba25cbec128.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/test.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script> <script src="/assets/application.self-66347cf0a4cb1f26f76868b4697a9eee457c8c3a6da80c6fdd76ff77e911715e.js?body=1" data-turbolinks-track="reload"></script> |
では、実際に出力されているCSSやJavaScriptが何なのかは、下記の記事で解説しています。
【Ruby on Rails】アセット(CSS,JavaScript)やマニフェストファイルの仕組み(Sprockets、Webpacker）
<%= yield %>
ビューファイルの内容を表示します。
参考：ビューファイル
(railsアプリ名)/app/views/(コントローラー名)/ビューファイル.html.erb
共通の情報を読み込んでみる。
例えば、下記のようにbody部に、「<h1>共通レイアウトテストです。</h1>」というタグを加えてテストします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Sample</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> <h1>共通レイアウトテストです。</h1> <%= yield %> </body> </html> |
実行結果
上記のように、<h1>で設定したタグ内容が出力されていることを確認できます。
レイアウトを個別に分ける。
実際の業務では一つのアプリ内に「一般ユーザー画面」、「管理者画面」、「スタッフ画面」というように複数の画面を持つシステムが共存することが普通でしょう。その場合は下記のようにlayoutファイルも分けることが可能です。
|
1 2 3 |
(railsアプリ名)/app/views/layouts/front.html.erb (railsアプリ名)/app/views/layouts/staff.html.erb (railsアプリ名)/app/views/layouts/admin.html.erb |
その場合は、controllers/concernsディレクトリにbaseコントローラを作成して下記のように記述して作成するコントローラーに継承させて使用します。
|
1 2 3 4 5 6 7 |
module FrontControllerBase extend ActiveSupport::Concern included do layout 'front' end end |
ポイントとしては、layout '使いたいlayoutファイル名'と指定している箇所です。これによってどのレイアウトを使うかを指定できます。
この記事へのコメントはありません。