back

レイアウトを活用しよう (7/7)

■レンダリングされたコードを確認する

独自のレイアウトを使ってページを表示できたら、最後に「どのようなページになったか」を確認しておくことにしましょう。表示されたページのソースコードを調べてみてください。ちょっと面白いことがわかります。

下のリスト欄に掲載したのは、<head>タグの内容です。ここでは、予想とは少し違う内容が出力されていますね。まず<meta>タグ関連を見てください。
<meta http-equiv="Content-Type" 
    content="text/html; charset=utf-8">
<meta content="authenticity_token" 
    name="csrf-param" />
<meta content="Y8k0H…略…CSTH6I=" 
    name="csrf-token" />
こんな３つのタグが書かれています。最初の１行目はレイアウトファイルに記述されたものですが、後の２つは<%= csrf_meta_tags %>によって出力されたものです。これらは、Railsが必要とする情報を<meta>タグで書き出しているのです。

また、スタイルシートとJavaScriptのタグも見てみましょう。こうなっています。
<link href="/assets/helos.css?body=1" 
    media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/helos.js?body=1" 
    type="text/javascript"></script>
確か、作成したのは「helos.css.scss」と「helos.js.coffee」というファイルでしたね。それなのに、生成されるタグに書かれたファイル名は「helos.css」「helos.js」となっています。SCSSとCoffeeScriptは、それぞれRailsによって通常のCSSとJavaScriptに自動変換され、それらがリンクされるようになっていたのです。実に面白いですね。

――さあ、これでレイアウト作成の基本はひと通り頭に入りました。あとは、実際にそれぞれでレイアウトを作ってみてください。一度作れば、基本的な使い方はすぐに理解できるようになりますよ！


(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※ブラウザに出力されたページの<head>部分

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>サンプルレイアウト</title>
	<link href="/assets/helos.css?body=1" media="screen" rel="stylesheet" type="text/css" />
	<script src="/assets/helos.js?body=1" type="text/javascript"></script>
	<meta content="authenticity_token" name="csrf-param" />
<meta content="Y8k0HEnWveSYZMNqKIJVWxd2vboN2+BzbpVdlCSTH6I=" name="csrf-token" />
</head>



　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.