クリエイター手抜きプロジェクト[328]Photoshop CS3〜6編 CSSスプライト画像を作成する/古籏一浩

投稿:  著者:  読了時間:7分(本文:約3,100文字)


今回は、WebのCSSで利用されるCSSスプライト画像を生成するスクリプトです。

・CSSスプライト
< http://gihyo.jp/design/serial/01/ss-design/0010 >

今回のスクリプトでは、CSSスプライト画像は横一列に同じサイズで並べるようになっています。このため、異なるサイズの画像をまとめることはできません。以下のスクリプトは、選択したフォルダ内にあるすべてのJPEG画像を読み込み、指定したサイズのCSSスプライト画像を生成します。





// CSS Sprite自動生成(Photoshop)
function main(){
var imgFolder = Folder.selectDialog("CSSスプライトにする画像が入ったフォルダを選択してください");
if(!imgFolder){ return; } // キャンセルされたら何もしない
var fileList = imgFolder.getFiles("*.jpg"); // JPEGの場合
var w = prompt("Spriteの横幅を入れてください", 32);
if (!w){ return; } // キャンセルされたら何もしない
var h = prompt("Spriteの縦幅を入れてください", 32);
if (!h){ return; } // キャンセルされたら何もしない
w = parseInt(w); // 整数値に変換し単位があればカットする
h = parseInt(h); // 整数値に変換し単位があればカットする
// CSS Sprite用のドキュメントを生成する
var baseDoc = app.documents.add (w*fileList.length, h, 72, "CSSSprite");
// フォルダ内にある画像の数だけ繰り返す
for(var i=0; i<fileList.length; i++){
app.open(fileList[i]); // ファイルを開く
try{
activeDocument.mergeVisibleLayers(); // 表示されているレイヤーだけ結合する
}catch(e){}
activeDocument.selection.selectAll(); // すべて選択する
activeDocument.selection.copy(); // コピーする
activeDocument.close(SaveOptions.DONOTSAVECHANGES); // 保存しない
// 指定されたサイズに一度ペーストして切り抜く(クリッピングよりも楽)
var tempDoc = app.documents.add (w, h, 72, "temp");
activeDocument.paste(); // ペーストする
activeDocument.selection.selectAll();
activeDocument.selection.copy();
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
activeDocument.paste();
// ペーストした画像の左側の座標を取得
var layerX1 = parseInt(activeDocument.activeLayer.bounds[0]);
// 画像の位置を調整
activeDocument.activeLayer.translate(-layerX1, 0);
activeDocument.activeLayer.translate(i*w, 0);
}
}
// 単位を保存
var saveUnit = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
// 処理を実行
main();
// 単位を復元
preferences.rulerUnits = saveUnit;


JPEGでなくPNG形式の画像を処理する場合には以下の行を変更します。

var fileList = imgFolder.getFiles("*.jpg"); // JPEGの場合
  ↓
var fileList = imgFolder.getFiles("*.png"); // PNGの場合


PSD(Photoshop)形式の場合は、以下のように変更してください。その場合は、
表示されているレイヤーが結合された状態で配置されます。

var fileList = imgFolder.getFiles("*.jpg"); // JPEGの場合
  ↓
var fileList = imgFolder.getFiles("*.psd"); // PSDの場合


なお、画像を指定したサイズにした後に配置するには、以下のように変更して
ください。

app.open(fileList[i]); // ファイルを開く
  ↓
app.open(fileList[i]); // ファイルを開く
activeDocument.resizeImage(w, h, 72);


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/ >

前回の記事で訂正があります。「Webブラウザでのスタイルシートに関するテーマを扱う勉強会」と書きましたが、「Web制作に関わる方のためのセミナーイベントです」だそうです。お詫びして訂正いたします。なお、写真付きで以下のページに「CSS Nite in 信州」の様子をアップしてあります。

< http://www.openspc2.org/CSSNite/SHINSHU/20120901/ >

「JavaScript逆引きハンドブック」に続いて「HTML5ガイドブック」の増補改訂版が10月25日に発売されます。ちなみに「JavaScript逆引きハンドブック」はWindows Phoneでの動作テスト(対応)もしたけど、需要なさそう。

・HTML5ガイドブック 増補改訂版【New!!】
< http://www.amazon.co.jp/dp/4844332937 >

意外とアクセスが多かったのが、以下のゲーム制作記事。レトロゲームは強いのかインベーダーゲームというネームバリューが強いのか......

・毎度おなじみASCII.jpの連載「enchant.jsで懐かしのインベーダーゲームを作ろう」
< http://ascii.jp/elem/000/000/720/720419/ >

・JavaScript逆引きハンドブック【New!!】
< http://www.amazon.co.jp/dp/4863541082 >

・すべての人に知っておいてほしいスマートフォンサイトデザインの基本原則
< http://www.amazon.co.jp/dp/4844362844 >

・10日で覚えるHTML5入門教室
< http://www.amazon.co.jp/dp/4798124184 >

・改訂5版JavaScriptポケットリファレンス
< http://www.amazon.co.jp/dp/4774148199 >

・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/ >

・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/ >

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/ >
吉田印刷所の「印刷の泉」でも購入できるようになりました。