CSS Sprite Extensionの紹介

2010/07/07 23:45 バグフィックス版 CSS Sprite Extension 1.1.2アップ
書き出しの際CSS中の画像への相対パスの算出方法を変更。深い階層においても正しく相対パスを生成できるようになりました。

2010/05/28 CS5対応版公開
旧バージョンを入れている方は上書きして良いか聞かれたら、上書きして大丈夫です。管理者権限のない方向け用VistaインストーラーはUninstallボタンを押して、再度swfを開くとInstallボタンが有効になります。新機能で選択した部分だけCSSをクリップボードにコピー出来るようになりました！

CSS Sprite Extensionは、Fireworks CS4とCS5に対応したFireworksの機能拡張でCSS Sprite(CSSスプライト)に適したCSSと画像を生成します。

この機能拡張が提供するのは、単純な3つのステップです。

1. 指定フォルダから、予め指定された拡張子のファイルをFireworksドキュメントに読み込む(Import)
2. Fireworksドキュメント上に存在するオブジェクトを重ならないように自動で配置する(Spread)
3. 配置済みのFireworksドキュメントのオブジェクトからCSSを生成する（Export）

これら3つのステップが独立していることにより、必要な機能を必要な部分だけ使うことができます。さらに、CSS書き出し書式は、簡単なテンプレートを使用して自由に指定できます。これによって、自社のCSS記述ルールや案件ごとに定められたCSS記述ルールに柔軟に対応できます。

CSS Sprite Extensionは、ウェブサイト制作の現場にある多様なワークフローの中でちょっと楽ができるをコンセプトに開発しています。改善していきたいのでどうぞ感想や不具合をお知らせください。

メール：risa.yuguchi@gmail.com

Twitter:http://twitter.com/risay

CSS Sprite Extensionのインストール

CSS Sprite ExtensionはExtension Managerを使用してインストールすることができます。

OSXまたはWindows XPの方

1. CSS Sprite Extensionの配布ファイル「CSSSpriteExt.mxp」をダウンロードする
2. CSS SpriteExt.mxpをダブルクリックすると、Extension Managerが立ち上がるのでインストールを行う
3. Fireworksを起動中の場合には、Fireworksを再起動する（自動で再起動を促されます）

Windows Vistaの方（管理者権限が使える方）

Windows 7は当方にテスト環境がありませんのでインストールできない場合にこちらをお試しください。

1. CSS Sprite Extensionの配布ファイル「CSSSpriteExt.mxp」をダウンロードする
2. Extension Managerを管理者権限で起動する
3. Extension Managerの「インストール」ボタンをクリックしてCSSSpriteExt.mxpを指定しインストールする
4. Fireworksを起動中の場合には、Fireworksを再起動する（自動で再起動を促されます）

Windows Vistaの方（管理者権限が使えない方）

管理者権限が使えない方向けに、jsfで動くインストーラー/アンインストーラーを用意しました。困ったときにご利用ください。

1. CSS Sprite ExtensionのVista用配布ファイル「csspriteInstaller.zip」をダウンロードする
2. csspriteInstaller.zipファイルを解凍する。
3. 解凍したらできるFwExtensionInstaller.swfをFireworks CS4で開く
4. インストールするファイル一覧がでるのでInstallをクリックする

当サイトで配布するcssspriteInstaller.zipはウイルスチェックをしており、mxpと同じファイルをFireworks所定のユーザー設定フォルダに配置するソフトです。なお、設置されるファイルは次の3点です。

• csssprite_lib.jsfc
• CSSSprite 用 CSSと画像作成.swf
• cs_sortObjects.jsc

CSS Sprite Extensionの使い方

「CSSSPRITE用CSSと画像作成」パネルを開いたら、「Import（読み込み）」「Spread（並び替え）」「Export（書き出し）」の左にあるチェックマークのうち、今回実行したいものにチェックをいれて、「Generate（実行）」ボタンをクリックします。そうすると、処理が実行されCSSや画像ファイルが作成されます。

