レイアウトを扱っていく章です。
画面を作っていきます。
- 1. 5.1.1 ナビゲーション
- 2. 5.1.2 BootstrapとカスタムCSS
- 2.1. 1.リスト 5.10を参考にして、5.1.1.1で使ったネコ画像をコメントアウトしてみてください。また、ブラウザのHTMLインスペクタ機能を使って、コメントアウトするとHTMLのソースからも消えていることを確認してみてください。
- 2.2. 2.リスト 5.11のコードをcustom.scssに追加し、すべての画像を非表示にしてみてください。うまくいけば、Railsのロゴ画像がHomeページから消えるはずです。先ほどと同様にインスペクタ機能を使って、今度はHTMLのソースコードは残ったままで、画像だけが表示されなくなっていることを確認してみてください。
- 2.3. 1.Railsがデフォルトで生成するheadタグの部分を、リスト 5.18のようにrenderに置き換えてみてください。ヒント: 単純に削除してしまうと後でパーシャルを1から書き直す必要が出てくるので、削除する前にどこかに退避しておきましょう。
- 2.4. 2.リスト 5.18のようなパーシャルはまだ作っていないので、現時点ではテストは redになっているはずです。実際にテストを実行して確認してみましょう。
- 2.5. 3.layoutsディレクトリにheadタグ用のパーシャルを作成し、先ほど退避しておいたコードを書き込み、最後にテストが green に戻ることを確認しましょう。
- 3. 5.2.1 アセットパイプライン
- 3.1. 1. 5.2.2で提案したように、footerのCSSを手作業で変換してみましょう。具体的には、リスト 5.17の内容を1つずつ変換していき、リスト 5.20のようにしてみてください。
- 3.2. 1.実は名前付きルートは、as:オプションを使って変更することができます。有名なFar Sideの漫画に倣って、Helpページの名前付きルートをhelfに変更してみてください (リスト 5.29)。
- 3.3. 2.先ほどの変更により、テストが redになっていることを確認してください。リスト 5.28を参考にルーティングを更新して、テストを greenにして見てください。
- 3.4. 3.エディタのUndo機能を使って、今回の演習で行った変更を元に戻して見てください。
- 4. 5.3.3 名前付きルート
- 5. 5.3.4 リンクのテスト
- 5.1. 1.footerパーシャルのabout_pathをcontact_pathに変更してみて、テストが正しくエラーを捕まえてくれるかどうか確認してみてください。
- 5.2. 2.リスト 5.35で示すように、Applicationヘルパーで使っているfull_titleヘルパーを、test環境でも使えるようにすると便利です。こうしておくと、リスト 5.36のようなコードを使って、正しいタイトルをテストすることができます。ただし、これは完璧なテストではありません。例えばベースタイトルに「Ruby on Rails Tutoial」といった誤字があったとしても、このテストでは発見することができないでしょう。この問題を解決するためには、full_titleヘルパーに対するテストを書く必要があります。そこで、Applicationヘルパーをテストするファイルを作成し、リスト 5.37のFILL_INの部分を適切なコードに置き換えてみてください。ヒント: リスト 5.37ではassert_equal <期待される値>, <実際の値>といった形で使っていましたが、内部では==演算子で期待される値と実際の値を比較し、正しいかどうかのテストをしています。
- 6. 5.4.1 Usersコントローラ
- 7. 5.4.2 ユーザー登録用URL
5.1.1 ナビゲーション
1.Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。リスト 5.4のコマンドを使って、図 5.3のネコ画像をダウンロードしてきましょう。
解答
リスト5.4のコマンドを実行してあげましょう!
$ curl -OL cdn.learnenough.com/kitten.jpg % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 138k 100 138k 0 0 90506 0 0:00:01 0:00:01 --:--:-- 200k
2.mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください (参考: 5.2.1)。
解答
さっきダウンロードしたファイルはどこにあるのでしょうか?
答えはカレントディレクトリです。
$ ls -ls ./ | grep kitten.jpg 140 -rw-rw-r--. 1 vagrant vagrant 141338 6月 29 21:40 2018 kitten.jpg
これを移動します。
チュートリアルの中でrails.pngを保存した
app/assets/imagesの下でOKですね。
$ mv ./kitten.jpg app/assets/images/ $ ls -ls app/assets/images/ 合計 156 140 -rw-rw-r--. 1 vagrant vagrant 141338 6月 29 21:40 2018 kitten.jpg 16 -rw-rw-r--. 1 vagrant vagrant 13036 6月 29 21:27 2018 rails.png
3.image_tagを使って、kitten.jpg画像を表示してみてください (図 5.4)。
解答
home.html.erbの末尾に以下のようなコードを追加しました。
Enter passphrase for key '/home/vagrant/.ssh/id_rsa': 1 <div class="center jumbotron"> Counting objects: 29, done. <div class="center jumbotron"> <h1>Welcome to the Sample App</h1> <h2> This is the home page for the <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a> sample application. </h2> <%= link_to "Sign up now!",'#',class: "btn btn-lg btn-primary" %> </div> <%= link_to image_tag("rails.png",alt: "Rails logo"), 'http://rubyonrails.org/' %> <!-- enshu 5.1.1.3 --> <%= link_to image_tag("kitten.jpg",alt: "kitten"), '#' %>
altってのは画像にテキスト情報を与えるものですね。
適当にkittenとしました。
リンク先はどこにも遷移する必要ないので#としています。
aタグ内で指定するリンク先の#はページの最上部を意味します。
5.1.2 BootstrapとカスタムCSS
1.リスト 5.10を参考にして、5.1.1.1で使ったネコ画像をコメントアウトしてみてください。また、ブラウザのHTMLインスペクタ機能を使って、コメントアウトするとHTMLのソースからも消えていることを確認してみてください。
解答
ねこちゃん出してみました。
これを消すためにリスト5.10に倣って消し去りたいと思います。
該当部分だけですが。
<!-- enshu 5.1.2.1 --> <%#= link_to image_tag("kitten.jpg",alt: "kitten"), '#' %>
Rubyのコメントが#なのでイメージは近いですね。
option+command+Iを実行して
実際にHTMLのソースから消えていることを確かめます。
ねこちゃんが消えてますねー
2.リスト 5.11のコードをcustom.scssに追加し、すべての画像を非表示にしてみてください。うまくいけば、Railsのロゴ画像がHomeページから消えるはずです。先ほどと同様にインスペクタ機能を使って、今度はHTMLのソースコードは残ったままで、画像だけが表示されなくなっていることを確認してみてください。
解答
これも支持に素直に従えば良いですね。
app/assets/stylesheets/custom.scssの末尾に以下を追加します。
/* enshu 5.1.2.2 */ img { display: none; }
こんな感じでロゴも消えます。
インスペクタで見てみると
こちらはソースが残っています。
5.1.3 パーシャル (partial)
1.Railsがデフォルトで生成するheadタグの部分を、リスト 5.18のようにrenderに置き換えてみてください。ヒント: 単純に削除してしまうと後でパーシャルを1から書き直す必要が出てくるので、削除する前にどこかに退避しておきましょう。
解答
リスト5.18のファイルを作成すればOKです。
2.リスト 5.18のようなパーシャルはまだ作っていないので、現時点ではテストは redになっているはずです。実際にテストを実行して確認してみましょう。
解答
rails testを実行してください。実際にREDになればOKです。
3.layoutsディレクトリにheadタグ用のパーシャルを作成し、先ほど退避しておいたコードを書き込み、最後にテストが green に戻ることを確認しましょう。
解答
パーシャルを作るためにはファイル名の先頭をアンダースコア(_)にする必要がありましたね。
<%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
この状態でrails testを実行しましょう。結果がGREENであればOKです。
5.2.1 アセットパイプライン
1. 5.2.2で提案したように、footerのCSSを手作業で変換してみましょう。具体的には、リスト 5.17の内容を1つずつ変換していき、リスト 5.20のようにしてみてください。
解答
言われた通りにやれば良いので省略。
5.3.2 RailsのルートURL
1.実は名前付きルートは、as:オプションを使って変更することができます。有名なFar Sideの漫画に倣って、Helpページの名前付きルートをhelfに変更してみてください (リスト 5.29)。
解答
下記のようにas:を使用します。
Rails.application.routes.draw do root 'static_pages#home' get '/help', to: 'static_pages#help', as: 'helf' get '/about', to: 'static_pages#about' get '/contact', to: 'static_pages#contact' end
helfになったことを確認するためにrails routesコマンドを使用します。
$ rails routes Prefix Verb URI Pattern Controller#Action root GET / static_pages#home helf GET /help(.:format) static_pages#help about GET /about(.:format) static_pages#about contact GET /contact(.:format) static_pages#contact
2.先ほどの変更により、テストが redになっていることを確認してください。リスト 5.28を参考にルーティングを更新して、テストを greenにして見てください。
解答
rails testでREDなことを確認します。
$rails test (中略) Finished in 0.68381s 4 tests, 6 assertions, 0 failures, 1 errors, 0 skips
テストをGREENにするためにstatic_pages_controller_test.rbを以下のように修正します。
修正部を抜粋
test "should get help" do get helf_path assert_response :success assert_select "title","Help|#{@base_title}" end
これでテストが通るようになります。
$ rails test (中略) Finished in 0.51540s 4 tests, 8 assertions, 0 failures, 0 errors, 0 skips
3.エディタのUndo機能を使って、今回の演習で行った変更を元に戻して見てください。
解答
戻せば良いだけなので省略。
5.3.3 名前付きルート
1.リスト 5.29のようにhelfルーティングを作成し、レイアウトのリンクを更新してみてください。
解答
helfルーティングの作成は省略
名前付きルートの名前がhelp_pathからhelf_pathに変わるので、
app/views/layouts/_header.html.erbを
<header class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <%= link_to "sample app",root_path,id: "logo" %> <nav> <ul class="nav navbar-nav navbar-right"> <li><%= link_to "Home", root_path %></li> <li><%= link_to "Help", helf_path %></li> <li><%= link_to "Log in",'#' %></li> </ul> </nav> </div> </header>
のようにしてあげればOK。
2.前回の演習と同様に、エディタのUndo機能を使ってこの演習で行った変更を元に戻してみてください。
解答
戻すだけなので省略。
5.3.4 リンクのテスト
1.footerパーシャルのabout_pathをcontact_pathに変更してみて、テストが正しくエラーを捕まえてくれるかどうか確認してみてください。
解答
というわけで変えてみます。
<footer class="footer"> <small> The <a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a> by <a href="http://www.michaelhartl.com/">Michael Hartl</a> </small> <nav> <ul> <li><%= link_to "About",contact_path %></li> <li><%= link_to "Contact",contact_path %></li> <li><a href="http://news.railstutorial.org/">News</a></li> </ul> </nav> </footer>
テストしてみます。
aboutねえぞってエラーかcontact多いぞってエラーが出てきそうですね。
$ rails test:integration (中略) Failure: SiteLayoutTest#test_layout_links [/home/vagrant/tutorial2/sample_app/test/integration/site_layout_test.rb:10]: Expected at least 1 element matching "a[href="/about"]", found 0.. Expected 0 to be >= 1. bin/rails test test/integration/site_layout_test.rb:5 Finished in 0.48454s 1 tests, 4 assertions, 1 failures, 0 errors, 0 skips
前者でしたね。
どういう結果になるか予想することも大事です。
2.リスト 5.35で示すように、Applicationヘルパーで使っているfull_titleヘルパーを、test環境でも使えるようにすると便利です。こうしておくと、リスト 5.36のようなコードを使って、正しいタイトルをテストすることができます。ただし、これは完璧なテストではありません。例えばベースタイトルに「Ruby on Rails Tutoial」といった誤字があったとしても、このテストでは発見することができないでしょう。この問題を解決するためには、full_titleヘルパーに対するテストを書く必要があります。そこで、Applicationヘルパーをテストするファイルを作成し、リスト 5.37のFILL_INの部分を適切なコードに置き換えてみてください。ヒント: リスト 5.37ではassert_equal <期待される値>, <実際の値>といった形で使っていましたが、内部では==演算子で期待される値と実際の値を比較し、正しいかどうかのテストをしています。
解答
問題文なげーw
リスト5.35,5.36についてはそれにしたがってファイルを作成してください。
full_titleってどういう関数だったかもう一度確認してみましょう。
module ApplicationHelper def full_title(page_title = '') base_title = "Ruby on Rails Tutorial Sample App" if page_title.empty? base_title else page_title + "|" + base_title end end end
引数がないときは「”Ruby on Rails Tutorial Sample App”」
引数があるときは「引数 | “Ruby on Rails Tutorial Sample App”」
を返します。
実際そうなっているか確かめるコードを実装すればいいですね。
こんな感じになるかと思います。
require 'test_helper' class ApplicationHelperTest < ActionView::TestCase test "full title helper" do assert_equal full_title, "Ruby on Rails Tutorial Sample App" assert_equal full_title("Help"), "Help|Ruby on Rails Tutorial Sample App" end end
5.4.1 Usersコントローラ
1.表 5.1を参考にしながらリスト 5.41を変更し、users_new_urlではなくsignup_pathを使えるようにしてみてください。
解答
as:が使えるじゃん。と思ったけど、今回は違いましたね。
以下のようにすればOK。
Rails.application.routes.draw do get '/signup', to:'users#new' root 'static_pages#home' get '/help', to: 'static_pages#help' get '/about', to: 'static_pages#about' get '/contact', to: 'static_pages#contact' end
2.先ほどの変更を加えたことにより、テストが redになったことを確認してください。なお、この演習はテスト駆動開発 (コラム 3.3) で説明した red/green のリズムを作ることを目的としています。このテストは次の5.4.2で greenになるよう修正します。
解答
テストします。
$rails test (中略) Error: UsersControllerTest#test_should_get_new: NameError: undefined local variable or method `users_new_url' for #<UsersControllerTest:0x007f85bb2839b0> test/controllers/users_controller_test.rb:5:in `block in <class:UsersControllerTest>' bin/rails test test/controllers/users_controller_test.rb:4 Finished in 3.37037s 7 tests, 16 assertions, 0 failures, 1 errors, 0 skips Finished in 3.384638s, 2.0682 runs/s, 4.7272 assertions/s. 7 runs, 16 assertions, 0 failures, 1 errors, 0 skips
まあusers_new_urlが使えなくなったので然るべき結果ですね。
5.4.2 ユーザー登録用URL
1.もしまだ5.4.1.1の演習に取り掛かっていなければ、まずはリスト 5.41のように変更し、名前付きルートsignup_pathを使えるようにしてください。また、リスト 5.43で名前付きルートが使えるようになったので、現時点でテストが greenになっていることを確認してください。
解答
rails testの結果がGREENになることを確認してください。
省略
2.先ほどのテストが正しく動いていることを確認するため、signupルートの部分をコメントアウトし、テスト redになることを確認してください。確認できたら、コメントアウトを解除して greenの状態に戻してください。
解答
コメントアウトしました。
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' #get '/signup', to: 'users#new' end
テストでREDになります。
$ rails test (中略) Error: SiteLayoutTest#test_layout_links: ActionView::Template::Error: undefined local variable or method `signup_path' for #<#<Class:0x007ffa0ad8e350>:0x007ffa10c665a8> app/views/static_pages/home.html.erb:10:in `_app_views_static_pages_home_html_erb__629894871883550347_70355950283160' test/integration/site_layout_test.rb:6:in `block in <class:SiteLayoutTest>' bin/rails test test/integration/site_layout_test.rb:5 Finished in 0.58474s 7 tests, 8 assertions, 0 failures, 3 errors, 0 skips Finished in 0.593856s, 11.7874 runs/s, 13.4713 assertions/s. 7 runs, 8 assertions, 0 failures, 3 errors, 0 skips
元に戻してGREENになることを確認するところは省略。
3.リスト 5.32の統合テストにsignupページにアクセスするコードを追加してください (getメソッドを使います)。コードを追加したら実際にテストを実行し、結果が正しいことを確認してください。ヒント: リスト 5.36で紹介したfull_titleヘルパーを使ってみてください。
解答
test/integration/site_layout_test.rbに
以下の行を追加してください。
#enshu 5.4.2.3 get signup_path assert_select "title",full_title("Sign up")
テストの結果も確認してみてください。
同じことの繰り返しのようで若干退屈になってきますね。
端折った説明しちゃってるところもありますが、くじけずやっていきましょ!