【JSX】ScriptingListenerで記録したコードを整理しよう

カテゴリー: JSX(Photoshop) | 投稿日: 2021年6月27日

　今回はPhotoShopの自動化するときに便利な、ScriptingListenerの話です。

　自動化するときにはすごく重宝するのですが、いかんせんそのままコピーして使うにはコードが見にくい😓
　そこでコードをわかりやすく整理して、より理解しやすくしていきたいと思います。

準備：コードを記録する

　まずはコードを記録しないと始まらないので、ひとつコードを記録します。
　今回はべた塗レイヤーを作成します。
　出来上がったコードがこちら。

var idMk = charIDToTypeID( "Mk  " );
    var desc218 = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
        var ref1 = new ActionReference();
        var idcontentLayer = stringIDToTypeID( "contentLayer" );
        ref1.putClass( idcontentLayer );
    desc218.putReference( idnull, ref1 );
    var idUsng = charIDToTypeID( "Usng" );
        var desc219 = new ActionDescriptor();
        var idType = charIDToTypeID( "Type" );
            var desc220 = new ActionDescriptor();
            var idClr = charIDToTypeID( "Clr " );
                var desc221 = new ActionDescriptor();
                var idRd = charIDToTypeID( "Rd  " );
                desc221.putDouble( idRd, 255.000000 );
                var idGrn = charIDToTypeID( "Grn " );
                desc221.putDouble( idGrn, 0.003891 );
                var idBl = charIDToTypeID( "Bl  " );
                desc221.putDouble( idBl, 0.003891 );
            var idRGBC = charIDToTypeID( "RGBC" );
            desc220.putObject( idClr, idRGBC, desc221 );
        var idsolidColorLayer = stringIDToTypeID( "solidColorLayer" );
        desc219.putObject( idType, idsolidColorLayer, desc220 );
    var idcontentLayer = stringIDToTypeID( "contentLayer" );
    desc218.putObject( idUsng, idcontentLayer, desc219 );
executeAction( idMk, desc218, DialogModes.NO );

　べた塗レイヤーを作成しているところを抜き出すとこんな感じ。

14行から19行あたりにカラーっぽいものがあるし、なんとなくここだってわかるね

　必要な部分を抜き出せたら、さっそく整理をしていきます😄

コードを整理する

IDを整理する

　まず、このコードが見にくい一つの原因が、idと名のついている変数です。
　たとえば・・・

                var idRd = charIDToTypeID( "Rd  " );
                desc221.putDouble( idRd, 255.000000 );

　この部分ですが、idRdにcharIDToTypeID( “Rd ” )を代入していますが、これはちょっと見にくいです。
　どうしても変数を使わなければいけないところではないので、さくっと一行にまとめます。

desc221.putDouble( charIDToTypeID( "Rd  " ), 255.000000 );

　これで１行減りました😆
　こんな感じで、idと書いてある変数を、次々に置き換えていきます⭐

間違えると動かなくなっちゃうから、慎重にね

　全部置き換えるとこんな感じになります

var desc218 = new ActionDescriptor();
var ref1 = new ActionReference();
ref1.putClass( stringIDToTypeID( "contentLayer" ) );
desc218.putReference( charIDToTypeID( "null" ), ref1 );
var desc219 = new ActionDescriptor();
var desc220 = new ActionDescriptor();
var desc221 = new ActionDescriptor();
desc221.putDouble( charIDToTypeID( "Rd  " ), 255.000000 );
desc221.putDouble( charIDToTypeID( "Grn " ), 0.003891 );
desc221.putDouble( charIDToTypeID( "Bl  " ), 0.003891 );
desc220.putObject( charIDToTypeID( "Clr " ), charIDToTypeID( "RGBC" ), desc221 );
desc219.putObject( charIDToTypeID( "Type" ), stringIDToTypeID( "solidColorLayer" ), desc220 );
desc218.putObject( charIDToTypeID( "Usng" ), stringIDToTypeID( "contentLayer" ), desc219 );
executeAction( charIDToTypeID( "Mk  " ), desc218, DialogModes.NO );

　行数が減り、だいぶすっきりしました😊
　しかしこれでもまだ何が何なのかよくわからない・・・なので、次のステップへ移ります。

並び変える

　まず見やすくする方法の一つとして、descとrefの宣言場所を変更します。
　例えば・・・

var desc218 = new ActionDescriptor();

　これが一行目にあります。
　そして注意すべきは「desc218」（番号は人によって違います）
　しかし実際にこれを使っているのがどこかと見ていくと、使っているのは４行目なんですね。

var desc218 = new ActionDescriptor();
var ref1 = new ActionReference();
ref1.putClass( stringIDToTypeID( "contentLayer" ) );
desc218.putReference( charIDToTypeID( "null" ), ref1 );

　これを見やすくするために、一行目にあったこれを３行目と４行目の間に持っていきます。

var ref1 = new ActionReference();
ref1.putClass( stringIDToTypeID( "contentLayer" ) );
var desc218 = new ActionDescriptor();
desc218.putReference( charIDToTypeID( "null" ), ref1 );

　こんな感じに、初めて使われているタイミングの直前に持っていきます。
　それをコード全体でやってみると、こんな感じになります。

var ref1 = new ActionReference();
ref1.putClass( stringIDToTypeID( "contentLayer" ) );
var desc218 = new ActionDescriptor();
desc218.putReference( charIDToTypeID( "null" ), ref1 );
var desc221 = new ActionDescriptor();
desc221.putDouble( charIDToTypeID( "Rd  " ), 255.000000 );
desc221.putDouble( charIDToTypeID( "Grn " ), 0.003891 );
desc221.putDouble( charIDToTypeID( "Bl  " ), 0.003891 );
var desc220 = new ActionDescriptor();
desc220.putObject( charIDToTypeID( "Clr " ), charIDToTypeID( "RGBC" ), desc221 );
var desc219 = new ActionDescriptor();
desc219.putObject( charIDToTypeID( "Type" ), stringIDToTypeID( "solidColorLayer" ), desc220 );
desc218.putObject( charIDToTypeID( "Usng" ), stringIDToTypeID( "contentLayer" ), desc219 );
executeAction( charIDToTypeID( "Mk  " ), desc218, DialogModes.NO );

