事象
オリジナルアプリを作成していて、ローカル環境での動作も問題ないのでherokuにデプロイ。
background-imageを使用して背景画像を設定しており、ローカル環境では表示されるのに
本番環境では表示されないという事象が発生。
background-image: url('assets/4558407_s.jpg');
表示されないのにはAsset Pipelineという仕組みが関係している。
app/assets以下に画像やjs、cssなどのファイルを格納しており、これらを「高速に」
「キャッシュに悪用されないように」本番環境に反映させるのがAsset Pipelineの役割。
格納してあるファイルには名前がついており、アップデートしてくとファイル名は以前と
変化はしていないが、中身は更新されているということになる。
それによりキャッシュによって更新済みのものでなく、更新前の同じファイル名のものが
読み込まれるという事態を防ぐ仕組みを「dijest」と言う。
具体的には、app/assets以下に配置されたファイルが、コードが更新されるごとに
ファイル名にユニークな拡張子がつけられる様になる。
さらに、デプロイされると、app/assets以下のファイルは全てpublic/assetsに
上記のdigest付きになって移動される。
シンプルにファイル名が変わっているためurl指定では読み込むことができない。
解決方法
background-image: image-url('4558407_s.jpg');
と言う記述に変更する。
railsが指定するimage-urlメソッドを使用することで、デプロイ時にapp/assetsから
public/assetsにファイルが移動する際自動的にファイルにdijestを付与してくれるように
なる。
しかし、なぜかimage-urlメソッドで読み込まない。
ファイル名をcssからscssに変更することで解決。
scssはcssを拡張して書きやすく、見やすくしたスタイルシートのこと。
scssでは使用できてcssでは使用できないメソッドもあると言うことを理解した。