Open saran12345678 opened 2 months ago
猫の画像をコメントアウトする
このコメントアウトではソースが表示されてしまうため注意 コメントとして残ってしまう。 ``` <%#= link_to image_tag("kitten.jpg", alt: "Cat image", width: "200")%> ``` 猫画像が表示されないことを確認 コメントアウトされたソースが表示されなくなっている。 ### [リスト 5.11](https://railstutorial.jp/chapters/filling_in_the_layout?version=7.0#code-css_hide_image)のコードをcustom.scssに追加し、すべての画像を非表示にしてみてください。うまくいけば、Railsのロゴ画像がHomeページから消えるはずです。先ほどと同様にインスペクタ機能を使って、今度はHTMLのソースコードは残ったままで、画像だけが表示されなくなっていることを確認してみてください。この演習による変更は、終わった後必ず元に戻してください(そうしないとこの後の画像が正しく表示されません)。 画像が表示されないことを確認 ロゴのソースが残っていることを確認<!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 runs, 0 assertions, 0 failures, 5 errors, 0 skips
_rails_default.html.erbを作成することでテストが成功するようになったことを確認。
5 runs, 0 assertions, 0 failures, 5 errors, 0 skips
@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;
}
}
}
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
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
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
<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
<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
<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
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
require "test_helper"
class UsersControllerTest < ActionDispatch::IntegrationTest
test "should get new" do
get signup_path
assert_response :success
end
end
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
8 runs, 19 assertions, 0 failures, 0 errors, 0 skips
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
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
Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。リスト 5.4のコマンドを使って、図 5.3のネコ画像をダウンロードしてきましょう11 。
コマンド
mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください(参考: 5.2.1)。
image_tagを使って、kitten.jpg画像を表示してみてください(図 5.4)。