railsチュートリアル挑戦記 第5章 レイアウトを作成する
railsチュートリアルをやりながらメモしたことをそのまま記述しています。
第5章レイアウトを作成する
railsアプリケーションにBootstrapフレームワークを組み込みカスタムスタイルを追加する
これまでに作成したページへのリンクをレイアウトに追加する
以下のことも学ぶ
パーシャル
railsのルーティング
Asset Pipeline
Sass
ユーザーをサイトにログインさせるための重要な一歩を踏み出す
統合テストを使って、最終的なレイアウトやリンクが正しいかどうかをチェックする
・5 1 構造を追加する
実装後のアプリケーションの外観をスケッチして使っていく
サイトロゴ、ナビゲーションヘッダー、サイトフッターを含む静的ページを開発する
トピックブランチを作成しておく
git checkout -b filling-in-layout
・5 1 1 ナビゲーション
レイアウトファイルを作成する
構造を追加したWebサイトのレイアウト
app/views/layouts/application.html.erb
----------------------------
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application',
'data-turbolinks-track': 'reload' %>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<%= yield %>
</div>
</body>
</html>
----------------------------<!--[if lt IE 9]>はIEのバージョンが9未満の場合のみHTML5 shimを読み込める
headerのclassは3つある
navbar
navbar-fixed-top
navbar-inverse
すべてのnavbarクラスにはBootstrapフレームワークによって特別な意味が与えられる
divタグは一般的な表示領域を表す
HTML5では元々divばかり使われていたが、
header要素
nav要素
section要素
が使われるようになった
これらもBootstrapで特別な意味を持つ
----------------------------
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
----------------------------ダミーURLは'#'が使われる
link_toの第3引数 CSS id logoはオプションハッシュで、サンプルアプリのリンクでCSS id logoを使用している
navタグは「その内側がナビゲーションリンクである」という意図を明示的に伝える役割がある
ulのclassは3つある
nav
navbar-nav
navbar-right
これらもBootstrapにおいて特別な意味を持つ
上記nav部分のソースコードは以下に置き換わる
----------------------------
<nav>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Log in</a></li>
</ul>
</nav>
----------------------------
メインコンテンツのdiv
----------------------------
<div class="container">
<%= yield %>
</div>
----------------------------
containerクラスもBootstrapにおいて特別な意味を持つ
<%= yield %>は、Webサイトのレイアウトにページごとの内容を挿入する
フッター以外のレイアウトは完成
サインアップページへのリンクがあるHomeページ
app/views/static_pages/home.html.erb
----------------------------
<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/' %>
----------------------------
<%= link_to "Sign up now!", '#', class: "btn btn-lg btn-primary" %>
は
<a href="#" class="btn btn-lg btn-primary">Sign up now!</a>
に置き換えられる
jumbotron
btn
btn-lg
btn-primary
すべてBootstrapにおいて特別な意味を持つ
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>
image_tagヘルパーは、画像ファイルを指定し、alt属性をつけられる
https://railstutorial.jp/rails.pngから画像をダウンロードし、
app/assets/images/ディレクトリに置く
いちいち手作業でやってしまったけど、以下のコマンドでも同様のことができたらしい
curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png
ここまで作業し、railsチュートリアルと同様の結果になった！嬉しい！
image_tagで生成されるsrcはrailsが下記のように勝手に文字列を色々と追加してくれる
<img alt="Rails logo" src="/assets/rails-9308b8f92fea4c19a3a0d8385b494526.png" />
理由は、キャッシュを使って画像を表示させないためである。
キャッシュにあると判定されてしまうと画像が更新されない。
また、imagesというディレクトリ名も含まれていない
理由は、高速化のため。
ネコ画像をインターネットからダウンロードする
curl -OL cdn.learnenough.com/kitten.jpg
mv kitten.jpg app/assets/images/kitten.jpg
・5 1 2 BootstrapとカスタムCSS
Bootstrapを使うと、洗練されたWebデザインとユーザーインターフェイス要素を簡単にHTML5アプリケーションに追加することができる
Gemfileにbootstrap-sassを追加する。追加箇所はproductionの下
gem 'bootstrap-sass', '3.3.7'
そして
bundle install
なぜbundle install？
Gemfileにはproduction,debvelopment,testがあるが、
--without productionを指定すると、productionに定義したものが読み込まれない
そして、一度指定すると、今度bundle installを実行するときに--withoutオプションを追加する必要がなくなる
bundle install --without production development testとすると、
各環境に依存したものが全て読み込まれないことになる
(今回は実行しないが、bundle updateは一度インストールしたもののバージョンを上げる効果を持つ)
カスタムcssを作成する
touch app/assets/stylesheets/custom.scss
ディレクトリ名、ファイル名はどちらも重要
Bootstrap CSSを追加する
app/assets/stylesheets/custom.scss
----------------------------
@import "bootstrap-sprockets";
@import "bootstrap";
----------------------------
サーバーを再起動させて表示してみる
すべてのページに適用される共通のスタイルをCSSに追加する
app/assets/stylesheets/custom.scss
----------------------------
@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */
/* ページ上部に60ピクセルの余白を追加する */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
/* centerクラスに属している要素がすべて中央揃えになる */
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
----------------------------
それぞれをコメントアウトしてどうなるかを調査
.centerしか動作わからんかった・・・
洗練されたタイポグラフィーを利用するためのCSSを追加する
app/assets/stylesheets/custom.scss
----------------------------
@import "bootstrap-sprockets";
@import "bootstrap";
：
/* 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: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
----------------------------
サイトロゴにCSSを追加する
app/assets/stylesheets/custom.scss
----------------------------
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
----------------------------
<%= image_tag("kitten.jpg", alt: "Kitten") %>
を
<%#= image_tag("kitten.jpg", alt: "Kitten") %>
にするとコメントアウトできる
scssを下記にすると非表示にできる
img {
display: none;
}
・5 1 3 パーシャル (partial)
パーシャルを使うとスッキリするらしい
パーシャルは、ファイル分けしてスッキリさせよう！って感じのやつかな？
レイアウトにshimとheaderのパーシャルを追加する
app/views/layouts/application.html.erb
----------------------------
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application',
'data-turbolinks-track': 'reload' %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
----------------------------
<%= render 'layouts/shim' %>の行の説明
app/views/layouts/_shim.html.erbというファイルを探してその内容を評価し、結果をビューに挿入している
アンダースコアはパーシャルの証
HTML shim用のパーシャル
app/views/layouts/_shim.html.erb
----------------------------
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
----------------------------
パーシャルは自動的に生成しないほうがいいっぽい
header用のパーシャル
app/views/layouts/_header.html.erb
----------------------------
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", '#', id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
----------------------------
フッター用のパーシャルも作る
footer用のパーシャル
app/views/layouts/_footer.html.erb
ログ
----------------------------
<footer class="footer">
<small>
The <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
</small>
<nav>
<ul>
<li><%= link_to "About", '#' %></li>
<li><%= link_to "Contact", '#' %></li>
<li><a href="http://news.railstutorial.org/">News</a></li>
</ul>
</nav>
</footer>
----------------------------
レイアウトにfooterパーシャルを追加する
app/views/layouts/application.html.erb
----------------------------
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application',
'data-turbolinks-track': 'reload' %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
----------------------------
サイトにfooter用CSSを追加する
app/assets/stylesheets/custom.scss
----------------------------
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #777;
}
footer a {
color: #555;
}
footer a:hover {
color: #222;
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 15px;
}
----------------------------
Railsがデフォルトで生成するheadタグの部分を、リスト 5.18のようにrenderに置き換えてみてください。ヒント: 単純に削除してしまうと後でパーシャルを１から書き直す必要が出てくるので、削除する前にどこかに退避しておきましょう。
リスト 5.18のようなパーシャルはまだ作っていないので、現時点ではテストは redになっているはずです。実際にテストを実行して確認してみましょう。
layoutsディレクトリにheadタグ用のパーシャルを作成し、先ほど退避しておいたコードを書き込み、最後にテストが green に戻ることを確認しましょう。
修正前
----------------------------
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application',
'data-turbolinks-track': 'reload' %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
----------------------------
修正後
----------------------------
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= render 'layouts/rails_default' %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
----------------------------
・5 2 Sassとアセットパイプライン
CSS,JavaScript,画像などの静的コンテンツの生産性と管理を大幅に強化する「アセットパイプライン」は、最近のrailsに追加された最も特筆すべき機能
Sass使ってみる
・5 2 1 アセットパイプライン
アセットディレクトリは静的ファイルを目的別に分類する標準的な3つのディレクトリが使われる
app/assets 固有
lib/assets チーム
vendor/assets 第三者
それぞれサブディレクトリがある
マニフェストファイルは、アセットをどのような1つのファイルにまとめるのかをrailsに指示することができる
実際にアセットをまとめる処理を行うのはSprocketsというgem
マニフェストファイルはCSSとjavascriptには適用されても画像ファイルには適用されない
アプリケーション固有のCSS用マニフェストファイル
app/assets/stylesheets/application.css
----------------------------
/*
* This is a manifest file that'll be compiled into application.css, which
* will include all the files listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets,
* vendor/assets/stylesheets, or vendor/assets/stylesheets of plugins, if any,
* can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear
* at the bottom of the compiled file so the styles you add here take
* precedence over styles defined in any styles defined in the other CSS/SCSS
* files in this directory. It is generally better to create a new file per
* style scope.
*
*= require_tree .
*= require_self
*/
----------------------------*= require_tree .
は、app/assets/stylesheets中のすべてのCSSがアプリケーションCSSに含まれるようにする
*= require_self
そのファイル自身もアプリケーションCSSに含まれるようにする
アセットパイプラインはデフォルトで十分のはずだが、もしなにかやるなら以下のマニュアルが参考になるかも
https://railsguides.jp/asset_pipeline.html
プリプロセッサエンジン
やたら専門用語を多用して小難しいこと書いてるけど、
拡張子を元に解析処理を選択しますよーって言ってる
.scssだったらscssを解析する処理を選択しますよー
.coffeeだったらcoffeeを解析する処理を選択しますよー
.erbだったらerbを解析する処理を選択しますよー
それだけ
ちなCoffeeScriptはJavaScriptに直してくれる言語
foobar.js.coffee
coffee→jsという順番で解析される
計2回解析処理が走る
foobar.js.erb.coffee
coffee→erb→jsという順番で解析される
え、coffeeってerbで解析できる処理になるの？
これの最大のメリットは、開発環境だったら開発しやすくなるし、本番環境だったら効率的なデータ配置になるから読み込みに時間かからなくなり、ユーザーにストレスを与えないことができるようになる
・5 2 2 素晴らしい構文を備えたスタイルシート
ScssがProgateの解説と被っているので流し読み
ネストや変数を使って初期のSCSSファイルを書き直した結果
app/assets/stylesheets/custom.scss
----------------------------
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables, etc. */
$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;
}
}
}
----------------------------
修正前
----------------------------
@import "bootstrap-sprockets";
@import "bootstrap";
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.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: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
}
#logo:hover {
color: #fff;
text-decoration: none;
}
/* footer */
footer {
margin-top: 45px;
padding-top: 5px;
border-top: 1px solid #eaeaea;
color: #777;
}
footer a {
color: #555;
}
footer a:hover {
color: #222;
}
footer small {
float: left;
}
footer ul {
float: right;
list-style: none;
}
footer ul li {
float: left;
margin-left: 15px;
}
----------------------------
今回はそのままコピペした
いつか手直しで修正する練習をする
・5 3 レイアウトのリンク
rails流でないやり方
<a href="/static_pages/about">About</a>
rails流
<%= link_to "About", about_path %>
ページ名 URL 名前付きルート
Home / root_path
About /about about_path
Help /help help_path
Contact /contact contact_path
Sign up /signup signup_path
Log in /login login_path
・5 3 1 Contactページ
Contactは既に追加してる
・5 3 2 RailsのルートURL
root_pathとroot_urlの違い
root_path->'/'
root_url -> 'http://www.example.com/'
静的なページのルーティング一覧 red
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
----------------------------
StaticPagesで扱う新しい名前付きルートに対するテスト green
test/controllers/static_pages_controller_test.rb
----------------------------
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
----------------------------
・5 3 3 名前付きルート
各URLを作成したので、
<%= link_to "About", '#' %>
を次のように変更していく
<%= link_to "About", about_path %>
headerパーシャルにリンクを追加する
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", help_path %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
----------------------------
footerパーシャルにリンクを追加する
app/views/layouts/_footer.html.erb
----------------------------
<footer class="footer">
<small>
The <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
</small>
<nav>
<ul>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
<li><a href="http://news.railstutorial.org/">News</a></li>
</ul>
</nav>
</footer>
----------------------------
・5 3 4 リンクのテスト
いくつかのリンクを埋めることができたため、これらのリンクが正しく動いているかどうかをチェックするテストを書く
それぞれのリンクをクリックして確かめることもできるが、毎回そのような作業を繰り返していくのは大きな負担
統合テスト(Integration Test)を使って一連の作業を自動化する
下記のコマンド
を実行
rails generate integration_test site_layout
ログ
----------------------------
ec2-user:~/environment/sample_app (filling-in-layout) $ rails generate integration_test site_layout
Running via Spring preloader in process 13371
invoke test_unit
create test/integration/site_layout_test.rb
ec2-user:~/environment/sample_app (filling-in-layout) $
----------------------------
レイアウトのリンクに対するテスト green
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
----------------------------
assert_select "a[href=?]", about_path
これは<a href="/about">...</a>というHTMLが生成されるかどうか確認する
assert_select "a[href=?]", root_path, count: 2
これは、rootのリンクが2つあることを表す
assert_selectのいくつかの使用例
Code マッチするHTML
assert_select "div" <div>foobar</div>
assert_select "div", "foobar" <div>foobar</div>
assert_select "div.nav" <div class="nav">foobar</div>
assert_select "div#profile" <div id="profile">foobar</div>
assert_select "div[name=yo]" <div name="yo">hey</div>
assert_select "a[href=?]", '/', count: 1 <a href="/">foo</a>
assert_select "a[href=?]", '/', text: "foo" <a href="/">foo</a>
統合テストを実行する
rails test:integration
ログ
----------------------------
ec2-user:~/environment/sample_app (filling-in-layout) $ rails test:integration
/home/ec2-user/environment/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/ec2-user/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Started with run options --seed 55544
1/1: [================================] 100% Time: 00:00:00, Time: 00:00:00
Finished in 0.41067s
1 tests, 5 assertions, 0 failures, 0 errors, 0 skips
ec2-user:~/environment/sample_app (filling-in-layout) $
----------------------------
minitestと同じで緑色になるんだ！
rails test
ログ
----------------------------
ec2-user:~/environment/sample_app (filling-in-layout) $ rails test
Running via Spring preloader in process 13461
/home/ec2-user/environment/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/ec2-user/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Started with run options --seed 26460
6/6: [================================] 100% Time: 00:00:00, Time: 00:00:00
Finished in 0.50288s
6 tests, 14 assertions, 0 failures, 0 errors, 0 skips
ec2-user:~/environment/sample_app (filling-in-layout) $
----------------------------
演習1
about_pathをcontact_pathしてtestしたときどうなるか
rails test:integration
ログ
----------------------------
ec2-user:~/environment/sample_app (filling-in-layout) $ rails test:integration
/home/ec2-user/environment/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/ec2-user/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Started with run options --seed 20615
FAIL["test_layout_links", SiteLayoutTest, 0.4107877330025076]
test_layout_links#SiteLayoutTest (0.41s)
Expected at least 1 element matching "a[href="/about"]", found 0..
Expected 0 to be >= 1.
test/integration/site_layout_test.rb:10:in `block in <class:SiteLayoutTest>'
1/1: [================================] 100% Time: 00:00:00, Time: 00:00:00
Finished in 0.41355s
1 tests, 4 assertions, 1 failures, 0 errors, 0 skips
ec2-user:~/environment/sample_app (filling-in-layout) $
----------------------------
rails test
ログ
----------------------------
ec2-user:~/environment/sample_app (filling-in-layout) $ rails test
Running via Spring preloader in process 13637
/home/ec2-user/environment/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/ec2-user/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Started with run options --seed 33045
FAIL["test_layout_links", SiteLayoutTest, 0.44403419999798643]
test_layout_links#SiteLayoutTest (0.44s)
Expected at least 1 element matching "a[href="/about"]", found 0..
Expected 0 to be >= 1.
test/integration/site_layout_test.rb:10:in `block in <class:SiteLayoutTest>'
6/6: [================================] 100% Time: 00:00:00, Time: 00:00:00
Finished in 0.47551s
6 tests, 13 assertions, 1 failures, 0 errors, 0 skips
ec2-user:~/environment/sample_app (filling-in-layout) $
----------------------------test環境でもApplicationヘルパーを使えるようにする
test/test_helper.rb
----------------------------
ENV['RAILS_ENV'] ||= 'test'
.
.
.
class ActiveSupport::TestCase
fixtures :all
include ApplicationHelper
.
.
.
end
----------------------------
test環境でfull_titleヘルパーを使う green
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
get contact_path
assert_select "title", full_title("Contact")
end
end
----------------------------
full_titleヘルパーの単体テスト
test/helpers/application_helper_test.rb
----------------------------
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
----------------------------
rails test:integration
ログ
----------------------------
ec2-user:~/environment/sample_app (filling-in-layout) $ rails test:integration
/home/ec2-user/environment/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/ec2-user/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Started with run options --seed 64339
1/1: [================================] 100% Time: 00:00:00, Time: 00:00:00
Finished in 0.39265s
1 tests, 6 assertions, 0 failures, 0 errors, 0 skips
ec2-user:~/environment/sample_app (filling-in-layout) $
----------------------------
rails test
ログ
----------------------------
ec2-user:~/environment/sample_app (filling-in-layout) $ rails test
Running via Spring preloader in process 14306
/home/ec2-user/environment/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/ec2-user/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Started with run options --seed 1557
FAIL["test_full_title_helper", ApplicationHelperTest, 0.41211654099970474]
test_full_title_helper#ApplicationHelperTest (0.41s)
--- expected
+++ actual
@@ -1 +1 @@
-"Ruby on Rails Tutoial Sample App"
+"Ruby on Rails Tutorial Sample App"
test/helpers/application_helper_test.rb:5:in `block in <class:ApplicationHelperTest>'
FAIL["test_should_get_contact", StaticPagesControllerTest, 0.41865376599889714]
test_should_get_contact#StaticPagesControllerTest (0.42s)
<Contact | Ruby on Rails Tutorial Sample App> expected but was
<Contact | Ruby on Rails Tutoial Sample App>..
Expected 0 to be >= 1.
test/controllers/static_pages_controller_test.rb:35:in `block in <class:StaticPagesControllerTest>'
FAIL["test_should_get_home", StaticPagesControllerTest, 0.42598838299818453]
test_should_get_home#StaticPagesControllerTest (0.43s)
<Ruby on Rails Tutorial Sample App> expected but was
<Ruby on Rails Tutoial Sample App>..
Expected 0 to be >= 1.
test/controllers/static_pages_controller_test.rb:17:in `block in <class:StaticPagesControllerTest>'
FAIL["test_should_get_about", StaticPagesControllerTest, 0.43308862000048975]
test_should_get_about#StaticPagesControllerTest (0.43s)
<About | Ruby on Rails Tutorial Sample App> expected but was
<About | Ruby on Rails Tutoial Sample App>..
Expected 0 to be >= 1.
test/controllers/static_pages_controller_test.rb:29:in `block in <class:StaticPagesControllerTest>'
FAIL["test_should_get_help", StaticPagesControllerTest, 0.44478848799917614]
test_should_get_help#StaticPagesControllerTest (0.45s)
<Help | Ruby on Rails Tutorial Sample App> expected but was
<Help | Ruby on Rails Tutoial Sample App>..
Expected 0 to be >= 1.
test/controllers/static_pages_controller_test.rb:23:in `block in <class:StaticPagesControllerTest>'
7/7: [================================] 100% Time: 00:00:00, Time: 00:00:00
Finished in 0.44763s
7 tests, 16 assertions, 5 failures, 0 errors, 0 skips
ec2-user:~/environment/sample_app (filling-in-layout) $
----------------------------
誤字を直して再度実行
rails test
ログ
----------------------------
ec2-user:~/environment/sample_app (filling-in-layout) $ rails test
Running via Spring preloader in process 14354
/home/ec2-user/environment/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/ec2-user/environment/sample_app/config/application.rb to limit the frameworks that will be loaded.
Started with run options --seed 5839
7/7: [================================] 100% Time: 00:00:00, Time: 00:00:00
Finished in 0.42406s
7 tests, 17 assertions, 0 failures, 0 errors, 0 skips
ec2-user:~/environment/sample_app (filling-in-layout) $
----------------------------
・5 4 ユーザー登録: 最初のステップ
・5 4 1 Usersコントローラ
Usersコントローラの生成 (newアクションを追加)
rails generate controller Users new
ログ
----------------------------
ec2-user:~/environment/sample_app (filling-in-layout) $ rails generate controller Users new
Running via Spring preloader in process 15861
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
ec2-user:~/environment/sample_app (filling-in-layout) $
----------------------------
app/controllers/users_controller.rb
app/views/users/new.html.erb
test/controllers/users_controller_test.rb
が、作られてるはず
そのあと、test/controllers/users_controller_test.rbでusers_new_urlでなくsignup_pathにする
rails testでエラーになることを確認
・5 4 2 ユーザー登録用URL
ユーザー登録ページのルート red
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'
get '/signup', to: 'users#new'
end
----------------------------
ボタンにユーザー登録ページへのリンクを追加する
app/views/static_pages/home.html.erb
----------------------------
<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!", signup_path, class: "btn btn-lg btn-primary" %>
</div>
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>
----------------------------
最初のユーザー登録ページ (スタブ)
app/views/users/new.html.erb
----------------------------
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>
<p>This will be a signup page for new users.</p>
----------------------------https://jun-killer-rails5.herokuapp.com/
・5 5 1 本章のまとめ
HTML5を使ってheaderやfooter、logoやbodyといったコンテンツのレイアウトを定義した
Railsのパーシャルは効率化のために使われ、別ファイルにマークアップを切り出すことができる
CSSは、CSSクラスとidを使ってレイアウトやデザインを調整する
Bootstrapフレームワークを使うと、いい感じのデザインを素早く実装できる
SassとAssetPipelineは、CSSの冗長な部分を圧縮し、本番環境に最適化した結果を出力する
Railsのルーティングでは自由にルールを定義することができ、また、その際に名前付きルートも使えるようになる
統合テストは、ブラウザによるページ間の遷移を効率的にシミュレートする
Bootstrapで特別な意味を持つワード
navbar
navbar-fixed-top
navbar-inverse
header
nav
section
navbar-nav
navbar-right
jumbotron
btn
btn-lg
btn-primary
専門用語
パーシャル
partial 部分的
モックアップ(ワイヤーフレーム)
模型みたいなもの
この記事が気に入ったらサポートをしてみませんか？