読者です 読者をやめる 読者になる 読者になる

techium

このブログは何かに追われないと頑張れない人たちが週一更新をノルマに技術情報を発信するブログです。もし何か調査して欲しい内容がありましたら、@kobashinG or @muchiki0226 までいただけますと気が向いたら調査するかもしれません。

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

これで、

  1. ルートURL (Homeページ) にGETリクエストを送る
  2. 正しいページテンプレートが描画されているかどうか確かめる
  3. 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章の内容を思い出す。

Box 3.4. Unix processes

ということで以下を実行。

$ 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のルーティングでは自由にルールを定義することができ、また、その際に名前付きルートも使えるようになる
  • 統合テストは、ブラウザによるページ間の遷移を効率的にシミュレートする