ヘルパーメソッド
link_to
リンクを生成するためのヘルパーメソッド
<%= link_to "sample app", '#', id: "logo" %>
第１引数：リンクテキスト
第２引数：URL
第３引数：オプションハッシュ（必須ではない）
image_tag
画像を表示するためのimgタグを作成するヘルパーメソッド。
image_tag("rails.png", alt: "Rails logo")
第１引数：画像ファイル名
ファイルの置き場所は「app/assets/images」フォルダと「public」フォルダの２つが用意されている。
上記の様に指定すると、「app/assets/images」が参照される。
「public」フォルダを参照したい場合は、ファイル名の前に「/」を入れる。
第２引数：オプション
alt：画像がない場合に代わりに表示される文字列
size：'100×200' 幅と高さを指定
<%= link_to image_tag("rails.png", alt: "Rails logo"),
'http://rubyonrails.org/' %>
上記の様に組み合わせて使うことができ、画像リンクが作れる
第１引数：image_tag("rails.png", alt: "Rails logo") ⇨画像
第２引数：'http://rubyonrails.org/' ⇨URL
Bootstrap
Bootstrapとは
Twitter社が開発したCSSのフレームワークです。（HTML/CSS/JavaScriptから構成される）
よく使うスタイルなどがあらかじめ定義されている。
また、レスポンシブWebデザインに対応しているので、スマートフォンやタブレットなど個別に対応するスタイルを作らなくても柔軟に調整してくれる。
BootstrapではLESS CSS言語を使っているが、RailsのAsset PipelineはデフォルではSass言語をサポートしているので、bootstrap-sassは、LESSをSassへ変換し、Bootstrapファイルを現在のアプリケーションで全て利用できるようにする。
Sass
CSSを拡張した言語、元々のCSSに次の機能を追加
・ネスト
スタイルシート内に共通のパターンがある場合、要素をネストさせることができる
・変数
冗長なコードを削除し、より自由な表現を可能に
・ミックスイン
CSSルールのパッケージ化して、複数の箇所で再利用することができる （例：@include）
Bootstrap導入
source 'https://rubygems.org'
gem 'rails', '5.1.6'
gem 'bootstrap-sass', '3.3.7' ⇦追加
.
.
Bootstrapをインストール
$ bundle install
カスタムCSSを作成
$ touch app/assets/stylesheets/custom.scss
@import "bootstrap-sprockets";
@import "bootstrap";
パーシャル
一箇所にまとめた方が良いHTMLや重複しているHTMLをパーシャルという機能を使って１つにまとめることができる。
パーシャルのファイル名の先頭にはアンダースコアをつける。
またrenderメソッドで使用する。
アセットパイプライン
CSS/JavaScript/Imageなどを管理する機能
アセットディレクトリ
静的ファイルを目的別に分類
- app/assets：現在のアプリケーション固有のアセット
- lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
- vendor/assets: サードパーティのアセット
マニフェストファイル
１つのファイルにまとめる方法をRailsに指示
/*
* 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の読み込みシーケンスの中で、application.css自身もその対象に含めている。
プリプロセッサエンジン
指示に従ってブラウザに配信できるように結合
なぜアセットパイプライン？
開発する側としては複数のファイルに分割して効率的に開発できる
ただ、コンピューターに取っては１つにまとまっていた方が高速になるので、それをしてくれるのがアセットパイプライン
名前付きルート
このようなルートは
get 'static_pages/help'
このように変更する
get '/help', to: 'static_pages#help'
GETリクエストが/helpに送信されたときにStaticPagesコントローラーのhelpアクションを呼び出してくれるようになる。
また、ルートURLの時と同様に、help_pathやhelp_urlといった名前付きルートも使えるようになる。
asオプション
:asオプションを使うと、ルーティングの名前を指定できる。
get '/help', to: 'static_pages#help', as: :helf
helf_pathとして使用できる
リンクのテスト
require 'test_helper'
class SiteLayoutTest < ActionDispatch::IntegrationTest
test "layout links" do
get root_path ⇨ルートURL（Homeページ）にGETリクエストを送る
assert_template 'static_pages/home' ⇨正しいテンプレートが表示されている事を確認
assert_select "a[href=?]", root_path, count: 2 ⇨Homeページへのリンクが２つ存在する事を確認
assert_select "a[href=?]", help_path ⇨Helpページへのリンクが存在する事を確認
assert_select "a[href=?]", about_path ⇨Aboutページへのリンクが存在する事を確認
assert_select "a[href=?]", contact_path ⇨Contactページへのリンクが存在する事を確認
end
end
assert_selectにはいくつもの指定の方法があるが、今回はリンクのテストをする。
| コード | マッチする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> |