Railsアプリでsprite-factoryを使ってRetina対応したい気持ち

概要

タイトルの通りなんですが、Rails初心者が試行錯誤した結果あんまりキレイじゃない解決法になったのでメモ。

前提として…。

• ruby 2.2.0p0 (2014-12-25 revision 49005)
• rails v4.2.0
• sass v3.4.16
• sprite-factory v1.7.1

compassはなし。

対応

ちょっと頑張らないと、sprite-factoryはsassのmixinにならない感じ。(参考: https://github.com/jakesgordon/sprite-factory/issues/16)

個人的にmixinが好きじゃないというのもあり、今回はこちらを参考に、クラスとして書き出してextendして使うという前提にしてあります。

rakeファイルは以下。パス名とかは適宜変えてね。

assets.rake

require 'sprite_factory'
require 'fastimage'

namespace :assets do
  namespace :sprite do
    desc 'recreate sprite images and css for SP'
    task :sp do
      SpriteFactory.run!(
        'app/assets/images/sprite',
        :layout => 'packed',
        :style => 'scss',
        :cssurl => "image-url('sprite/$IMAGE')",
        :output_style => 'app/assets/stylesheets/[e-mail]',
        :output_image => 'app/assets/images/[e-mail]'
      ) do |images|
        images.map do |name, data|
          sprite_size = FastImage.size('app/assets/images/[e-mail]')
          <<EOF
.ico-#{name}-sp {
  background-image: image-url('[e-mail]');
  width: #{data[:cssw] / 2}px;
  height: #{data[:cssh] / 2}px;
  background-position: #{data[:cssx] / -2}px #{data[:cssy] / -2}px;
  background-repeat: no-repeat;
  background-size: #{sprite_size[0] / 2}px auto;
}
EOF
        end.join("\n")
      end
    end
  end
end

sprite-factoryはどうやら内部ではスプライト画像の全体のwidth / height持ってるんですが、取り出し方分からず…。

結局fastimageという画像のwidth / heightを取ってくれるgemを入れてそれを使って、background-sizeを入れてます。
これでbundle exec rake assets:sprite:spを実行するとこんな形のscssファイルができます。

_sprite.scss

.ico-hoge-sp {
  background-image: image-url('[e-mail]');
  width: 109px;
  height: 29px;
  background-position: 0px -103px;
  background-repeat: no-repeat;
  background-size: 322px auto;
}

compass使ってればfastimageいらなかったけど、まあできたのでよいかと。調べてもあんまり情報が出てこないんで、書いておきました。