Webデザイン PhotoshopでのWeb制作効率を向上させる「JSX」とは

alert("テスト");

// 変数 hoge を宣言し、100 を代入
var hoge = 100;
// 変数 hoge を表示
alert(hoge);

// オブジェクトを作る
var Hoge = function() {
	this.a = 10;
	this.b = 20;
}
 
// オブジェクトを利用する
var thisHoge = new Hoge;
 
alert(thisHoge);

// オブジェクトを作る
var Hoge = function() {
	this.a = 10;
	this.b = 20;
}
 
// オブジェクトを利用する
var thisHoge = new Hoge;
 
/* 指定したオブジェクトの全てのプロパティとメソッドを表示する関数 */
function printProperties(obj) {
    var properties = '';
    for (var prop in obj){
        properties += prop + "=" + obj[prop] + "\n";
    }
    alert(properties);
}
 
// オブジェクト thisHoge  を引数として関数を実行
printProperties(thisHoge);

/*==============================================================================
  File Name: シェイプ作成.jsx
  Title: シェイプ作成
  Version: 1.0.0
  Author: Stocker.jp
  Author URI: https://stocker.jp/
 
==============================================================================*/
 #target photoshop
 
// 単位を px に変更
preferences.rulerUnits = Units.PIXELS;
 
// 実行フラグ
var do_flag = 1;
 
/* ダイアログ関係 */
 
// ダイアログオブジェクト = new Window("dialog",タイトル,[左座標,上座標,右座標,下座標])
uDlg = new Window('dialog','シェイプ作成',[100,100,440,255]);
// ダイアログを画面に対して中央揃えに
uDlg.center();
 
// ラベル W
uDlg.sText = uDlg.add("statictext",[20,23,275,10+15], "W");
// テキスト入力 W
uDlg.w = uDlg.add("edittext",[40,20,110,15+25], "100");
// ラベル H
uDlg.sText = uDlg.add("statictext",[130,23,275,10+15], "H");
// テキスト入力 H
uDlg.h = uDlg.add("edittext",[150,20,220,15+25], "100");
// ラベル R
uDlg.sText = uDlg.add("statictext",[260,23,275,20+15], "R");
// テキスト入力 R
uDlg.r = uDlg.add("edittext",[280,20,320,15+25], "0");
// ラベル X
uDlg.sText = uDlg.add("statictext",[20,73,275,10+15], "X");
// テキスト入力 X
uDlg.x = uDlg.add("edittext",[40,70,110,0+90], "0");
// ラベル Y
uDlg.sText = uDlg.add("statictext",[130,70,275,10+15], "Y");
// テキスト入力 Y
uDlg.y = uDlg.add("edittext",[150,70,220,0+90], "0");
 
// OKボタン
uDlg.okBtn = uDlg.add("button",[70,115,160,115+25], "作成", { name:"ok"});
// キャンセルボタン
uDlg.cancelBtn = uDlg.add("button", [180,115,270,115+25], "キャンセル", {name: "cancel"});
 
// キャンセルボタンが押されたらキャンセル処理（ESCキー含む）
uDlg.cancelBtn.onClick = function() {
	// 実行フラグに0を代入
	do_flag = 0;
	// ダイアログを閉じる
	uDlg.close();
}
 
// ダイアログを表示
uDlg.show();
 
// =======================================================
 
/* シェイプを作成し、レイヤー名をリネーム */
 
// 実行フラグが1（キャンセルボタンが押されていない）であれば
if (do_flag == 1) {
	// シェイプを作成する関数（75行目）を実行
	draw_shape();
	// アクティブレイヤーをリネームする関数（122行目）を実行
	rename_layer();
}
 
// =======================================================
/* 以下関数 */
 
/* シェイプを作成する関数
 * 88、92行目等: eval(変数) とすると、変数の値が "100+20" のような演算子入りのものであった場合計算する
 */