基本的な設定はすでに済んでいるのでそのまま「Generate」ボタンをクリックしても大丈夫です。

Exportにチェックを入れて書き出されるファイルのファイル名はName欄で指定した名前になります。

パネルを開いたときには読み込みと並べ替えを実行するようにチェックが入っています。実行前に確認はとりませんので、実行ボタンを押す前に確認するようにしてください。

Import（読み込み）機能

Importにチェックが入っていると、実行した瞬間に「フォルダ選択ダイアログ」が表示されます。ここで、ひとつにまとめたい画像の入ったフォルダを指定すると自動的にファイルをFireworksドキュメントに読み込んでくれます。書き出しの際にidとして使われるここのオブジェクトの名前には画像のファイル名が入ります。

Extensionsを変更すると、読み込むファイルの種類を変更することができます。読み込みたい画像ファイルの拡張子「.jpg」のような「.（ドット）＋拡張子」という形式で書きます。複数指定する場合は、あとから分かりやすくするために、カンマやセミコロン区切りで書いておくことを推奨します。

この機能は、既存サイトにCSS Spriteを導入したいときなど、すでに画像ファイルを書き出し済みの場合に役立ちます。

Spread（並び替え）機能

Spreadにチェックが入っていると、現在のドキュメントの一番下のレイヤーにあるオブジェクトを全て重ならにように配置します。並び替えるときに、現在のドキュメントの幅か並び替えの対象となるオブジェクトの一番大きな幅を基準にします。

この機能は、Importで読み込んだ画像ファイル以外のオブジェクトにも有効です。Fireworksでデザインをしている場合は、デザインファイルから直接コピーアンドペーストでオブジェクトを持ってくることもできますし、複数のレイヤーをもつPSDファイルも並び替えることができます。フィルタも考慮しますので、余計なファイルを作らずにCSS Spriteで使用できる画像を作ることができます。

並べ替えるときにオブジェクト名がついてない場合は、自動でsp＋内部処理番号がふられます。こちらの値は必ずしもユニークなidとはならないのと、あとからわかりにくいので出来れば自分で名前をつける方が使いやすいようです。またPSDファイルのレイヤーを並び替える場合は、既にレイヤー名が指定されているので新たなオブジェクト名は設定されません。

特に複雑なアルゴリズムは使っていないので隙間のない並びにはなりません。また、並び替えの好みがありますので、Spreadのあとに手で調整するステップを持つ方がおすすめです。

Export（書き出し）機能

Exportにチェックが入っているときは、CSSファイルを書きだします。オプションで透過PNG（32ビット）の画像を書きだすこともできます。

1.1から、オブジェクトを選択している状態でExportだけにチェックを入れて「Generate」ボタンを押すと、選択した分だけCSSをクリップボードにコピーするようになりました！なお、コピーされるCSSは「repeat by elements Template」だけの出力です。

最後の画像書き出しは永遠に初期状態OFFのオプションです。Fireworksで書き出すよりも、減色ソフトやPhotoshopのWeb用に保存機能を使った方が品質が良かったり軽量なものを書き出せる可能性がありますのでワークフローに合わせてご利用下さい。

オブション一覧

