更新日: 2014年6月24日
Rails

Rails の Asset Pipeline 有効ではまった箇所

昨日作成した Rails4.1 の staging 環境で、とりあえず webrick を起動して Asset Pipeline を試そうとしたらいくつかはまったので備忘録です。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

— 環境 —
rails 4.1
bootstrap-sass (3.0.2.0)
sass (3.2.19)
sass-rails (4.0.1)

config.serve_static_assets の設定

まず webrick 起動の場合、config.serve_static_assets を true にする必要があります。

config/environments/***.rb

config.serve_static_assets = true
config.assets.compile = false
config.assets.digest = true

config.serve_static_assets = true

config.assets.compile = false

config.assets.digest = true

Apache や Nginx で動かす場合は、config.serve_static_assets は false で良い。

app/assets/stylesheets/***.css.scss の画像 url 指定

以下のように scss ファイルで CSS を書いていたのですが、これも動きません。

background-image: url("logo.png");

1	background-image: url("logo.png");

前述の config/environments/***.rb で assets のダイジェストが有効（config.assets.digest = true）になっている場合、assets（png, js, css ファイルなど）のURLにダイジェスト値が付加されます。実際のURLは、logo-*******.png とダイジェスト値が付加されるので、当然 logo.png というURLではアクセスできません。

対策としては、css.scss ファイル内では、image-url というメソッドを使ってURLを指定します。

background-image: image-url("logo.png");

1	background-image: image-url("logo.png");

こうすると、ダイジェスト値を付加したURLを指定してくれて、正常に動作する。

パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。

パーフェクト Ruby on Rails

Ruby on Rails 4 アプリケーションプログラミング