function draw_shape() {
	var idMk = charIDToTypeID( "Mk  " );
	var desc58 = new ActionDescriptor();
	var idnull = charIDToTypeID( "null" );
	var ref31 = new ActionReference();
	var idcontentLayer = stringIDToTypeID( "contentLayer" );
	ref31.putClass( idcontentLayer );
	desc58.putReference( idnull, ref31 );
	var idUsng = charIDToTypeID( "Usng" );
	var desc59 = new ActionDescriptor();
	var idType = charIDToTypeID( "Type" );
	var idsolidColorLayer = stringIDToTypeID( "solidColorLayer" );
	desc59.putClass( idType, idsolidColorLayer );
	var idShp = charIDToTypeID( "Shp " );
	var desc60 = new ActionDescriptor();
	var idTop = charIDToTypeID( "Top " );
	var idRlt = charIDToTypeID( "#Rlt" );
	// Y座標1
	desc60.putUnitDouble( idTop, idRlt, eval(uDlg.y.text) );
	var idLeft = charIDToTypeID( "Left" );
	var idRlt = charIDToTypeID( "#Rlt" );
	// X座標
	desc60.putUnitDouble( idLeft, idRlt, eval(uDlg.x.text) );
	var idBtom = charIDToTypeID( "Btom" );
	var idRlt = charIDToTypeID( "#Rlt" );
	// Y座標2
	shapey = eval(uDlg.y.text) + eval(uDlg.h.text);
	desc60.putUnitDouble( idBtom, idRlt, shapey );
	var idRght = charIDToTypeID( "Rght" );
	var idRlt = charIDToTypeID( "#Rlt" );
	// X座標2
	shapex = eval(uDlg.x.text) + eval(uDlg.w.text);
	desc60.putUnitDouble( idRght, idRlt, shapex );
	var idRds = charIDToTypeID( "Rds " );
	var idRlt = charIDToTypeID( "#Rlt" );
	// R角丸
	desc60.putUnitDouble( idRds, idRlt, eval(uDlg.r.text) );
	var idRctn = charIDToTypeID( "Rctn" );
	desc59.putObject( idShp, idRctn, desc60 );
	var idcontentLayer = stringIDToTypeID( "contentLayer" );
	desc58.putObject( idUsng, idcontentLayer, desc59 );
	executeAction( idMk, desc58, DialogModes.NO );
}
 
/* アクティブレイヤーのレイヤー名変更する関数 */
function rename_layer() {
	// 右側が新しいレイヤー名（例: W 100   H 100   R 0）
	activeDocument.activeLayer.name = "W " + parseInt(eval(uDlg.w.text)) + "   H " + parseInt(eval(uDlg.h.text)) + "   R " + parseInt(eval(uDlg.r.text));
}

// 単位を px に変更
preferences.rulerUnits = Units.PIXELS;

// 実行フラグ
var do_flag = 1;

// ダイアログオブジェクト = new Window("dialog",タイトル,[左座標,上座標,右座標,下座標])
uDlg = new Window('dialog','シェイプ作成',[100,100,440,255]);
// ダイアログを画面に対して中央揃えに
uDlg.center();
 
// ラベル W
uDlg.sText = uDlg.add("statictext",[20,23,275,10+15], "W");
// テキスト入力 W
uDlg.w = uDlg.add("edittext",[40,20,110,15+25], "100");
/* 以下略 */

// キャンセルボタンが押されたらキャンセル処理（ESCキー含む）
uDlg.cancelBtn.onClick = function() {
	// 実行フラグに0を代入
	do_flag = 0;
	// ダイアログを閉じる
	uDlg.close();
}

// 実行フラグが1（キャンセルボタンが押されていない）であれば
if (do_flag == 1) {
	// シェイプを作成する関数（75行目）を実行
	draw_shape();
	// アクティブレイヤーをリネームする関数（122行目）を実行
	rename_layer();
}