Root folder	CSSファイルと画像ファイルのルートになるフォルダーを指定します。クリックするとフォルダーを指定するウィンドウが開きそこで書き出し先ルートフォルダーを指定してください。キャンセルした場合は空になります。 この機能拡張では、オプションのCSS書き出しフォルダーと画像フォルダーはこのフォルダーの中にしか指定できないので、通常はウェブサイトのトップページを置いているフォルダーを指定します。 空にしておくと、生成したCSSはクリップボードにコピーされるのでお好みのエディタにペーストして編集することもできます。クリップボードへのコピーは試しに書き出したい場合に便利です。
CSS folder	CSSをRoot folder（書き出しルートフォルダー）に配置したくない場合に設定できます。書き出しフォルダーと画像への相対パス割り出しに使用します。
Image folder	画像をRoot folder（書き出しルートフォルダー）に配置したくない場合に設定できます。書き出しフォルダーとCSSからの相対パス割り出しに使用します。
Image extension	画像の拡張子です。標準では.pngとなっていますが、好みに合わせて変更してください。
need the image file	1つにまとめた画像ファイルを指定した形式で書き出したい場合にチェックを入れます。現在は透過PNG（32ビット）しか指定できません。標準ではチェックが外れています。
transparent PNG	書き出す画像の形式で、透過PNG（32ビット）です。現在のところ唯一指定出来る形式です。
Template	CSSコードのテンプレートです。テンプレート変数が使えます。

Export時のテンプレートについて

CSSのコードは、パネル下部のテンプレートで制御できます。テンプレートは2つに別れています。

• once Template…一度だけ書き出したい部分
• repeat Template…オブジェクトごとに繰り返し書き出したい部分

編集した内容は記憶されますが、「Reset」ボタンを押すと付属のコードに戻ります。テンプレートには変数があり、記載しておくと自動的に変換されます。

CSS用テンプレートのテンプレート変数一覧

テンプレート変数	テンプレートの種類	例	説明
_image_	once,repeat	csssprite.png	画像へのファイルパス。1.1以降で拡張子を含むようにかわりました。
_imageext_	once,repeat	.png	画像の拡張子
_id_	repeat	sp1	その領域のidです。オブジェクトの名前がidになります。
_left_	repeat	-10px	background_positionの指定で使われるleftの値。0または負の値が入ります。
_top_	repeat	-10px	background_positionの指定で使われるtopの値。0または負の値が入ります。
_width_	repeat	200px	そのオブジェクトの幅。単位pxまで含まれますが、1.0のように_width_pxと書いてしまっても平気です。
_height_	repeat	200px	そのオブジェクトの高さ。単位pxまで含まれますが、1.0のように_height_pxと書いてしまっても平気です。

@charset "utf-8";

/*
This css was written by CSSSprite Extension (copyright (c) 2010 Risa Yuguchi <risa.yuguchi@gmail.com>).
 Eveyone can delete this comments.
 Thank you for using this extension.
*/

.testClass {background-image: url(../img/samplecss.png);background-repeat: no-repeat;text-indent:-9999px;overflow: hidden;display:block;}

/* each setting */

/* for id:contents_bg */
#contents_bg {background-position: -275px 0;width: 19px;height: 457px;}

/* for id:bg */
#bg {background-position: -263px 0;width: 12px;height: 840px;}

/* for id:article_bg */
#article_bg {background-position: -254px 0;width: 9px;height: 402px;}

/* for id:header_bg */
#header_bg {background-position: -133px -252px;width: 43px;height: 116px;}

/* for id:menu_bg_over */
#menu_bg_over {background-position: 0 -220px;width: 100px;height: 100px;}

/* for id:icon_new */
#icon_new {background-position: -37px -88px;width: 71px;height: 71px;}

/* for id:title */
#title {background-position: 0 -168px;width: 254px;height: 52px;}

/* for id:iconl_mail */
#iconl_mail {background-position: -120px -78px;width: 55px;height: 42px;}

/* for id:menu_bg */
#menu_bg {background-position: -101px -88px;width: 14px;height: 48px;}

/* for id:icon_acryle */
#icon_acryle {background-position: -101px -252px;width: 32px;height: 32px;}

/* for id:icon_brush */
#icon_brush {background-position: -197px -220px;width: 32px;height: 32px;}

/* for id:icon_wood */
#icon_wood {background-position: -165px -220px;width: 32px;height: 32px;}

/* for id:icon_oil */
#icon_oil {background-position: -133px -220px;width: 32px;height: 32px;}

/* for id:icon_video */
#icon_video {background-position: -101px -220px;width: 32px;height: 32px;}