　見やすくなったか？と思われるかもしれませんが、ここで同じdescを使っているところをひと固まりとして、間に改行を入れていきます。

var ref1 = new ActionReference();
ref1.putClass( stringIDToTypeID( "contentLayer" ) );

var desc218 = new ActionDescriptor();
desc218.putReference( charIDToTypeID( "null" ), ref1 );

var desc221 = new ActionDescriptor();
desc221.putDouble( charIDToTypeID( "Rd  " ), 255.000000 );
desc221.putDouble( charIDToTypeID( "Grn " ), 0.003891 );
desc221.putDouble( charIDToTypeID( "Bl  " ), 0.003891 );

var desc220 = new ActionDescriptor();
desc220.putObject( charIDToTypeID( "Clr " ), charIDToTypeID( "RGBC" ), desc221 );

var desc219 = new ActionDescriptor();
desc219.putObject( charIDToTypeID( "Type" ), stringIDToTypeID( "solidColorLayer" ), desc220 );

desc218.putObject( charIDToTypeID( "Usng" ), stringIDToTypeID( "contentLayer" ), desc219 );

executeAction( charIDToTypeID( "Mk  " ), desc218, DialogModes.NO );

　どうでしょうか？　なんとなくですが、このコードが何をしているか、見えてくるんじゃないでしょうか😊

　さてこれで、コードの検証ができそうです。
　ブロック単位でざっくり検証してみたいと思います。

今回はこのまま進んじゃうけど、descの218や219もわかりやすく1からの通し番号を振ってもいいかも

コードのざっくり検証

var ref1 = new ActionReference();
ref1.putClass( stringIDToTypeID( "contentLayer" ) );

　「contentLayer、について話をするぜ！」って感じっぽいですね。
　ちなみにcontentLayerはべた塗りだけじゃなく、パターンやグラデーションもこれにあたるみたいです。
　パターンやグラデーションのコードを記録すると、同じくこれが登場します。

var desc218 = new ActionDescriptor();
desc218.putReference( charIDToTypeID( "null" ), ref1 );

　特にここに設定するものはありません、って感じかな？

var desc221 = new ActionDescriptor();
desc221.putDouble( charIDToTypeID( "Rd  " ), 255.000000 );
desc221.putDouble( charIDToTypeID( "Grn " ), 0.003891 );
desc221.putDouble( charIDToTypeID( "Bl  " ), 0.003891 );

　「色はこれです！」と言ってますね、わかります。

var desc220 = new ActionDescriptor();
desc220.putObject( charIDToTypeID( "Clr " ), charIDToTypeID( "RGBC" ), desc221 );

　「カラーはさっき話したやつでお願いします」ってことみたいですね。
　カラーを設定したdesc221を引っ張り出してきて、RGBC（=RGBColor）だよ、って言ってるみたいですし。

var desc219 = new ActionDescriptor();
desc219.putObject( charIDToTypeID( "Type" ), stringIDToTypeID( "solidColorLayer" ), desc220 );

　「タイプはsolidColorLayerだよ」と読めます。
　要するにべた塗りレイヤーだよと言ってるんですね。

desc218.putObject( charIDToTypeID( "Usng" ), stringIDToTypeID( "contentLayer" ), desc219 );

　再度「contentLayerの話ね」って感じ？

executeAction( charIDToTypeID( "Mk  " ), desc218, DialogModes.NO );

　「作れ！」ってことですね。MK(=make)ですしね。

おしまい

　実のところコードをコピペして使うだけなら、そこまで必要ないんですけどね😅
　ただ、多少のカスタマイズをしたいとか、元のコードのままだとどうも気持ち悪い・・・という場合に。

　けれど、時々あるのが整理をしていくと「あれ？これ何に使ってるの？」と思われるものが多々出てきて、実際にそこを削除しても正常に動く場合も多いです😓
　どうしても機械的に出力している関係だったり、昔の名残的なものもあるのかな～って感じです。

　何はともあれ、コードをざっくりとでも理解するのは大事なことだと思うので、ぜひ試してみてください😊

　べた塗りレイヤーに関しては、カラーの取得のサンプルコードも含めて以前記事にしたものがあります。
　よろしければこちらもあわせてどうぞ。

にゃっほい屋２号店
【JSX】べた塗りレイヤーを作成、カラーを変更・取得してみた
http://nyahhoiya.com/nigoten/programming/jsx_photoshop/1074.html
　今回は調整レイヤーの一つである『べた塗りレイヤー』をJSXで色々したいと思います。　試してみたのはこんなところです。べた塗りレイヤーを作成するべた塗りレイヤーのカラーを変更するべた塗りレイヤーのカラーを取得する前回記事にした境界線の線幅とカラーを設定、取得する方法よりかは比較的簡単にできました。ではまずはべた塗りレイヤーを作成をやっていこうと思います。べた塗りレイヤーを作成するコードfunction createSolidColor(r,g,b){ var ref1 = new ActionReference(); ref1.putClass( stringIDToTypeID( "conte...

私（S.Fuka）が企画、シナリオ、グラフィックを担当させていただきました、にゃっほい屋のゲームがSteamにて配信中です。
もし興味がありましたらSteamページだけでもご覧になっていただければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です