1 pixel|サイバーエージェント公式クリエイターズブログ

サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。


Theme:
はじめまして。2013年新卒入社のTomと申します。
私は現在ガールフレンド(仮)(以下GF)で約1年程フロントエンドの運用を行っています。

今回はGFで使用しているスプライト画像生成ツールGlueに関して導入の経緯などを交えてお話したいと思います。

Glueのメリット

・柔軟
 オプション数が豊富でテンプレートも設定でき、細かくカスタマイズ出来るのでプロジェクトの途中からでも導入しやすい。

・簡単
 コマンドライン上でファイルの入出力先を指定するのみで非常にシンプルに使える。

・高速
 基本的にスプライト画像、cssの生成のみ行うので高速。

導入経緯

スプライト画像生成ツールとして有名なのは、compassを利用した生成手法などがあると思います。
GFでもcompassを使用しており、検討しましたが、以下の理由で断念しました。

  • scssファイルのimport構成に依存すること(構成によってはコンパイルに時間がかかってしまう。)
  • 運用期間からの導入コスト(既存の構成を極力維持したまま使いたい。)
  • GFでは共通のスタイルが纏められたscssファイルのみで完結してしまうページが多い
    (極力リクエスト数を削減したい。スプライトのためにscssファイルを作りたくない。)

compassは多機能で上手く扱えばとても強力なのですが、フルに活用するにはそれらの機能を意識した設計を行っていないと運用は難しいです。
GFに適したスプライト画像生成ツールは以下のようなものでした。
  • scssのコンパイルに依存しない
  • けど極力compassみたいに自動化したい
  • html内にスプライトの定義を記述したい
これらの要望を満たしていたのがGlueでした。

Glueの導入

ではさっそくインストールしてみましょう。Mac OSXを例に説明していきたいと思います。公式のインストールガイドはこちらです。
今回はhomebrewを使ってインストールしていきます。
$ brew install jpeg
$ brew install python
$ pip install glue
インストールが完了したら
$ glue -v
でバージョンを確認してみましょう。最新版(2014/5/28時点)である0.9.4がインストールされていると思います。

使用方法

Glueはとてもシンプルに使用することが出来ます。基本的な使い方は下記の様になります。
$ glue source output
sourceはスプライトにしたい画像が格納されているディレクトリ、outputはスプライト画像の出力先を指定します。

では実際にGFで使用した橋本環奈ちゃんキャンペーンページを例にして説明していきたいと思います。
   

このページでは2枚のスプライト画像を使用しているのですが、その内の1枚が下記を纏めたものになります。

cpディレクトリに移動し下記のコマンドを実行してみると
$ glue sprite1 ./
cpディレクトリ直下にスプライト画像とcssファイルが生成されました。

生成されたcssは下記になります。
/* glue: 0.9.4 hash: 7c38b5a04c */
        .sprite-sprite1-ribbon,
.sprite-sprite1-kanna_text_3,
.sprite-sprite1-kanna_text_1,
.sprite-sprite1-kanna_text_2,
.sprite-sprite1-gf_text_3,
.sprite-sprite1-gf_text_1,
.sprite-sprite1-gf_text_2,
.sprite-sprite1-coin {
            background-image: url('sprite1.png');
            background-repeat: no-repeat;
        }
        
        .sprite-sprite1-ribbon {
            background-position: 0 0;
            width: 624px;
            height: 134px;
        }
        
        .sprite-sprite1-kanna_text_3 {
            background-position: 0 -134px;
            width: 582px;
            height: 116px;
        }
        
        .sprite-sprite1-kanna_text_1 {
            background-position: 0 -250px;
            width: 576px;
            height: 54px;
        }
        
        .sprite-sprite1-kanna_text_2 {
            background-position: 0 -304px;
            width: 572px;
            height: 112px;
        }
…省略…
class名に関しては下記の形式で割り振られています。
sprite-ディレクトリ名-画像名

オプション

オプションの書き方は下記になります。半角スペース区切りで複数指定が可能です。
$ glue source output option
ver0.9以降に追加されたオプションをいくつか紹介したいと思います。

$ glue source output --cocos2d
cocos2dと互換性のあるXMLメタデータファイルを生成します。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>frames</key>
    <dict>
        <key>coin.png</key>
        <dict>
            <key>frame</key>
            <string>{{624, 0}, {160, 110}}</string>
            <key>offset</key>
            <string>{0,0}</string>
            <key>rotated</key>
            <false/>
            <key>sourceColorRect</key>
            <string>{{624, 0}, {160, 110}}</string>
            <key>sourceSize</key>
            <string>{160, 110}</string>
        </dict>
        <key>gf_text_1.png</key>
        <dict>
            <key>frame</key>
            <string>{{0, 466}, {466, 48}}</string>
            <key>offset</key>
            <string>{0,0}</string>
            <key>rotated</key>
            <false/>
            <key>sourceColorRect</key>
            <string>{{0, 466}, {466, 48}}</string>
            <key>sourceSize</key>
            <string>{466, 48}</string>
        </dict>
        …省略…

$ glue source output --margin=20
指定した値を画像の上下左右に余白を取ります。既にpaddingオプションがあるのですが、違いはmarginオプションの場合、余白部分の長さをwidth, heightに含みません。

$ glue source output --cachebuster-filename-only-sprites
生成するスプライト画像にのみキャッシュバスターを付与します。
sprite1_8635fbf5f2.png

少しニッチなオプションだったかもしれないですが、class名を任意の形式に変更したりする等のポピュラーなオプションもありますので是非公式のドキュメントを見てみて下さい。

最後に

基本的な部分しか紹介出来ませんでしたが、Glueいかがでしたでしょうか?
シンプルながらカスタマイズ性もあるので是非今後のスプライト生成ツールの選択肢の1つになればと思います。
他にもテンプレート機能などがあるので是非試してみてくださいね。
最後までお付き合い頂きありがとうございました。
いいね!(13)  |  リブログ(0)
ページトップへ戻る