Rails(v4)チュートリアル5章メモ

BootstrapとカスタムCSS

custom.css.scss

@import "bootstrap";

custom.css.scssにbootstrap-sassをimport使用としたら起きたエラーは
下記URLを参考に解決。(sprocketのバージョンの相性が問題みたい？)

パーシャル (partial)

• レイアウトのパーツはpartialで切り分けてrenerで表示
• 「layout/〇〇.html.erb」のような形でファイル名の先頭に「」(アンダースコア)入れる
• 使うときは「<%= render 'layouts/header' %>」のようにアンダースコアを外したファイル名で指定する

SassとAsset Pipeline

Asset Pipeline

• アセットディレクトリ
  • app/assets: 現在のアプリケーション固有のアセット
  • lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
  • vendor/assets: サードパーティのアセット
• マニフェストファイル
  • アセットディレクトリのファイルを1つのファイルにまとめる
  • 実際にまとめるのはSprockets gemが行う
  • マニフェストファイルはCSSとJavaScriptには適用されますが、画像ファイルには適用されません
  • 以下にもう少し詳細を記述
• プリプロセッサエンジン
  • マニフェストファイルを用いてアセットファイルを結合
  • どのプリプロセッサを使用するかを、ファイル名の拡張子を使用して判断します(最も一般的な拡張子は、Sass用の.scss、CoffeeScript用の.coffee、埋め込みRuby (ERb) 用の.erbです。)
  • プリプロセッサエンジンはつなげて実行する (chain) ことができます。
  • foobar.js.erb.coffee
    • 上の拡張子の場合は、CoffeeScriptとERbの両方で実行されます (コードは右から左へと実行されますので、この例ではCoffeeScriptが最初に実行されます)。

アプリ固有のCSS用マニフェストファイル

app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll automatically include all the stylesheets
 * available in this directory and any sub-directories. You're free to add
 * application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style
 * scope.
 *= require_self
 *= require_tree .
 */

上の行で重要な部分は実はCSSコメントの中にあります。以下の行は、適切なファイルをインクルードするためにSprocketsによって使用されます。

/*
 .
 .
 .
 *= require_self
 *= require_tree . 
 */

• *= require_tree .
  • app/assets/stylesheetsディレクトリ (サブディレクトリを含む) のすべてのCSSファイルをアプリケーションCSSにインクルードするようにします (このドットも必要です)。
    
• *= require_self
  • CSSの読み込みシーケンスの中で、application.css自身もインクルードすることを指定しています。

Railsのルート

get 'static_pages/help'

↓

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

# 以下のようにデータにアクセスできるようになる(link_toなどのヘルパーから)
# help_path -> '/help'
# help_url  -> 'http://localhost:3000/help'