今までに、少なくとも下記の２つのURLへアクセスが可能になっているかと思います。
http://xxxxx.c9users.io:8080/top/profile
今回は、Viewの機能に含まれる、「レイアウト」について触れていきます。
app/views/layouts/application.html.erb を開いてください。
上の図は初期状態のレイアウトファイルです。
内容としては下記になります。
■ クロスサイトリクエストフォージェリ(CSRF)とは Webサイトにスクリプトを仕込むことで、閲覧者の意図しない操作をさせる攻撃を意味します。サーバー側でCSRFを防ぐには、リクエストに含まれる情報を元にチェックを行ったり、formタグ内の一部にランダムな値を配置してリクエストの一貫性を保たなければなりません。
※Ruby on Railsでは上記の対策はフレームワーク内であらかじめ実装されているので、現時点ではあまり気にする必要はありません。
レイアウトの機能に関しては後述しますので、まずは下記のようにapp/views/layouts/application.html.erbに１行追記してください。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div>レイアウトの編集</div>
<%= yield %>
</body>
</html>
編集が完了したら保存を行い、ブラウザで下記のURLにアクセスしてみて下さい。
※xxxxxの箇所は、それぞれの環境ごとに異なります。
http://xxxxx.c9users.io:8080/top/profile
異なるURLへのアクセスなのですが、 「レイアウトの編集」という文字列がどちらにも表示されていることが分かります。
レイアウトファイルとは、文字通りWebアプリケーションのレイアウトを指定するファイルになります。
app/views/layouts/application.html.erb を編集することで、全てのViewに影響を与えることができるのです。
再度ソースコードを見てみましょう。
一見、普通のHTMLのソースコードのようにも見えますが、５行目以降 <%= ◯◯◯ %>というような記述が出てきます。
これは、Ruby on Railsの機能で、Viewに<%= ◯◯◯ %>と記述すれば、◯◯◯の部分の処理を実行してHTMLのソースコードに反映するというものです。
つまり、<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
というのは stylesheet_link_tagメソッドを実行するという Rubyのコードになります。
stylesheet_link_tagメソッドは、を生成します。
第１引数の’application’というのが実際に呼び出すCSSのファイルです(引数上は拡張子を省略する)。第２、第３引数は現時点では重要ではないので割愛します。
実際にブラウザで確認できるソースコードが下記になります。
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link rel=”stylesheet” media=”all” href=”/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1″ data-turbolinks-track=”true” />
<script src=”/assets/jquery.self-a714331225dda820228db323939889f149aec0127aeb06255646b616ba1ca419.js?body=1″ data-turbolinks-track=”true”></script>
<script src=”/assets/jquery_ujs.self-d456baa54c1fa6be2ec3711f0a72ddf7a5b2f34a6b4f515f33767d6207b7d4b3.js?body=1″ data-turbolinks-track=”true”></script>
<script src=”/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1″ data-turbolinks-track=”true”></script>
<script src=”/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1″ data-turbolinks-track=”true”></script>
<meta name=”csrf-param” content=”authenticity_token” />
<meta name=”csrf-token” content=”xwNlIyeEqvqE/syuXJPfOaorWfVDvmRFOY0kr9/Y6dPODN1uSLFHGzPk/ZVJ4LLGrbUI4g2m2GFO+JnOfEVW3w==” />
</head>
<body>
<div>レイアウトの編集</div>
<h1>Top#index</h1>
<p>Find me in app/views/top/index.html.erb</p>
</body>
</html>
<link rel=”stylesheet” media=”all” href=”/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1″ data-turbolinks-track=”true” />
上記の部分が、<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>の結果となります。ダイジェストと呼ばれる文字列が付加されているため、ぱっと見では何が書いてあるかわかりませんが、拡張子が.cssなのでCSSファイルであることがわかります。
同様に、scriptタグやcsrf-tokenを含むメタタグもメソッドにより生成されています。
また、ここで記述されているCSSファイルやJSファイルがどのディレクトリに属しているかについてですが、
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
→ app/assets/stylesheets/application.css
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
→ app/assets/javascripts/application.js
というようになっています。上記のファイルを修正することでjavascriptやcssを修正することができます。
※javascriptやcssの修正については後述します。
続いて、yieldについてですが、これは少しわかりにくいのですが、<%= yield %>の箇所には各Actionから呼び出されたViewの結果が挿入されます。
つまり、http://xxxxx.c9users.io:8080 へアクセスすると、app/views/top/index.html.erbの結果が挿入され、http://xxxxx.c9users.io:8080/top/profileへアクセスするとapp/views/top/profile.html.erb
の結果が、app/views/layouts/application.html.erbへ挿入されることになります。
また、ヘッダーやフッターをレイアウトに含むことで各Viewでヘッダーの記述を行わずに済みます。
