Rails Tutorial 5 Filling in the layout 2
Rails Tutorial 5 Filling in the layout 2
SassとAsset Pipeline
SassとAsset Pipelineは、(開発効率のために切り分けられた) CSSの冗長な部分を圧縮し、本番環境に最適化した結果を出力できる。
ということで、SassとAsset Pipeline について学んでいく。
ここは特にハマりどころはなくチュートリアル通りに進められる。
Railsのルート
日本語版 では
次のようなルールは、
get 'static_pages/help'以下のように書き換えます。get 'help' => 'static_pages#help'
となっているが、英語版(Rails5対応) では
get '/help', to: 'static_pages#help'
に変わっている。Rails 5 になって変わったのか、単に記法を変えた(元からどっちでもよかった)のか、ちょっと調べてみないとわからない。
後者に合わせて config/routes.rb を以下のように書き換える。
Rails.application.routes.draw do root 'static_pages#home' get '/help', to: 'static_pages#help' get '/about', to: 'static_pages#about' get '/contact', to: 'static_pages#contact' end
テストは以下のように書き換える。
require 'test_helper' class StaticPagesControllerTest < ActionDispatch::IntegrationTest test "should get home" do get root_path assert_response :success assert_select "title", "Ruby on Rails Tutorial Sample App" end test "should get help" do get help_path assert_response :success assert_select "title", "Help | Ruby on Rails Tutorial Sample App" end test "should get about" do get about_path assert_response :success assert_select "title", "About | Ruby on Rails Tutorial Sample App" end test "should get contact" do get contact_path assert_response :success assert_select "title", "Contact | Ruby on Rails Tutorial Sample App" end end
これでテスト実行すると GREEN になりパスとなる。
統合テスト
レイアウト内のリンクが正しく動作しているかどうかの確認を、統合テストを使用して自動化する。
$ rails generate integration_test site_layout Running via Spring preloader in process 3785 invoke test_unit create test/integration/site_layout_test.rb
生成された test/integration/site_layout_test.rb を以下のように書き換える。
require 'test_helper' class SiteLayoutTest < ActionDispatch::IntegrationTest test "layout links" do get root_path assert_template 'static_pages/home' assert_select "a[href=?]", root_path, count: 2 assert_select "a[href=?]", help_path assert_select "a[href=?]", about_path assert_select "a[href=?]", contact_path end end
これで、
- ルートURL (Homeページ) にGETリクエストを送る
- 正しいページテンプレートが描画されているかどうか確かめる
- Home、Help、About、Contactの各ページへのリンクが正しく動くか確かめる
が確認できる。
以下で実行。
$ rails test:integration /home/ubuntu/workspace/sample_app/db/schema.rb doesn't exist yet. Run `rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /home/ubuntu/workspace/sample_app/config/application.rb to limit the frameworks that will be loaded. Started with run options --seed 5018 1/1: [=========================================] 100% Time: 00:00:01, Time: 00:00:01 Finished in 1.04619s 1 tests, 5 assertions, 0 failures, 0 errors, 0 skips
GREEN となり成功する。
既存のテストと合わせて以下で実行できる。
$ rails test Running via Spring preloader in process 68386 /home/ubuntu/workspace/sample_app/db/schema.rb doesn't exist yet. Run `rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /home/ubuntu/workspace/sample_app/config/application.rb to limit the frameworks that will be loaded. Started with run options --seed 45842 5/5: [=========================================] 100% Time: 00:00:01, Time: 00:00:01 Finished in 1.09983s 5 tests, 13 assertions, 0 failures, 0 errors, 0 skips
ユーザー登録: 最初のステップ
この節では、レイアウトとルーティングの取り組みにおける頂点として、ユーザー登録ページへのルーティングを作成します。
とのこと。
StaticPagesコントローラが出来上がったところで次はUsersコントローラを作成していく。
次の一歩であるユーザーのモデリングは第6章で行い、第7章でユーザー登録が完成します。
だそうな。まだまだ先は長いな。
以下を実行して自動的に"new"アクションを作成する。
$ rails generate controller Users new Running via Spring preloader in process 68446 create app/controllers/users_controller.rb route get 'users/new' invoke erb create app/views/users create app/views/users/new.html.erb invoke test_unit create test/controllers/users_controller_test.rb invoke helper create app/helpers/users_helper.rb invoke test_unit invoke assets invoke coffee create app/assets/javascripts/users.coffee invoke scss create app/assets/stylesheets/users.scss
上記コマンドにて、Userページ用の最小限のテストも自動で作られる。便利。
あとはユーザー登録ページのルートを作成し、名前付きルートを使ってリンクを追加、ユーザー登録ページのスタブを作成してひとまず完了。
まとめ
ここまでで Git へ登録する。
$ git add -A $ git commit -m "Finish layout and routes" $ git checkout master $ git merge filling-in-layout
push の前にテストを実行する。
$ rails test
Running via Spring preloader in process 69574
/home/ubuntu/workspace/sample_app/db/schema.rb doesn't exist yet. Run `rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /home/ubuntu/workspace/sample_app/config/application.rb to limit the frameworks that will be loaded.
Started with run options --seed 21696
ERROR["test_layout_links", SiteLayoutTest, 0.8665632810007082]
test_layout_links#SiteLayoutTest (0.87s)
ActionView::Template::Error: ActionView::Template::Error: File to import not found or unreadable: bootstrap-sprockets.
Load paths:
/home/ubuntu/workspace/sample_app/app/assets/config
/home/ubuntu/workspace/sample_app/app/assets/images
/home/ubuntu/workspace/sample_app/app/assets/javascripts
/home/ubuntu/workspace/sample_app/app/assets/stylesheets
/home/ubuntu/workspace/sample_app/vendor/assets/javascripts
/home/ubuntu/workspace/sample_app/vendor/assets/stylesheets
/usr/local/rvm/gems/ruby-2.3.0/gems/jquery-rails-4.1.1/vendor/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled
/usr/local/rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts
app/assets/stylesheets/custom.scss:1
app/views/static_pages/home.html.erb:13:in `_app_views_static_pages_home_html_erb__3247395857783361606_55574140'
test/integration/site_layout_test.rb:6:in `block in <class:SiteLayoutTest>'
ERROR["test_should_get_new", UsersControllerTest, 0.90543611299654]
test_should_get_new#UsersControllerTest (0.91s)
ActionView::Template::Error: ActionView::Template::Error: File to import not found or unreadable: bootstrap-sprockets.
Load paths:
/home/ubuntu/workspace/sample_app/app/assets/config
/home/ubuntu/workspace/sample_app/app/assets/images
/home/ubuntu/workspace/sample_app/app/assets/javascripts
/home/ubuntu/workspace/sample_app/app/assets/stylesheets
/home/ubuntu/workspace/sample_app/vendor/assets/javascripts
/home/ubuntu/workspace/sample_app/vendor/assets/stylesheets
/usr/local/rvm/gems/ruby-2.3.0/gems/jquery-rails-4.1.1/vendor/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled
/usr/local/rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts
app/assets/stylesheets/custom.scss:1
app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb__988963688868355967_73004060'
test/controllers/users_controller_test.rb:6:in `block in <class:UsersControllerTest>'
ERROR["test_should_get_contact", StaticPagesControllerTest, 0.9432026750000659]
test_should_get_contact#StaticPagesControllerTest (0.94s)
ActionView::Template::Error: ActionView::Template::Error: File to import not found or unreadable: bootstrap-sprockets.
Load paths:
/home/ubuntu/workspace/sample_app/app/assets/config
/home/ubuntu/workspace/sample_app/app/assets/images
/home/ubuntu/workspace/sample_app/app/assets/javascripts
/home/ubuntu/workspace/sample_app/app/assets/stylesheets
/home/ubuntu/workspace/sample_app/vendor/assets/javascripts
/home/ubuntu/workspace/sample_app/vendor/assets/stylesheets
/usr/local/rvm/gems/ruby-2.3.0/gems/jquery-rails-4.1.1/vendor/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled
/usr/local/rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts
app/assets/stylesheets/custom.scss:1
app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb__988963688868355967_57552260'
test/controllers/static_pages_controller_test.rb:24:in `block in <class:StaticPagesControllerTest>'
ERROR["test_should_get_about", StaticPagesControllerTest, 0.9839088719963911]
test_should_get_about#StaticPagesControllerTest (0.98s)
ActionView::Template::Error: ActionView::Template::Error: File to import not found or unreadable: bootstrap-sprockets.
Load paths:
/home/ubuntu/workspace/sample_app/app/assets/config
/home/ubuntu/workspace/sample_app/app/assets/images
/home/ubuntu/workspace/sample_app/app/assets/javascripts
/home/ubuntu/workspace/sample_app/app/assets/stylesheets
/home/ubuntu/workspace/sample_app/vendor/assets/javascripts
/home/ubuntu/workspace/sample_app/vendor/assets/stylesheets
/usr/local/rvm/gems/ruby-2.3.0/gems/jquery-rails-4.1.1/vendor/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled
/usr/local/rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts
app/assets/stylesheets/custom.scss:1
app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb__988963688868355967_55556980'
test/controllers/static_pages_controller_test.rb:18:in `block in <class:StaticPagesControllerTest>'
ERROR["test_should_get_help", StaticPagesControllerTest, 1.021580834996712]
test_should_get_help#StaticPagesControllerTest (1.02s)
ActionView::Template::Error: ActionView::Template::Error: File to import not found or unreadable: bootstrap-sprockets.
Load paths:
/home/ubuntu/workspace/sample_app/app/assets/config
/home/ubuntu/workspace/sample_app/app/assets/images
/home/ubuntu/workspace/sample_app/app/assets/javascripts
/home/ubuntu/workspace/sample_app/app/assets/stylesheets
/home/ubuntu/workspace/sample_app/vendor/assets/javascripts
/home/ubuntu/workspace/sample_app/vendor/assets/stylesheets
/usr/local/rvm/gems/ruby-2.3.0/gems/jquery-rails-4.1.1/vendor/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled
/usr/local/rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts
app/assets/stylesheets/custom.scss:1
app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb__988963688868355967_45474840'
test/controllers/static_pages_controller_test.rb:12:in `block in <class:StaticPagesControllerTest>'
ERROR["test_should_get_home", StaticPagesControllerTest, 1.0612569719960447]
test_should_get_home#StaticPagesControllerTest (1.06s)
ActionView::Template::Error: ActionView::Template::Error: File to import not found or unreadable: bootstrap-sprockets.
Load paths:
/home/ubuntu/workspace/sample_app/app/assets/config
/home/ubuntu/workspace/sample_app/app/assets/images
/home/ubuntu/workspace/sample_app/app/assets/javascripts
/home/ubuntu/workspace/sample_app/app/assets/stylesheets
/home/ubuntu/workspace/sample_app/vendor/assets/javascripts
/home/ubuntu/workspace/sample_app/vendor/assets/stylesheets
/usr/local/rvm/gems/ruby-2.3.0/gems/jquery-rails-4.1.1/vendor/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/coffee-rails-4.2.1/lib/assets/javascripts
/usr/local/rvm/gems/ruby-2.3.0/gems/actioncable-5.0.0.1/lib/assets/compiled
/usr/local/rvm/gems/ruby-2.3.0/gems/turbolinks-source-5.0.0/lib/assets/javascripts
app/assets/stylesheets/custom.scss:1
app/views/static_pages/home.html.erb:13:in `_app_views_static_pages_home_html_erb__3247395857783361606_41599980'
test/controllers/static_pages_controller_test.rb:6:in `block in <class:StaticPagesControllerTest>'
6/6: [=========================================] 100% Time: 00:00:01, Time: 00:00:01
Finished in 1.07159s
6 tests, 0 assertions, 0 failures, 6 errors, 0 skips
エラー。なんでやねん。
落ち着いて、3章の内容を思い出す。
ということで以下を実行。
$ spring stop
祈るように以下を実行。
$ rails test Running via Spring preloader in process 69653 /home/ubuntu/workspace/sample_app/db/schema.rb doesn't exist yet. Run `rails db:migrate` to create it, then try again. If you do not intend to use a database, you should instead alter /home/ubuntu/workspace/sample_app/config/application.rb to limit the frameworks that will be loaded. Started with run options --seed 32402 6/6: [=========================================] 100% Time: 00:00:01, Time: 00:00:01 Finished in 1.05377s 6 tests, 14 assertions, 0 failures, 0 errors, 0 skips
成功。
気をとりなおして Bitbucket にpush
$ git push
続いて Heroku にデプロイ。
$ git push heroku
めでたしめでたし。
- HTML5を使ってheaderやfooter、logoやbodyといったコンテンツのレイアウトを定義しました
- Railsのパーシャルは効率化のために使われ、別ファイルにマークアップを切り出すことができます
- CSSは、CSSクラスとidを使ってレイアウトやデザインを調整します
- Bootstrapフレームワークを使うと、いい感じのデザインを素早く実装できる
- SassとAsset Pipelineは、(開発効率のために切り分けられた) CSSの冗長な部分を圧縮し、本番環境に最適化した結果を出力する
- Railsのルーティングでは自由にルールを定義することができ、また、その際に名前付きルートも使えるようになる
- 統合テストは、ブラウザによるページ間の遷移を効率的にシミュレートする
