クリエイター手抜きプロジェクト［328］Photoshop CS3〜6編　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);


【古籏一浩】[email protected]
< 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/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。