これから始める Ruby on Rails シリーズRuby on Rails：埋め込みRubyを使った簡単な動的ページを作る
はじめに
前回の記事で静的なページにRSpecとCapybaraを使ったインテグレーションテストを試しました。静的ページをもとに今回は少しだけ動的なページを作ってみます。詳しい内容はRuby on Rails チュートリアルの第3章を参考にしています。この記事では実行結果のみを掲載します。
今回は少し動的なページということで、レイアウトファイル（app/view/layout）を使って動的にタイトルを変更します。合わせて前回同様にテストを用意します。
コントローラーを作る（すでにあれば不要）
$ rails generate controllerコマンドを使い、StaticPagesという名前のコントローラーとhome,help, aboutという名前のViewを作ります。すでに作成済みであればこの操作は不要です。
$ rails generate controller StaticPages home help about
create app/controllers/static_pages_controller.rb
route get 'static_pages/about'
route get 'static_pages/help'
route get 'static_pages/home'
invoke erb
create app/views/static_pages
create app/views/static_pages/home.html.erb
create app/views/static_pages/help.html.erb
create app/views/static_pages/about.html.erb
invoke test_unit
create test/controllers/static_pages_controller_test.rb
invoke helper
create app/helpers/static_pages_helper.rb
invoke test_unit
create test/helpers/static_pages_helper_test.rb
invoke assets
invoke coffee
create app/assets/javascripts/static_pages.js.coffee
invoke scss
create app/assets/stylesheets/static_pages.css.scss
静的ページなので、scaffoldと違い、DBのマイグレーションは不要です。
レイアウトファイルを編集する
<head>タグなどを含んでいるレイアウトファイル（app/views/layouts）を編集します。
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
このままではどの静的ページにアクセスしてもタイトルとしかタイトルが表示されません。そこで、ホーム | サイト名となるようレイアウトファイルとViewファイルを変更します。
埋め込みRuby(Embedded Ruby)
ViewやLayoutには<% ... %>を使ってRubyを埋め込むことができます。
provide関数を使ってLayoutにデータを引き渡す
provide関数（<% provide(:title, 'Home') %>）を使ってViewからLayoutにデータを引き渡すことができます。実際に各Viewに設定しています。
$ vi app/view/static_pages/home.html.erb
<% provide(:title, 'ホーム') %>
<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>
Layoutでprovide関数で設定されたデータを呼び出す
Viewで設定したタイトル情報をLayout側で呼び出すにはyield関数（<%= yield(:title) %>）を使います。
$ vi app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title) %> | サイト名</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
これで、各ページ毎に違うタイトルが表示されるはずです。 $ rails sでhttp://127.0.0.1:3000/static_pages/homeを確認してみてください。
テスト
合わせてテストも用意します。前回のRuby on Rails：RSpecとCapybaraで初めてのインテグレーションテストを参考にしてください。
$ vi spec/requests/static_pages_spec.rb
下記のようにします。
require 'spec_helper'
RSpec.describe "StaticPages", :type => :request do
# ベースタイトルの指定
let(:base_title) { "サイト名" }
describe "Home page" do
it "should have the right title" do
visit '/static_pages/home'
expect(page).to have_title("ホーム | #{base_title}")
end
end
describe "Help page" do
it "should have the right title" do
visit '/static_pages/help'
expect(page).to have_title("ヘルプ | #{base_title}")
end
end
describe "About page" do
it "should have the right title" do
visit '/static_pages/about'
expect(page).to have_title("アバウト | #{base_title}")
end
end
end
let(:base_title) { "サイト名" }を使って、共通した内容を使い回せます。呼び出すには#{base_title}となります。
テストを実行
下記のようになればテスト成功です。
$ rspec spec/requests/static_pages_spec.rb
...
Finished in 0.52943 seconds (files took 1.27 seconds to load)
3 examples, 0 failures
以上、簡単な動的ページに関するメモでした。
シリーズ
- Ruby on Railsの最初の一歩
- Ruby on RailsアプリをHerokuにデプロイしてみる
- $ bundle exec を省略する
- Ruby on Railsで静的ページを作る
- Ruby on Rails：RSpecとCapybaraで初めてのインテグレーションテスト
- Ruby on Rails：埋め込みRubyを使った簡単な動的ページを作る
- Ruby on Rails：Guardを使ったテストの自動化