function draw_shape() {
	/* 中略 */
	// Y座標1
	desc60.putUnitDouble( idTop, idRlt, eval(uDlg.y.text) );
	var idLeft = charIDToTypeID( "Left" );
	var idRlt = charIDToTypeID( "#Rlt" );
	/* 後略 */

	var idMk = charIDToTypeID( "Mk  " );
	var desc58 = new ActionDescriptor();
	var idnull = charIDToTypeID( "null" );
	var ref31 = new ActionReference();
	var idcontentLayer = stringIDToTypeID( "contentLayer" );
	ref31.putClass( idcontentLayer );
	desc58.putReference( idnull, ref31 );
	var idUsng = charIDToTypeID( "Usng" );
	var desc59 = new ActionDescriptor();
	var idType = charIDToTypeID( "Type" );
	var idsolidColorLayer = stringIDToTypeID( "solidColorLayer" );
	desc59.putClass( idType, idsolidColorLayer );
	var idShp = charIDToTypeID( "Shp " );
	var desc60 = new ActionDescriptor();
	var idTop = charIDToTypeID( "Top " );
	var idRlt = charIDToTypeID( "#Rlt" );

function draw_shape() {
	/* 中略 */
	// Y座標1
	desc60.putUnitDouble( idTop, idRlt, eval(uDlg.y.text) );
	var idLeft = charIDToTypeID( "Left" );
	var idRlt = charIDToTypeID( "#Rlt" );
	/* 後略 */

/* アクティブレイヤーのレイヤー名変更する関数 */
function rename_layer() {
	// 右側が新しいレイヤー名（例: W 100   H 100   R 0）
	activeDocument.activeLayer.name = "W " + parseInt(eval(uDlg.w.text)) + "   H " + parseInt(eval(uDlg.h.text)) + "   R " + parseInt(eval(uDlg.r.text));
}

/*==============================================================================
  File Name: シェイプサイズ変更.jsx
  Title: シェイプサイズ変更
  Version: 1.1.0
  Author: Stocker.jp
  Author URI: https://stocker.jp/
 
==============================================================================*/
 #target photoshop
 
// ドキュメントの解像度が 72ppi でなければアラート
if (activeDocument.resolution !== 72) {
	alert("解像度が72ppiではありません。「編集＞画像解像度」から解像度 72 pixel/inch にしてください。");
}
 
// 単位を px に変更
preferences.rulerUnits = Units.PIXELS;
 
// 実行フラグ
var do_flag = 1;
 
// 現在のレイヤーで選択範囲を作る
try {
	var idsetd = charIDToTypeID( "setd" );
	var desc85 = new ActionDescriptor();
	var idnull = charIDToTypeID( "null" );
	var ref57 = new ActionReference();
	var idChnl = charIDToTypeID( "Chnl" );
	var idfsel = charIDToTypeID( "fsel" );
	ref57.putProperty( idChnl, idfsel );
	desc85.putReference( idnull, ref57 );
	var idT = charIDToTypeID( "T   " );
	var ref58 = new ActionReference();
	var idPath = charIDToTypeID( "Path" );
	var idPath = charIDToTypeID( "Path" );
	var idvectorMask = stringIDToTypeID( "vectorMask" );
	ref58.putEnumerated( idPath, idPath, idvectorMask );
	var idLyr = charIDToTypeID( "Lyr " );
	var idOrdn = charIDToTypeID( "Ordn" );
	var idTrgt = charIDToTypeID( "Trgt" );
	ref58.putEnumerated( idLyr, idOrdn, idTrgt );
	desc85.putReference( idT, ref58 );
	var idVrsn = charIDToTypeID( "Vrsn" );
	desc85.putInteger( idVrsn, 1 );
	var idvectorMaskParams = stringIDToTypeID( "vectorMaskParams" );
	desc85.putBoolean( idvectorMaskParams, true );
	executeAction( idsetd, desc85, DialogModes.NO );
} catch(e) {
	alert("選択されているレイヤーがありません。");
}
// 現在のレイヤーで選択範囲を作る ここまで
 
// アクティブレイヤーのサイズを求める
var layObj = activeDocument.selection.bounds;
var x1 = parseInt(layObj[0]);
var y1 = parseInt(layObj[1]);
var x2 = parseInt(layObj[2]);
var y2 = parseInt(layObj[3]);
 
// X,Y,W,H を取得
var x = x1;
var y = y1;
var w = eval(x2-x1);
var h = eval(y2-y1);
 
 // 選択範囲を解除
activeDocument.selection.deselect();
 
// =======================================================
 
/* ダイアログ関係 */
 
// ダイアログオブジェクト = new Window("dialog",タイトル,[左座標,上座標,右座標,下座標])
uDlg = new Window('dialog','シェイプサイズ変更',[100,100,410,285]);
// ダイアログを画面に対して中央揃えに
uDlg.center();
 
// ラベル W
uDlg.sText = uDlg.add("statictext",[20,23,275,10+15], "W");
// テキスト入力 W
uDlg.w = uDlg.add("edittext",[40,20,110,15+25], w);
// ラベル H
uDlg.sText = uDlg.add("statictext",[130,23,275,10+15], "H");
// テキスト入力 H
uDlg.h = uDlg.add("edittext",[150,20,220,15+25], h);
// ラベル X
uDlg.sText = uDlg.add("statictext",[20,73,275,10+15], "X");
// テキスト入力 X
uDlg.x = uDlg.add("edittext",[40,70,110,0+90], x);
// ラベル Y
uDlg.sText = uDlg.add("statictext",[130,73,275,10+15], "Y");
// テキスト入力 Y
uDlg.y = uDlg.add("edittext",[150,70,220,0+90], y);
// 注意書き
uDlg.sText = uDlg.add("statictext",[20,110,285,10+15], "数値にずれがある場合は使用しないで下さい。");
 
// OKボタン
uDlg.okBtn = uDlg.add("button",[60,145,150,145+25], "OK", { name:"ok"});
// キャンセルボタン
uDlg.cancelBtn = uDlg.add("button", [170,145,260,145+25], "キャンセル", {name: "cancel"});
// 複製ボタン
uDlg.copyBtn = uDlg.add("button",[240,15,295,25+15], "複製", { name:"copy"});
 
// 複製ボタンが押されたら複製処理
uDlg.copyBtn.onClick = function() {
	// 実行フラグに2を代入
	do_flag = 2;
	uDlg.close();
}
 
// キャンセルボタンが押されたらキャンセル処理（ESCキー含む）
uDlg.cancelBtn.onClick = function() {
	// 実行フラグに0を代入
	do_flag = 0;
	uDlg.close();
}
 
// ダイアログを表示
uDlg.show();
 
// =======================================================
/* シェイプを移動し、レイヤー名をリネーム */
 
// 実行フラグが1（OKボタンが押された）であれば
if (do_flag == 1) {
	// 現在のレイヤーの r の数値を取得する関数を実行
	get_layer_r();
	// シェイプを移動する関数（107行目）を実行
	move_shape();
	// シェイプをリサイズする関数（89行目）を実行
	resize_shape();
	// アクティブレイヤーをリネームする関数（142行目）を実行
	rename_layer();
}
 
// 実行フラグが2（複製ボタンが押された）であれば
if (do_flag == 2) {
	// 現在のレイヤーの r の数値を取得する関数を実行
	get_layer_r();
	// レイヤーを複製する関数を実行
	layer_copy();
	// シェイプを移動する関数（107行目）を実行
	move_shape();
	// シェイプをリサイズする関数（89行目）を実行
	resize_shape();
	// アクティブレイヤーをリネームする関数（142行目）を実行
	rename_layer();
}
 
// =======================================================
/* 以下関数 */
 
/* 現在のレイヤーの r の数値を取得する関数 */
// グローバル変数 number_r と layer_name_flagを宣言
var number_r;
var layer_name_flag;
function get_layer_r() {
	// アクティブなレイヤーのレイヤー名を取得
	var layer_name = activeDocument.activeLayer.name;
	// try {} の中を実行してみて、もしエラーが出れば catch {} の中を実行
	try {
		// 数値を取得し、変数 number に代入
		var number = layer_name.match(/\d+/g);
		// 変数 number の3つめの値を number_r に代入
		number_r = number[2];
		layer_name_flag = true;
	} catch(error) {
		// エラーが出た場合は layer_name_flag 変数に false を代入
		layer_name_flag = false;
	}
}
 
/* シェイプをリサイズする関数*/
function resize_shape() {
	// 新しいWの%を求める（ダイアログで入力されたW÷現在のW×100）
	var new_w_per = eval(eval(uDlg.w.text)/w*100);
	// 新しいHの%を求める（ダイアログで入力されたH÷現在のH×100）
	var new_h_per = eval(eval(uDlg.h.text)/h*100);
 
	// try {} の中を実行してみて、もしエラーが出れば catch {} の中を実行
	try {
		// レイヤーのリサイズ（Wの%, Hの%）
		activeDocument.activeLayer.resize(new_w_per, new_h_per);
	} catch(error) {
		alert('リサイズしたいレイヤーが選択されていません。');
	}
}
 
/* レイヤーを複製する関数 */
function layer_copy() {
	// 現在のレイヤーを複製
	activeDocument.activeLayer.duplicate();
}
 
/* シェイプを移動する関数 */
function move_shape() {
	// 相対値で何px移動すべきか求める
	var new_x = 0;
	var new_y = 0;
 
	// X分岐フラグ = ユーザーが入力したX - 現在のX
	// ユーザーに入力させた値は parseInt() で数値に（そうしないと文字列扱い→8進数扱いになる）
	flag_x =  parseInt(eval(uDlg.x.text)) - x;
 
	// ユーザーが入力したX と 現在のX が等しくなければ
	if (parseInt(eval(uDlg.x.text)) != x) {
		// ユーザーが入力したX - 現在のX
		new_x = parseInt(eval(uDlg.x.text) - x);
	}
 
	// Y分岐フラグ = ユーザーが入力したY - 現在のY
	flag_y =  parseInt(eval(uDlg.y.text)) - y;
 
	// ユーザーが入力したY と 現在のY が等しくなければ
	if (parseInt(eval(uDlg.y.text)) != y) {
		// ユーザーが入力したY - 現在のY
		new_y = parseInt(eval(uDlg.y.text) - y);
	}
 
	// サイズ変更された場合、その半分の値だけ移動（左上基準でサイズ変更）
	var new_x2 = eval(eval(uDlg.w.text) - w) / 2;
	var new_y2 = eval(eval(uDlg.h.text) - h) / 2;
	new_x = new_x + new_x2;
	new_y = new_y + new_y2;
 
	// try {} の中を実行してみて、もしエラーが出れば catch {} の中を実行
	try {
		// レイヤーの移動（Xの相対値, Yの相対値）
		activeDocument.activeLayer.translate(new_x, new_y);
	} catch(error) {
		alert('リサイズしたいレイヤーが選択されていません。');
	}
}
 
/* アクティブレイヤーのレイヤー名を変更する関数 */
function rename_layer() {
	// レイヤー名が「W 100 H 100 R 0」のような形式で、Rの数値を取得できていれば
	if (layer_name_flag === true) {
		// レイヤー名をリネーム: 右側が新しいレイヤー名（例: W 100   H 100   R 0）
		activeDocument.activeLayer.name = "W " + parseInt(eval(uDlg.w.text)) + "   H " + parseInt(eval(uDlg.h.text)) + "   R " + parseInt(number_r);
	}
}

// ドキュメントの解像度が 72ppi でなければアラート
if (activeDocument.resolution !== 72) {
	alert("解像度が72ppiではありません。「編集＞画像解像度」から解像度 72 pixel/inch にしてください。");
}

// 現在のレイヤーで選択範囲を作る
try {
	var idsetd = charIDToTypeID( "setd" );
	/* 略 */
	executeAction( idsetd, desc85, DialogModes.NO );
} catch(e) {
	alert("選択されているレイヤーがありません。");
}
// 現在のレイヤーで選択範囲を作る ここまで

// X,Y,W,H を取得
var x = x1;
var y = y1;
var w = eval(x2-x1);
var h = eval(y2-y1);

/* 現在のレイヤーの r の数値を取得する関数 */
// グローバル変数 number_r と layer_name_flagを宣言
var number_r;
var layer_name_flag;
function get_layer_r() {
	// アクティブなレイヤーのレイヤー名を取得
	var layer_name = activeDocument.activeLayer.name;
	// try {} の中を実行してみて、もしエラーが出れば catch {} の中を実行
	try {
		// 数値を取得し、変数 number に代入
		var number = layer_name.match(/\d+/g);
		// 変数 number の3つめの値を number_r に代入
		number_r = number[2];
		layer_name_flag = true;
	} catch(error) {
		// エラーが出た場合は layer_name_flag 変数に false を代入
		layer_name_flag = false;
	}
}

	/* 略 */
	// try {} の中を実行してみて、もしエラーが出れば catch {} の中を実行
	try {
		// レイヤーの移動（Xの相対値, Yの相対値）
		activeDocument.activeLayer.translate(new_x, new_y);
	} catch(error) {
		alert('リサイズしたいレイヤーが選択されていません。');
	}

/* アクティブレイヤーのレイヤー名を変更する関数 */
function rename_layer() {
	// レイヤー名が「W 100 H 100 R 0」のような形式で、Rの数値を取得できていれば
	if (layer_name_flag === true) {
		// レイヤー名をリネーム: 右側が新しいレイヤー名（例: W 100   H 100   R 0）
		activeDocument.activeLayer.name = "W " + parseInt(eval(uDlg.w.text)) + "   H " + parseInt(eval(uDlg.h.text)) + "   R " + parseInt(number_r);
	}
}