back
View（ビュー）を利用する (2/5)
■index.html.erbを表示する
では、生成されたindex.html.erbを使って表示をしてみることにしましょう。helos_controller.rbを以下のように修正してからローカルサーバーを起動してアクセスしてみてください。indexアクションの中身を空にしているだけですね。これで、画面に「Helo#index」といった表示が現れるはずです。これが、デフォルトで用意されるViewテンプレートの画面です。まぁ、ただのテキストを表示するだけの、何の変哲もない画面ですね。
では、index.html.erbを開いて、どんなソースコードが書かれているか確かめてみましょう。すると、意外な結果となります。下のリスト欄にデフォルトのコードを掲載しておきました。ただ、<h1>タグと<p>タグが書かれているだけのシンプルな内容です。「これのどこが意外な結果だ？」と思った人。だって、<html>も<head>も<body>もないじゃないですか！
ここに記されているのは、実は<body>タグ内に表示されるコンテンツの部分だけなのです。<html>だのヘッダーの記述だのはいりません。なぜなら、Railsでは、Viewテンプレートを読み込むと、あらかじめ用意しておいたWebページのレイアウト・テンプレートをロードし、その<body>タグ内にViewテンプレートを組み込んでレンダリングするようになっているからです。つまり「ページ全体のテンプレート（レイアウト・テンプレート）」と「アクションで表示されるコンテンツのテンプレート」の２つを組み合わせているのですね。
デフォルトで用意されるレイアウト・テンプレートは、「views」内の「layouts」フォルダの中に用意されています。「application.html.erb」というファイルがそれです。
このレイアウト・テンプレートに書かれているソースコードを見てみましょう（下のリスト欄を参照）。ここには、あらかじめHTMLの基本ソースコードが書かれており、その中の随所にrubyの変数を出力するコードが書かれています。これにより、テンプレートに必要な値が組み込まれレンダリングされるようになっているのですね。
ヘッダー部分には、stylesheet_link_tag、javascript_include_tag、csrf_meta_tagsといったものを出力するタグがありますが、これらはスタイルシートやスクリプトのタグ、および各種の<meta>タグを出力するためのものと考えてください。
<body>タグ部分を見ると、その中で、<%= yield %>という１文だけが用意されていることがわかります。この変数yieldの中に、Viewテンプレートで読み込んだコンテンツの内容が設定されているわけですね。これがここの部分に書き出され、レンダリングされていた、というわけです。仕組みがわかってしまえば、それほど難しいものではありませんね。
では、index.html.erbを開いて、どんなソースコードが書かれているか確かめてみましょう。すると、意外な結果となります。下のリスト欄にデフォルトのコードを掲載しておきました。ただ、<h1>タグと<p>タグが書かれているだけのシンプルな内容です。「これのどこが意外な結果だ？」と思った人。だって、<html>も<head>も<body>もないじゃないですか！
ここに記されているのは、実は<body>タグ内に表示されるコンテンツの部分だけなのです。<html>だのヘッダーの記述だのはいりません。なぜなら、Railsでは、Viewテンプレートを読み込むと、あらかじめ用意しておいたWebページのレイアウト・テンプレートをロードし、その<body>タグ内にViewテンプレートを組み込んでレンダリングするようになっているからです。つまり「ページ全体のテンプレート（レイアウト・テンプレート）」と「アクションで表示されるコンテンツのテンプレート」の２つを組み合わせているのですね。
デフォルトで用意されるレイアウト・テンプレートは、「views」内の「layouts」フォルダの中に用意されています。「application.html.erb」というファイルがそれです。
このレイアウト・テンプレートに書かれているソースコードを見てみましょう（下のリスト欄を参照）。ここには、あらかじめHTMLの基本ソースコードが書かれており、その中の随所にrubyの変数を出力するコードが書かれています。これにより、テンプレートに必要な値が組み込まれレンダリングされるようになっているのですね。
ヘッダー部分には、stylesheet_link_tag、javascript_include_tag、csrf_meta_tagsといったものを出力するタグがありますが、これらはスタイルシートやスクリプトのタグ、および各種の<meta>タグを出力するためのものと考えてください。
<body>タグ部分を見ると、その中で、<%= yield %>という１文だけが用意されていることがわかります。この変数yieldの中に、Viewテンプレートで読み込んだコンテンツの内容が設定されているわけですね。これがここの部分に書き出され、レンダリングされていた、というわけです。仕組みがわかってしまえば、それほど難しいものではありませんね。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
※helo_controller.rbのコード # coding: utf-8 class HelosController < ApplicationController def index end end ※index.html.erbのコード <h1>Helo#index</h1> <p>Find me in app/views/helos/index.html.erb</p> ※application.html.erbのコード <!DOCTYPE html> <html> <head> <title>Tuyano01</title> <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>
| << 前へ | 次へ >> |