レイアウトを作成する

link_to

<%= link_to "Sign up naw!", "#", class: "btn btn-lg btn-primary" %>

btnクラス、 btn-lgクラス、 btn-primaryクラスは全てbootstrapにおいて特別な意味を持つ <%= link_to image_tag("rails.svg", alt: "Ralis logo", width: "200px"), "https://rubyonrails.org/" %>
引数として画像ファイルのパスと任意のオプションハッシュをとるimage_tag ヘルパーの能力が示される。 - シンボルを使ってalt属性やwidth属性などを設定できる

Bootstrap

Webデザインとユーザーインターフェース要素を簡単に導入できるCSSフレームワークをHTML5アプリケーションに追加できる
アプリケーションをレスポンシブデザインにできる
bootstrap-sass をGemfileに追加して使用できる

カスタムCSS

@import を使ってbootsatrapを読み込む
Webサーバーを再起動させると、アプリケーションに反映させることができる

CSSの形式

body {
  padding-top: 60px;
}

クラス、id、HTMLタグやそれらの組み合わせのいずれかを指定する
指定した後ろにスタイリングコマンドを記述する
ネストの内側にあるh1というルールは、.centerのルールに継承しているので、以下のように書き換えられる
```
.center {
text-align: center;
}
```

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

↓

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

- hover属性などはアンパーサンド&を使って実現する

logo:hover {

color: #fff; }

- 変数を使って書き換えられる

h2 { . color: #777; } footer { . color: #777; }

↓

$light-gray: #777; h2 { . color: $light-gray; } footer { . color: $light-gray; }


**パーシャル**
<%= render 'layouts/shim' %>
- renderと呼ばれるRailsヘルパー呼び出しだけで、HTMLのスタイルシート行を置換している
- ファイル名 _shim.html.erb の先頭にアンダースコアが入る

**アセットパイプライン**
- アセットディレクトリ、マニフェストファイル、プリプロセッサエンジンという、3つの主要な機能がある
- 本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成される
- 開発環境ではプログラマにとって読みやすいように整理され、本番環境ではAsset Pipelineを使ってファイルを最小化してくれ、異なった状況に対して最高の環境を提供してくれる

**アセットディレクトリ**
- 静的ファイルを目的別に分類する、標準的な3つのディレクトリが使われる
- cusom.scssはsample_app固有のアセットなので、app/assets/stylesheetsに配置されている
  - app/assets : 現在のアプリケーション固有のアセット
ls app/assets/
config image stylesheets
  - lib/assets : あなたの開発チームによって作成されたライブラリ用のアセット
  - vendor/assets : サードパーティのアセット(デフォルトでは存在しない)

**マニフェストファイル**
-  マニフェストファイルを使ってアセットをどのように1つのファイルにまとめるかをRailsに指示することができる
-  実際にアセットをまとめる処理を行うはSprocketsというgem
-  CSSとJavaScriptには適用されるが、画像ファイルは適用されない

*= require_tree .

- app/assets/stylesheetsディレクトリ(サブディレクトリを含む)中の全てのCSSファイルが、アプリケーションCSSに含まれるようにしている

*= require_self

- CSSの読み込みシーケンスの中、application.css自身もその対象に含めている

**プリプロセッサエンジン**
-  主な拡張子はScss用の.scss、CoffeeScript用の .coffee、埋め込みRuby(ERb)用の .erb の3つ

**レイアウトリンク**

<%= link_to "About", about_path %>

- 上記のようにすることでコードの意味がわかりやすくなり、about_pathの定義を変えればabout_pathが使われているすべてのURLを変更できるため、柔軟性が高まる

**RailsのルートURL**
- ブラウザからアクセスしやすくする
- root_path や root_url といったメソッドを通してURLを参照することができる

root_path -> '/' root_url -> 'https://www.example.com/'

- 生のURLではなく、名前付きルートを使ってURLを参照することができる

get 'static_pages/help'

↓

get '/help', to: 'static_pages#help'

<%= link_to "About", '#' %>

↓

<%= link_to "About", about_path %>

**Integration  Test (統合テスト)**
- アプリケーションの動作を端から端までシュミレートしてテストすることができる

assert_select "a[href=?]", root_path, count: 2


- aタグとhrefタグを使って特定のリンクが存在するか調べる
- リンクが2つ以上存在するときはcountを使って指定する

ookamiinc / rails_tutorial_app

Rails Tutorial 第5章 #57

WHY

WHAT

レイアウトを作成する

logo:hover {