ファイル名で画像リサイズ設定して自動Web用画像書き出しする
最近photoshopの 画像アセット 書き出しを利用していて改めて便利だな～と思い、jsxファイルでもファイル名から条件に合わせてリサイズと書き出しが出来るものを作ってみた。
スマホで見る
いつも画像とかを簡単にリサイズするときはドロップレットを使ってたけど、あれって最初に記憶した画像のパーセントの割合でリサイズ設定されてるらしく、サイズ別の画像を処理するときには理想の大きさにならなくて結構不便だなーってこともあり、それを解消できる仕様のjsxを作成。
動画
仕様
- 同階層に存在する対象ファイルを指定のファイル形式・大きさにリサイズして書き出す
- 対象ファイルは指定拡張子の一致で判定
- 書き出し先は同階層の「@export/[指定拡張子フォルダ]/」の中
- 各値の設定はアンダースコア区切りで行う
各値の解説）01-02_03_04.jsx
————————
01 = [対象拡張子]-[書き出し拡張子]（jpg、png、gif、png8、psd）
02 = [w]…横、[h]…縦、[-]…縦横の長い方をベースにする
03 = [400-300px]サイズ調整後の値
04 = [80]書き出しのクオリティ（jpg=0-100、gif=2-256、png8=2-256）
使用手順
- 処理対象と同じ階層に実行スクリプトとライブラリを配置
- 実行スクリプトのファイル名をルールに基づき任意のファイル名に変更
- 実行スクリプトを実行
使用例
- case01： jpg-png_w_400px_30.jsx
jpgファイルを読み込みwidthを基準に400pxにリサイズしてpng24で書き出す - case02： psd-jpg_h_400px_30.jsx
psdファイルを読み込みheightを基準に400pxにリサイズしてjpg(30%)で書き出す - case03： -gif_-_200px_256.jsx
登録画像拡張子ファイルを読み込み縦横の長い方を基準に200pxにリサイズしてgif（256色）で書き出す - case04： jpg-jpg_-_200-400px_60.jsx
jpgファイルを読み込みwidth:200px, height:400pxにリサイズしてjpg(60%)で書き出す - case05： jpg_w_200px_50.jsx
jpgファイルを読み込みwidthを基準に200pxにリサイズしてjpg（50%）で書き出す
実行スクリプト
#target photoshop
app.bringToFront();
//-------------------------------------------------------------
// GENERAL SETTING
//-------------------------------------------------------------
//実行スクリプトファイルの情報取得
var _script = $.fileName; //スクリプトファイルのフルパス取得
var _root = File($.fileName).parent + "/"; //スクリプトファイルまでのパス取得
var _scriptName = File($.fileName).name; //スクリプトファイル名取得
//ライブラリ読み込み
var _libName = "export.js";
var _libFile = new File(_root + _libName);
if (_libFile.exists) {
$.evalFile(_libFile);
} else {
alert("ライブラリの読み込みエラーです");
}
//ライブラリ読み込み（別ver）
//01 - //@include _libName
//02 - #include _libName
//エラーメッセージ
var errorMess = "";
//-------------------------------------------------------------
// 各スクリプト毎のライブラリ内で活用するための設定
//-------------------------------------------------------------
//スクリプトファイル名を「_」アンダースコア区切りで分割、配列格納
var set = _scriptName.split("_");
//【01】 インプット（読み込み）とアウトプット（書き出し）の拡張子をセット
//============================================================
var incExt = ""; //読み込み対象の拡張子
var outExt = ""; //書き出す際の拡張子
try {
if(set[0].indexOf("-") != -1){
incExt = set[0].substring(0, (set[0].lastIndexOf("-")));
outExt = set[0].substring((set[0].lastIndexOf("-")+1), set[0].length);
}else{
incExt = set[0];
outExt = set[0];
}
}catch(e) {
errorMess += "【01】 拡張子設定エラー\n" + e;
}
//【02】 サイズ変更をする際にどの方向を基準にするか（w横 h縦 -縦横長い方） portrait/landscape （縦／横向き）
//============================================================
var direction = "";
try {
if(set[1] === "w" || set[1] === "h" || set[1] === "-"){
direction = set[1];
}else{
errorMess += "【02】 基準の方向エラー\n";
}
}catch(e) {
errorMess += "【02】 基準の方向エラー\n" + e;
}
//【03】 サイズ調整
//============================================================
var size = 0;
var sizeW = 0;
var sizeH = 0;
try {
if(set[2].indexOf("-") == -1){
//サイズ表記部分に「-」（ハイフン）が無い状態のデータからpxを除き数値を変数に代入
size = Number(set[2].substring(0, (set[2].lastIndexOf("px"))));
}else{
//ディレクションが「-」（ハイフン）であれば縦横サイズ設定
if(direction === "-"){
//ハイフン区切りでデータを分ける
size = set[2].split("-");
//width設定
if(size[0].indexOf("px") != -1){
sizeW = Number(size[0].substring(0, (size[0].lastIndexOf("px"))));
}else{
sizeW = Number(size[0]);
}
//height設定
if(size[1].indexOf("px") != -1){
sizeH = Number(size[1].substring(0, (size[1].lastIndexOf("px"))));
}else{
sizeH = Number(size[1]);
}
}else{
errorMess += "【03】 サイズ設定エラー\n";
}
}
}catch(e) {
errorMess += "【03】 サイズ設定エラー\n" + e;
}
//【04】 クオリティ Quality
//============================================================
try {
var quality = Number(getFileName(set[3]));
}catch(e) {
errorMess += "/【04】 クオリティ値設定エラー\n" + e;
}
//-------------------------------------------------------------
// libraryの初期メソッドを実行（自己定義）
//-------------------------------------------------------------
if (errorMess.length == 0) {
init();
}else{
alert(errorMess + "\n再度各設定値をご確認ください。");
}
上記の「実行スクリプト」でファイル名から処理に必要な設定値を取得して「export.js」内のjpg等のweb用に保存するメソッドで処理・書き出しをしている。
がっつりjsx書いたの久々だけど毎回何かしらの発見があって楽しいね、こういうのって。
今回は「File($.fileName).parent」でスクリプトまでのパスを簡単に取得できるって知れたのが一番の収穫。 今まではあまりスマートじゃない書き方してたのでね…
