✨

【Photoshop+JSX】ScriptingListenerで記録したコードの整理の仕方

2022/04/29に公開

Photoshop

JSX

tech

はじめに

この記事はPhotoshopの自動化をする時に便利なScriptingListenerで出力されたコードを整理する方法です。

ScriptingListenerとは

ScriptingListenerとはPhotoshop上で行った操作をJavaScriptとVBScriptのコードで出力してくれるものです。
PhotoshopはJavaScript(JSX)で一部の操作を自動化することが可能なので、ScriptingListenerを使えばコピペをするだけで、操作の再現が可能となっています。

▼ScriptingListenerプラグインのDL

▼参考サイト

しかし操作を再現するだけならアクション機能を使えば十分です。
JSXを使った自動化は本来であれば、より柔軟な自動化を行うことができます。
そのためにScriptingListenerで出力されたコードをカスタマイズしやすいように整理整頓していきます。

ScriptingListenerの欠点

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 );

実際はもっと長いですが、べた塗レイヤーを作成している部分だけを抜き出しています。

どうしてべた塗部分がわかるか？
というとハイライトされている部分が肝になります。

この値が作成したべた塗レイヤーのRGB値と一致しているはずです。
なのでこの塊がべた塗レイヤーを作成しているとわかります。

コードを整理する

idを整理する

では早速コード整理していきましょう。

このコードが見にくい原因の一つはidと名前の付いている変数です。
例えば…。

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

この部分ですが必ずしもidRdを介す必要はありません。。
コードが長くなってしまう原因になるのでサクッと一行にまとめます。

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();

これが1行目にあります。
しかし実際にこの変数は使っているのは4行目にあたります。

見やすくするためにdescとrefの宣言を、初めて使われているタイミングの直前へ持っていきます。

それを一塊として改行を入れるとこうなります。

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 );

どうでしょう？
最初に比べるとだいぶスッキリしましたし、このコードが何をしているかも見えてくるのではないでしょうか。

これで今回の記事の目的であるコードの整理の仕方は終わりです。
この後はおまけとしてコード内容をざっくりと検証してみます。

コードのざっくり検証してみる（かなり適当）

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

contentLayerが指定されてます。
contentLayerはベタ塗りだけではなくパターンやグラデーションでもこれにあたるみたい。

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

先ほどのref1が指定されていますね。
ここで作成されたdesc218はひとまず置いておかれます。

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

RGBを作っていますね。

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

先ほどのRGBが指定されてますし、desc220は色情報のようです。

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

タイプがべた塗レイヤーだと指定されています。
先ほどのdesc220も指定されていることから、色も指定されている。

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

最初の方に作ったdesc218にべた塗レイヤーの設定が追加されました。
ここでこれまで指定してきたものがdesc218にまとまりました。

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

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

おしまい

いかがだったでしょうか。
実のところコピペをして使うだけならここまでコードを整理する必要はありません。
ただ個人的には元のコードのままにしておくのは、少々気持ち悪いと感じてしまい整理してみました。

しかし実際に整理してみると「あれ？これ何に使ってるの？」と思われるものが多々出てきて、実際にそこを削除しても正常に動く場合も多いです。

どうしても機械的に出力している関係だったり、昔の名残なものもあるようです。

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

脚注

▼この記事は過去に個人ブログに書いた記事を再編集したものです。
http://nyahhoiya.com/nigoten/programming/jsx_photoshop/1147.html ↩︎