saran12345678 / RubyonRailsTutorial

0 stars 1 forks source link

第5章 レイアウトを作成する #5

Open saran12345678 opened 2 months ago

saran12345678 commented 2 months ago

Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。リスト 5.4のコマンドを使って、図 5.3のネコ画像をダウンロードしてきましょう11

コマンド

curl -OL https://cdn.learnenough.com/kitten.jpg

mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください(参考: 5.2.1)。

mv kitten.jpg app/assets/images

image_tagを使って、kitten.jpg画像を表示してみてください(図 5.4)。

<%= link_to image_tag("kitten.jpg", alt: "Cat image", width: "200")%>
スクリーンショット 2024-08-28 10 07 54
saran12345678 commented 2 months ago

リスト 5.10を参考にして、5.1.1.1の演習で使ったネコ画像をコメントアウトしてみてください。また、ブラウザのHTMLインスペクタ機能を使って、コメントアウトするとHTMLのソースからも消えていることを確認してみてください。

猫の画像をコメントアウトする

 このコメントアウトではソースが表示されてしまうため注意 コメントとして残ってしまう。 ``` <%#= link_to image_tag("kitten.jpg", alt: "Cat image", width: "200")%> ``` 猫画像が表示されないことを確認 スクリーンショット 2024-08-28 10 49 30 コメントアウトされたソースが表示されなくなっている。 スクリーンショット 2024-08-28 11 06 29 ### [リスト 5.11](https://railstutorial.jp/chapters/filling_in_the_layout?version=7.0#code-css_hide_image)のコードをcustom.scssに追加し、すべての画像を非表示にしてみてください。うまくいけば、Railsのロゴ画像がHomeページから消えるはずです。先ほどと同様にインスペクタ機能を使って、今度はHTMLのソースコードは残ったままで、画像だけが表示されなくなっていることを確認してみてください。この演習による変更は、終わった後必ず元に戻してください(そうしないとこの後の画像が正しく表示されません)。 画像が表示されないことを確認 スクリーンショット 2024-08-28 11 03 40 ロゴのソースが残っていることを確認 スクリーンショット 2024-08-28 11 04 46
saran12345678 commented 2 months ago

Railsがデフォルトで生成するheadタグの部分を、リスト 5.17のようにrenderに置き換えてみてください。(ヒント: 単純に削除してしまうと後でパーシャルを1から書き直す必要が出てくるので、削除する前にどこかに退避しておきましょう。)

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <%= render 'layouts/rails_default' %>
  </head>
  <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %>
    </div>
  </body>
</html>

リスト 5.17のようなパーシャルはまだ作っていないので、現時点ではテストは red になっているはずです。実際にテストを実行して確認してみましょう。

テストに失敗することを確認。

5 runs, 0 assertions, 0 failures, 5 errors, 0 skips

layoutsディレクトリにheadタグ用のパーシャルを作成し、先ほど退避しておいたコードを書き込み、最後にテストが green に戻ることを確認しましょう。

_rails_default.html.erbを作成することでテストが成功するようになったことを確認。

5 runs, 0 assertions, 0 failures, 5 errors, 0 skips
saran12345678 commented 2 months ago

5.2.2で提案したように、footerのCSSを手作業で変換してみましょう。具体的には、リスト 5.16の内容を1つずつ変換していき、リスト 5.19のようにしてみてください。

@import "bootstrap-sprockets";
@import "bootstrap";

$gray-medium-light: #eaeaea;

/* universal */

body {
  padding-top: 60px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

/* typography */

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

h1 {
  font-size: 3em;
  letter-spacing: -2px;
  margin-bottom: 30px;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: $gray-light;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
}

/* header */

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: $white;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
  &:hover {
    color: $white;
    text-decoration: none;
  }
}

/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  a {
    color: $gray;
    &:hover {
      color: $gray-darker;
    }
  }
  small {
    float: left;
  }
  ul {
    float:right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
  }
}
saran12345678 commented 2 months ago

実は名前付きルーティングは、as:オプションを使って変更することができます。有名なFar Sideの漫画に倣って、Helpページの名前付きルーティングをhelfに変更してみてください(リスト 5.28)。

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

先ほどの変更により、テストが red になっていることを確認してください。リスト 5.27を参考にルーティングを更新して、テストを green にして見てください。

  1) Error:
StaticPagesControllerTest#test_should_get_help:
NameError: undefined local variable or method `help_path' for #<StaticPagesControllerTest:0x000071d8767abf50>
    test/controllers/static_pages_controller_test.rb:22:in `block in <class:StaticPagesControllerTest>'

