CSSスプライトを動的生成して快適ソシャゲ開発

Yokohama.js (#yjs20140817) CSS Sprite を動的生成して快適ソシャゲ開発

自己紹介宇野陽太( ) @cancer6 株式会社モバイルファクトリーというところでフロントエンドエンジニアやってます最近はBackbone /
Marionette / AngularJS あたりを触ったり CSS の設計したりなど

生成の流れ Image Assets Generator(Photoshop) フォルダに配置 Compass (grunt-watch)

Image Assets Generator(Photoshop) [ ファイル] → [ 生成] にチェックを入れておくレイヤー
にファイル名をつけておくレイヤーが更新されると指定した名前で自動的に書き出し ※ Photoshop CC 以降

フォルダに配置職人が丹精込めて一つ一つ移動

Compass (grunt-watch) CSS の生成と一緒にSprite ファイルも生成してくれる便利！

CSS Sprite Helpers for Compass http://compass- style.org/reference/compass/helpers/sprites/

CSS Sprite Helpers( 略) のいいところ導入が楽 Compass が用意しているfunction を使えばすぐ
Sass(SCSS) ファイルに書いていくだけ

CSS Sprite Helpers( 略) のよくないところ謎いマッピング情報はRuby 側で管理 function
で取得するのでキャッシュしておかないといけない

CSS Sprite Helpers( 略) のよくないところ遅い CSS の生成が遅くなる( 画像の変更が無くても+
数秒) Sass(SCSS) に変更があるたびに画像の差分をチェック (Sprite の生成が遅いわけではないです、たぶん)

CSS Sprite Helpers( 略) のよくないところ画像生成後にgrunt-watch が走らない画像の最適化とかしてると地味につらい

grunt-spritesmith https://github.com/Ensighten/grunt-spritesmith

grunt-spritesmith のいいところ Compass... というかSass に非依存 LESS でもStylus でも使える CSS
の生成とCSS Sprite の生成を分離できる Compass はCSS の生成に集中 CSS の生成が早くなる

grunt-spritesmith のいいところ Compass みたいにブラックボックスじゃないマッピング情報はSass(SCSS) の変数化される変数にアクセスするfunction も一緒に書きだされる

grunt-spritesmith のよくないところフォルダが分けられない一つのフォルダを監視して一つのSprite を生成する Compass のI/F と差異があるので、途中からの移行がつらい
規模が大きくなってくると全部差し替えとかやってられない

もう少し使いやすく... 複数のフォルダを監視するgruntTask を作成対象のフォルダ以下にあるフォルダ名でSprite ファイルを生成 grunt-spritesmith が作るマッピング情報をJSON で保存パー
スしてSass(SCSS) のMap に変換既存のI/F を再利用

今後やりたいこと Image Assets Generator とgrunt の連携職人のぬくもりを機械で置き換えたい

ご清聴ありがとうございました

cancer