レイアウトを活用しよう (7/7)
作成:2012-01-30 08:08
更新:2012-02-16 15:31
更新:2012-02-16 15:31
■レンダリングされたコードを確認する
独自のレイアウトを使ってページを表示できたら、最後に「どのようなページになったか」を確認しておくことにしましょう。表示されたページのソースコードを調べてみてください。ちょっと面白いことがわかります。
下のリスト欄に掲載したのは、<head>タグの内容です。ここでは、予想とは少し違う内容が出力されていますね。まず<meta>タグ関連を見てください。
また、スタイルシートとJavaScriptのタグも見てみましょう。こうなっています。
――さあ、これでレイアウト作成の基本はひと通り頭に入りました。あとは、実際にそれぞれでレイアウトを作ってみてください。一度作れば、基本的な使い方はすぐに理解できるようになりますよ！
下のリスト欄に掲載したのは、<head>タグの内容です。ここでは、予想とは少し違う内容が出力されていますね。まず<meta>タグ関連を見てください。
<meta http-equiv="Content-Type"こんな３つのタグが書かれています。最初の１行目はレイアウトファイルに記述されたものですが、後の２つは<%= csrf_meta_tags %>によって出力されたものです。これらは、Railsが必要とする情報を<meta>タグで書き出しているのです。
content="text/html; charset=utf-8">
<meta content="authenticity_token"
name="csrf-param" />
<meta content="Y8k0H…略…CSTH6I="
name="csrf-token" />
また、スタイルシートとJavaScriptのタグも見てみましょう。こうなっています。
<link href="/assets/helos.css?body=1"確か、作成したのは「helos.css.scss」と「helos.js.coffee」というファイルでしたね。それなのに、生成されるタグに書かれたファイル名は「helos.css」「helos.js」となっています。SCSSとCoffeeScriptは、それぞれRailsによって通常のCSSとJavaScriptに自動変換され、それらがリンクされるようになっていたのです。実に面白いですね。
media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/helos.js?body=1"
type="text/javascript"></script>
――さあ、これでレイアウト作成の基本はひと通り頭に入りました。あとは、実際にそれぞれでレイアウトを作ってみてください。一度作れば、基本的な使い方はすぐに理解できるようになりますよ！
(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>
※関連コンテンツ