5 runs, 8 assertions, 0 failures, 1 errors, 0 skips
5 runs, 10 assertions, 0 failures, 0 errors, 0 skips

エディタのUndo機能を使って、今回の演習で行った変更を元に戻してください。

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
saran12345678 commented 2 months ago

リスト 5.28のようにhelfルーティングを作成し、レイアウトのリンクを更新してみてください。

<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>
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

前回の演習と同様に、エディタのUndo機能を使ってこの演習で行った変更を元に戻してみてください。

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", loot_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   root_path %></li>
        <li><%= link_to "Help",   help_path %></li>
        <li><%= link_to "Log in", '#' %></li>
      </ul>
    </nav>
  </div>
</header>
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
saran12345678 commented 2 months ago

footerパーシャルのabout_pathをcontact_pathに変更してみて、テストが正しくエラーを捕まえてくれるかどうか確認してみてください。

<footer class="footer">
  <small>
    The <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
    by <a href="https://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="https://news.railstutorial.org/">News</a></li>
    </ul>
  </nav>
</footer>

テストに失敗することを確認

  1) Failure:
SiteLayoutTest#test_layout_links [/workspaces/sample_app/test/integration/site_layout_test.rb:9]:
Expected at least 1 element matching "a[href="/about"]", found 0..
Expected 0 to be >= 1.

6 runs, 14 assertions, 1 failures, 0 errors, 0 skips

リスト 5.34で示すように、Applicationヘルパーで使っているfull_titleヘルパーを、test環境でも使えるようにすると便利です。こうしておくと、リスト 5.35のようなコードを使って、正しいタイトルをテストすることができます。ただし、これは完璧なテストではありません。例えばベースタイトルに「Ruby on Rails Tutoial」といった誤字があったとしても、このテストでは発見することができないでしょう。この問題を解決するためには、full_titleヘルパーに対するテストを書く必要があります。そこで、Applicationヘルパーをテストするファイルを作成し、リスト 5.36の(コードを書き込む)の部分を適切なコードに置き換えてみてください。(ヒント: リスト 5.36ではassert_equal <期待される値>, <実際の値>といった形で使っていましたが、内部では==演算子で期待される値と実際の値を比較し、正しいかどうかのテストをしています。)

require "test_helper"

class ApplicationHelperTest < ActionView::TestCase

  def setup
    @base_title = "Ruby on Rails Tutorial Sample App"
  end

  test "full title helper" do
    assert_equal "#{@base_title}", full_title
    assert_equal "Help | #{@base_title}", full_title("Help")
  end
end
saran12345678 commented 2 months ago

表 5.1を参考にしながらリスト 5.40を変更し、users_new_urlではなくsignup_pathを使えるようにしてみてください。

require "test_helper"

class UsersControllerTest < ActionDispatch::IntegrationTest
  test "should get new" do
    get signup_path
    assert_response :success
  end
end

先ほどの変更を加えたことにより、テストが red になったことを確認してください。なお、この演習はテスト駆動開発(コラム 3.3)で説明した red / green のリズムを作ることを目的としています。このテストは次の5.4.2で green になるよう修正します。

  1) Error:
UsersControllerTest#test_should_get_new:
NameError: undefined local variable or method `signup_path' for #<UsersControllerTest:0x000075759e828320>
    test/controllers/users_controller_test.rb:5:in `block in <class:UsersControllerTest>'

8 runs, 18 assertions, 0 failures, 1 errors, 0 skips
saran12345678 commented 2 months ago

もしまだ5.4.1.1の演習に取り掛かっていなければ、まずはリスト 5.40のように変更し、名前付きルーティングsignup_pathを使えるようにしてください。また、リスト 5.42で名前付きルーティングが使えるようになったので、現時点でテストが green になっていることを確認してください。

8 runs, 19 assertions, 0 failures, 0 errors, 0 skips

先ほどのテストが正しく動いていることを確認するため、signupルートの部分をコメントアウトし、テスト red になることを確認してください。確認できたら、コメントアウトを解除して green の状態に戻してください。

Rails.application.routes.draw do
  get 'users/new'
  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
8 runs, 8 assertions, 0 failures, 4 errors, 0 skips

コメントアウトを解除し、再度テストを実行

8 runs, 19 assertions, 0 failures, 0 errors, 0 skips

リスト 5.31の統合テストにsignupページにアクセスするコードを追加してください(getメソッドを使います)。コードを追加したら実際にテストを実行し、結果が正しいことを確認してください。(ヒント: リスト 5.35で紹介したfull_titleヘルパーを使ってみてください。)

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
    get contact_path
    assert_select "title", full_title("Contact")
    get signup_path
    assert_select "title", full_title("Sign up")
  end
end