【sprockets】画像のパス設定から学んだアセットパイプライン(の片鱗)

once upon a time……

スクールの最終課題で作成中のアプリケーションにて。

ユーザ登録の際、マイページにて表示されるアイコン画像を設定できる仕様を組んでいるのですが、

イコン画像が設定されていないときの表示が殺風景であったため、デフォルトのアイコン画像を置いてみることにしました。

paperclipのhas_attached_fileメソッドに従い、下記のようなコードを記述。

models/user.rb

has_attached_file :icon,
  styles: { medium: "300x300#", thumb: "100x100#" },
  default_url: '/assets/image/kakikunsq.png'
validates_attachment_content_type :icon,content_type: ["image/jpg","image/jpeg","image/png"]

→usersテーブルのiconカラムについての設定で、デフォルト画像は default_url: にパスを設定すればよいとのこと。

デフォルトのアイコン画像は、/app/assets/images以下に配置していたので、その通りに記述。

……表示されない。

Chromeデベロッパツールで要素を調べたところ、ちゃんとimg要素の中のsrc属性には上記のパスが入っているようなのに……。

解決策

今回アセットファイルの管理として導入していたsprockets-railsというGemの影響だったようです。

こちらを導入すると、 '/assets/ファイル名.png' のような指定の仕方でassets直下だけでなくassets以下のディレクトリも呼べるようになるそうです(この記事とかわかりやすかった、またこの質問もこういうことだったんじゃないかなあ)。

……しかし表示されず。

もちろんrails sもしなおしましたよ?ええ……

……私がやってなかったのは、プリコンパイルでした。

$ bundle exec rake assets:precompile

先にアセットファイルの管理ってさっくり書いてしまいましたが、sprocketsというGemではassetsディレクトリ以下の画像やCSS、JSのファイルといったようなものをそれぞれまとめたり、圧縮したりしたものをpublic/assetsに置き直す?ようなことをするみたいなんですよね。

だから、assetsディレクトリ以下に置くだけでなく、その諸々の処理をするプリコンパイルを発動させなければならない、っぽいです。

こういうことするsprocketsみたいなフレームワークをアセットパイプラインというそうで、Railsガイドが詳しく説明してくれてます、後はよろしく頼んだ……。

もうちょいわかりやすいのだと、この記事なんかも。

とはいえ、これやってないとがっつり反映されなくなるのはproduction環境の話みたいで、

今回development環境でしか見てなかったのになんで……みたいな気持ちは残る。

この記事とか見た感じ、キャッシュの残りは怪しかった?


さて、上記コマンドでプリコンパイルを実行し、再度確認すると無事にデフォルトアイコン画像(以下の画像右部分)が表示されました!

ゆるく描かれた牡蠣になりたくなかったら、おとなしくアイコン画像を設定してください。


とここまで初めて知ったような体で書いてきましたが、多分これ今回のアプリの背景画像を設定するという段階で一度調べてるんだろうなあ……。

怖いならよく見なよ 小さな虫だって自分の唄は覚えてんだからさぁ!

ナイフ / BUMP OF CHICKEN

怖いかどうかはともかく、なんかめっちゃ刺さったフレーズ。