こんにちは。ソーシャルプラットフォーム本部の村松です。
もっぱらスマートフォン向けサイトのマークアップを担当しています。

このサイトのタイトル画像で一番右の人です(嘘)

今回は
「作業時間は1秒でも減らしたい・・」
「Webサイトの高速化のために1つでもリクエストを減らしたい・・」
そんな意識の高い制作者の方へ、軽量シンプルなCSSスプライトジェネレーターのGlueを紹介したいと思います。

Glueは「CUIから簡単なコマンドを叩くだけで、一瞬でCSSスプライトを作成してくれるツール」です。

目次

  1. 1.Glueの利点
  2. 2.インストール方法
  3. 3.使用方法
  4. 4.オプション一覧
  5. 5.使用用途
  6. 6.まとめ

Glueの利点

・シンプル
機能をCSSスプライトのみに絞っているため、ただコマンドを1行入力するだけです。
・軽量
シンプルゆえに軽量、つまり動作が速いです。
・豊富なオプション
CSSスプライトで必要な機能はほとんど揃っています。
・インストール後はネット接続がいらない
Web上にあるジェネレーターと違いローカルで実行できるので、ポリシー上、画像を上げられない場合でも問題ありません。

インストール方法

こちらのGlueのInstall Guideを参考にインストールしてください。
http://glue.readthedocs.org/en/latest/installation.html

CSSスプライト画像作成後、容量圧縮をかけるために、OptiPNGも入れておきましょう。
http://glue.readthedocs.org/en/latest/optipng.html

参考までに、私がMacとLinuxの開発環境にインストールした時の流れです。

Mac OSX(10.8.4)

Homebrewはインストール済み。
GlueはPythonのライブラリです。ここではpipというPythonのパッケージ管理システムを使って、インストールしています。

glueインストール

brew install jpeg
sudo easy_install pip
sudo pip install glue

OptiPNGインストール

brew install optipng

開発環境(Linux)

ディストリビューションはCentOSです。Debian/Ubuntuの場合は、Glueのインストールガイドをご覧下さい。

glueインストール

sudo yum -y install python-setuptools
sudo easy_install pip
sudo pip install glue

OptiPNGインストール

あらかじめダウンロードしたOptiPNGの圧縮ファイルをサーバールートに配置済み。

tar zvxf optipng-0.7.3.tar.gz
cd optipng-0.7.3
./configure
make
sudo make install

使用方法

インストール作業お疲れ様でした!それでは、実際にCSSスプライトしてみましょう。

まず、任意のフォルダにスプライトする画像を用意して入れておきます。
ここでは例としてdemoというフォルダの中のiconフォルダに4つのpngファイルを配置しました。

pic-folder_01

この4つのpngをスプライト画像化して、spriteフォルダに出力したいと思います。

glueは、TerminalやCygwinなどのコマンドラインツールを使って操作します。
基本的なコマンドの構文はこのようになります。

glue input output option_n

inputは入力先(png画像のあるところ)、outputは出力先、option_nは後述のオプションをつける時に付けます。複数ある場合も後ろに半角スペースで区切って付け足していくだけで、使わない場合は省略できます。

さきほどの例だとこのようなコマンドになります。(コマンドライン上で現在demoフォルダにいる場合。)

glue icon sprite

上記コマンドを実行するとspriteフォルダにicon.cssとicon.pngが作成されました。
4つのpngが1つにまとめられていますね。

pic-folder_02

出力されたcssの方はこのようになっています。

/* glue: 0.3 hash: 59352a5b34 */
.sprite-icon-star,
.sprite-icon-game,
.sprite-icon-bright,
.sprite-icon-avatar{background-image:url('icon.png');background-repeat:no-repeat}
.sprite-icon-star{background-position:0px 0px;width:42px;height:42px;}
.sprite-icon-game{background-position:-42px 0px;width:42px;height:42px;}
.sprite-icon-bright{background-position:0px -42px;width:42px;height:42px;}
.sprite-icon-avatar{background-position:-42px -42px;width:42px;height:42px;}

[sprite-フォルダ名-画像名]のルールでclass名が作られ、それぞれbackground-positionとwidth,heightが指定されています。オプションでこれらのclass名はカスタマイズできます。

オプション一覧

--project 入力先のフォルダ内をさらにフォルダ分けしてこのオプションを付けると、フォルダごとにスプライト画像とCSSを出力してくれます。
--recrusive, -r 入力先のフォルダ内の全ての画像を1つにまとめます。
--crop, -c 画像の周りの透過の余白を削除して、スプライト画像にまとめます。
--less, -l 拡張子が.cssではなく.lessのファイルを生成します。
--url, -u スプライト画像の読み込み先を変更することができます。
--quiet, -q コマンド実行時にシステムメッセージが流れなくなります。
--padding, -p それぞれの画像に指定した余白を追加します。
--ratios device pixel ratio別の画像を出力してくれます。
--retina --ratios=2,1と同じです。
--imagemagick スプライト画像の生成をimagemagickにします。
デフォルトで綺麗に表示されなかった場合に、こちらを試してみて下さい。
※ImageMagicがインストールされている必要があります。
--imagemagickpath ImageMagicのPATHを指定できます。
--watch 画像フォルダを監視し、変更があれば自動実行します。
Ctrl+cで監視の中断です。
--css --img imgとcssの出力先を別々に指定することができます。
--html cssを適用した確認用のhtmlを出力してくれます。
--algorithm スプライト画像の生成アルゴリズムを指定します。
--margin スプライト画像の周りに余白を取ります。
--namespace 出力されるcssのclass名の最初の接頭辞sprite-を任意の物に変更できます。
--sprite-namespace 出力されるcssのclass名の入力フォルダ名が入っていた部分を任意の物に変更できます。
--png8 スプライト画像をPNG8で出力します。
--debug エラー時などにより詳細なデバッグ用のログが表示されます。
--separator 出力されるcssのclass名の区切り文字を指定します。
camelcaseと入力するとrowerCamelCaseになります。
--global-template 出力されるcssの全てのclassに指定されるスタイルをカスタマイズできる。
--each-template 出力されるcssの個々のclassに指定されるスタイルをカスタマイズできる。
--optping スプライト画像をOptiPNGを使って圧縮して出力する。
--optipngpath OptiPNGへのPATHを指定する。
--cachebuster 画像のキャッシュをクリアするためのパラメータを画像名の末尾につける。
--cachebuster-filename 画像のキャッシュをクリアするために画像名にランダムな文字列をつける。
--follow-links シンボリックリンクを辿るようにする。
--force 出力内容に変わりがない場合、CSS, 画像の出力は行われないが、強制的に行うようにする。
--no-img スプライト画像を出力しない。
--no-css CSSを出力しない。

詳細は下記、公式ドキュメントをご覧下さい。
Command line arguments — glue 0.3 documentation

使用用途

Glueを使用するポイントですが、モックやキャンペーンページ、あるカテゴリ内でユニークなページなどの、スプライト画像を参照するCSSが限定されている場合ではないでしょうか。
1つのスプライト画像が色々なCSSから参照されるような場合は、更新のために沢山のCSSを修正しなければならないので、Compassのような既にあるCSSの該当箇所を修正してくれるフレームワークの方が良いかと思います。

まとめ

CSSスプライトジェネレーター1つ取っても色々な選択肢がありますが、それぞれのツールの特徴を把握して上手に使い分け、単純作業にかける時間を減らしていければ、頭を使うクリエイティブな事に多くの時間を割いていけるようになるのではないでしょうか。

DeNAでは、常に自分や周りの制作手法を良しとせず、改善していける意識の高いクリエイターを募集しています。