学んだ内容あらすじ
- Bootstrap用いてスタイルを整える。カスタムスタイルを整える
- リンクを追加
- パーシャル（partial）
- アセットパイプライン
- Sass
- ユーザー登録
構造を追加
レイアウトにいくつかの構造とCSSを与えて、最小限のスタイルを追加。
カスタムCSSルールの他に、Bootstrapも使用する。
コードそのものにもスタイルを与え、散らかり始めたレイアウトのコードを、パーシャル（Partial）機能を使って整えていく。
Webアプリケーションを作成するときに、
ユーザーインターフェイスの概要をできるだけ早いうちに把握しておくことが有用。
ナビゲーション
-
文法
[if lt IE 9]
条件付きコメントと呼ばれる。
IEのバージョンが9未満の場合にのみHTML5 shimを読み込む。 -
Railsヘルパー
link_toの第1引数はリンクテキスト、第2引数はURL。
URLは名前付きルート（Named Routes）に置き換えられる。
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>
BootstrapとカスタムCSS
Bootstrapはクラスを指定するだけで簡単にスタイルが適用できる。
注目すべきは、レスポンシブデザインに対応できるという点。
どの端末でアプリケーションを閲覧しても、ある程度見栄えをよくすることができる。
SCSSというのはSassと呼ばれている。CSSを拡張した言語。スタイルの入れ子などCSSをより書きやすくしたもの。
パーシャル（partial）
ファイル名先頭にアンダースコア_を置いたものはパーシャルとして扱う。
パーシャルを使うことでレイアウトを見やすくしたり機能ごとのまとまりに分けることができて便利。
パーシャルはビューの中でrenderメソッドを使って読み込む。
renderで呼び出す際のファイル名にアンダースコアは含めない
アセットパイプライン
最近のRailsに追加された機能の中で最も特筆すべき機能の１つ。
CSS、JavaScript、画像などの静的コンテンツの生産性と管理を大幅に強化する。
三つの主要な機能がある
- アセットディレクトリ
- マニフェストファイル
- プリプロセッサエンジン
アセットディレクトリ
・app/assets: 現在のアプリケーション固有のアセット
・lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
・vendor/assets: サードパーティのアセット（デフォルトでは存在しない）
マニフェストファイル
それぞれのアセットファイルをどのように1つにまとめるのかをRailsに指示するファイルのこと。
アセットをまとめる処理はSprocketsというGemが行っている。
プリプロセッサエンジン
Railsではどのプリプロセッサを使うのか、ファイルの拡張子で判断する。
・scss
・coffee
・erb
app/assets/stylesheets/application.cssにある
*= require_tree .という記述でツリー内のすべてのファイルを
アプリケーションCSSにまとめるよう指定している。
Sass
SassはCSSに拡張的な機能の付いた言語。
Sassが提供する二つの重要な機能に、ネストと変数がある。
SassはSCSSというフォーマットに対応している。すなわち、.scssという拡張子はSCSSである。
CSSファイルはSCSSファイルとしても扱うことができるため、互換性のあるフォーマットになっている。
(RailsTutorialではBootstrapの恩恵を得る為に最初からSCSSを使っている)
Railsのアセットパイプラインは.scssという拡張子を持つファイルをSassを使って自動的に処理してくれる。
つまり、custom.scssファイルはSassプリプロセッサによって前処理され、その後ブラウザへの配信に備えてパッケージ化される。
レイアウトのリンク
<a href="/static_pages/about">About</a>
元々HTML記法の<a href="/static_pages/about">About</a>が使われていたが、これはRails流ではないので以下のようにlink_toメソッドで記述する。
<%= link_to "About", about_path %>
コードの意味がわかりやすくなり、about_pathの定義を変えればabout_pathが使われているすべてのURLを変更できるため、柔軟性が高まる。
RailsのルートURL
ルートURLにはroot_pathやroot_urlといったメソッドを通してURLを参照できる。
Railsチュートリアルでは基本的にroot_path書式を使う。
HTTPの標準としてリダイレクト時に完全なURLが要求される為、
リダイレクトの場合のみroot_url書式を使う。
リンクのテスト
ブラウザを立ち上げてルートURLにアクセスし、それぞれのリンクをクリックして確かめる。
-> 統合テストを使って作業を自動化する
$ rails generate integration_test site_layout
$ rails test:integration
$ rails t
確認したいこと
・ルートURL(Homeページ)にGETリクエストを送る。
・正しいページテンプレートが描画されているかどうか確かめる。
・Home,Help,About,Contactの各ページへのリンクが正しく動くか確かめる。
ユーザー登録
Usersコントローラ
StaticPagesコントローラを作成したので
今度は2番目のコントローラであるUsersコントローラを作成。
-> 新規ユーザー用のユーザー登録ページ（スタブ）を持つ、最も簡単なコントローラ
$ rails generate controller Users new
初期設定でnewアクションを追加しておく。
この時、スタブのユーザービューも作成されている。
とりあえずテストを走らせる。
1:getレスポンスをsignup_pathに変更
2:テストがREDになったのを確認。
ユーザー登録用URL
ここで、先ほど設定したsignup_pathが通るように、ルーティングに/signupを設定する。
get '/signup', to: 'users#new'
テストが通る
homeぺージにsignupへのリンクを名前付きルートで貼る。
最後に、signupページ用のカスタムスタブ（stub）のビューを追加する。