railsチュートリアル 第五章
はじめに
railsチュートリアルで理解しにくいところや、詰まったところを書いていく記事になります。
なので、手順を示す記事とはなっていません。
link_to image_tag
link_toのリンクを画像にしたい場合は、link_to image_tagメソッドを使う。
image_tagヘルパーを使っているので、Railsは該当する画像ファイルを、アセットパイプラインを通してapp/assets/images/ディレクトリの中から探す。
alt属性も表示することができる。
例：
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>
Bootstrapを適応させる
bootstrapを使用するにはまず、Gemfileに記載する。
gem 'bootstrap-sass'
またいつもとおり、gemをインストールする。
$ bundle install
ちなみに、rails generateコマンドを実行することでコントローラーごとに分けられたCSSファイルが自動的に生成されるが、これらのファイルを正しい順序で読み込ませるのは至難の技なので、すべてのCSSを1つにまとめる方針を採る。
なのでまず、カスタムCSSファイルを作る。
カスタムCSSファイルの作成
$ touch app/assets/stylesheets/custom.scss
app/assets/stylesheets/ディレクトリに置かれたスタイルシートはapplication.cssの一部としてWebサイトのレイアウトに読み込まれる。
さらに、ファイル名のcustom.scssには.scssという拡張子も含まれている。
@import "bootstrap-sprockets";
@import "bootstrap";
上のように@importをすることで、bootstrapを読み込むことができる。
あとはビューファイルの方で、bootstrapデザインにすれば反映されるようになる。
パーシャル
パーシャルを定義すると散らかっているソースをスッキリさせることができる。
例：footer
<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>
ファイルの先頭にある「_」はパーシャルを使う上での命名ルールとなる。
このパーシャルファイルはrenderを使うことによって、呼び出すことができる。
<!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 %>
#footerを追加
<%= render 'layouts/footer' %>
</div>
</body>
</html>
名前付きルート
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
上のように、ルートを定義することにより、レイアウトの中で名前付きルートが使えるようになる。
例：
<%= link_to "About", '#' %>
↓
<%= link_to "About", about_path %>
リンクのテスト
ブラウザを立ち上げてルートURLにアクセスし、それぞれのリンクをクリックして確かめることが面倒なので、リンクのテストを作っておく。
下記のコマンドで、テストファイルを作る。
$ rails generate integration_test site_layout
統合テストを書いていく。
require 'test_helper'
class SiteLayoutTest < ActionDispatch::IntegrationTest
test "layout links" do
#ルートURL (Homeページ) にGETリクエストを送る.
get root_path
#正しいページテンプレートが描画されているかどうか確かめる.
assert_template 'static_pages/home'
#Home、Help、About、Contactの各ページへのリンクが正しく動くか確かめる.
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=?]", root_path, count: 2
上のソースの
count: 2
というのは、1つはロゴに、もう1つはナビゲーションバーにあるから。
このようにリンクの個数を調べることもできる。
統合テストは以下のコマンドで実行する。
$ rails test:integration
終わり
パーシャルと統合テスト、SassとAsset Pipelineは初めてだが、必須の知識になるだろうと思う。
次↓
https://qiita.com/jonnyjonnyj1397/items/10cce807bde3183b2608
Author And Source
この問題について(railsチュートリアル 第五章), 我々は、より多くの情報をここで見つけました https://qiita.com/jonnyjonnyj1397/items/c241f62eca6b8fd6e337著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .