ブックマークレットで手軽にスプライト画像/CSSコード生成

Steve Souders氏は14日(米国時間)、自身のブログ上でSpriteMeを公開したとアナウンスした。SpriteMeはCSS Spritesを使うにあたりcoolRunningsを使用して必要なスプライト画像を生成、および表示のためのCSSコードを出力してくれるWebサイト。同Webサイトにはブックマークレットが用意されており、ユーザはブックマークレットを任意のWebサイトで実行するだけで簡単にスプライト画像と必要なCSSコードを入手できる。

SpriteMeの動作の流れはおもに次のとおり(Demoより抜粋)。

  1. CSSより背景画像(background-image)が指定されている箇所を抽出
  2. 抽出した画像の幅や高さをもとに、グルーピングをおこなう
  3. グループごとにスプライト画像を生成
  4. 生成したスプライト画像を現在表示しているWebページに挿入
  5. CSS background-positionを再計算

SpriteMeはApache License, Version 2.0のもとオープンソースソフトウェアとして公開されている。興味がある方はspriteme - Project Hosting on Google Codeよりチェックアウトされたい。

CSS Spritesのためのスプライト画像やCSSコードを生成するWebサービスやソフトウェア、Webブラウザのプラグインはこれまでにもいくつかあったが、SpriteMeはブックマークレットをお気に入りに登録しておいて実行するだけでこれらの作業ができてしまう。複数のWebサイトに対して作業する場合でも、次々と最適化をおこなえる。

本稿では、SpriteMeの使い方を紹介しよう。

Hello, SpriteMe! - まずは使ってみよう

動作環境は次のとおり。

  • OS: Mac OS X 10.5.8
  • Webブラウザ: Firefox 3.5.3

なお、SpriteMeは次のWebブラウザで動作確認がおこなわれているようだ。

  • Firefox 3.x
  • Ineternet Explorer 6-8
  • Google Chrome 2
  • Safari 4
  • Opera 10

まずはブックマークレットの追加だ。FirefoxでSpriteMeにアクセスする。Installationの下にSpriteMeのブックマークレットが用意されているので、右クリックしてブックマークに追加する。

SpriteMeにアクセス。InstallationのSpriteMeリンクを右クリックし、ブックマークに追加する

あとはCSS Spritesテクニックを使いたいWebサイトにアクセスし、ブックマークレットを実行するだけだ。ブックマークレットを実行し、表示しているWebページ上に最適化できるCSS Imageがあれば候補が表示される。

SpriteMe上でブックマークレットを実行。CSSの解析がおこなわれ、スプライト画像のもととなるファイル一覧が表示された

CSS上で画像を使っていない場合はこのようなエラーが表示される

スプライト画像の候補がある場合、続けてmake spriteボタンを押せば、グループごとに最適化されたスプライト画像とCSSコードが生成される。

make spriteボタンを押すと、グルーピングされた画像ごとにスプライト画像・表示用のCSSコードが表示される

最後に作成されたスプライト画像をダウンロードし、CSSコードをコピペする。ブックマークレットを実行して数回操作をおこなうだけで、簡単にCSS Spritesテクニックに必要な素材を揃えることができる。