【AEスクリプト】ウインドウにもパネルにもなるAdobe公式UIスクリプトの解説

スクリプトのUIを作る際、独立したウインドウにもできるし、ドッキング可能なパネルにすることもできます。両者のインストール方法の違いはファイルの置き場所が違うだけなんですが、UIの書き方にもほんの少し違いがあります。

例えば、ウインドウにしたい場合はウインドウを作ってから、そこにボタンとかを追加します。

var myWindow = new Window("palette", "My Tools", [100, 100, 300, 300]);
myWindow.add("button", [10, 10, 100, 30], "Tool #1");

それに対して、パネルを作る場合はそのままそこ（this）にボタンとかを追加します。
スクリプトをScriptUI Panelsフォルダに入れたときに限り、thisがパネル自身を指すという仕様にしてあるからですね。

var myPanel = this;
myPanel.add("button", [10, 10, 100, 30], "Tool #1");

どちらか専用で作る場合は書き分ければいいんですが、どっちにも使える書き方はないもんでしょうか？
実はそれが、Adobeのデベロッパ用ページの下のほうのAE Scripting Guide at AE Enhancersの“Overview”に載っています。今回はそれが「いったい何をやっているのか？」解説をしようかと思います。

以下、載っているコードです。

function createUI(thisObj) {
    var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My Tools", [100, 100, 300, 300]);
    myPanel.add("button", [10, 10, 100, 30], "Tool #1");
    return myPanel;
}
var myToolsPanel = createUI(this);

解説

結論から書けば、

• スクリプトファイルの置き場所をScriptUI Panelsフォルダにすれば、thisがパネル自身を指すような仕様にしてある。
• が、他のフォルダの場合はそうしていない。
• ならば、thisが何なのかを調べて、thisがパネルならパネル用の書き方をして、パネルじゃないならウインドウ用の書き方をすればいいじゃない。

このような処理をしています。

具体的に見ていきましょう。
一行ずつの解説だと把握しづらい作りなので、全部日本語に訳してみます。

任意のthisObjをインプットできるcreateUIという装置 {
    var myPanel = インプットされたthisObjがPanelであればthisObj自身、Panelでなければnew Windowとします。
    myPanelにボタンを追加します。
    myPanelをアウトプットします（装置完成）。
}
var myToolsPanel = createUI装置を発動させ、そのアウトプットを入れます(インプットはthisです)。

1～5行目ですが、function〇〇(インプット){処理＋最後にアウトプット}の形で、「何かをインプットしたらそれを処理して何らかのアウトプットを出力する」装置を作ることができます。

そして、6行目を見てください。最終的にcreateUI装置にはthisがインプットされます。つまり、createUI装置は任意のthisObjをインプットできますが、今回は必ずthisが入るということです。なので「装置内のthisObjとはthisのことだ」と認識して問題ないです。

あとは順に見ていきましょう。2行目がメインの処理ですね。
myPanelという変数になんらかのモノを入れていますが、そのなんらかを条件分岐させています。
thisObj（つまりthis）がPanelであればthisObj（つまりthis）自身、Panelでなければnew Windowを入れています。解説の冒頭で書いた処理と一致していますね。これで、myPanelには適切などちらかが入ったわけです。

var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My Tools", [100, 100, 300, 300]);
var myPanel = インプットされたthisObjがPanelであればthisObj自身、Panelでなければnew Windowとします。

*注意
?は三項演算子といい、初学者にはわかりにくいですね。調べてみればわかりますが、if文で置き換え可能なただの条件分岐です。またinstanceofは、種類としては==とかと一緒で、trueかfalseが返ってきます。『〇〇 instanceof ××』の形で「〇〇は××という設計図からできているか否か」という意味です。この場合は「Panelという設計図からできているか否か」つまり「種類はPanelか否か」ということです。

3行目はmyPanelにボタンを加えているだけです。

myPanel.add("button", [10, 10, 100, 30], "Tool #1");
myPanelにボタンを追加します。

6行目です。1～5行目は装置であり、そのままでは処理されません。なので装置を発動させつつアウトプットをmyToolsPanelという変数に入れています。これで、あとはmyToolsPanelをUIパネルorウインドウとして扱えばよいわけです。

var myToolsPanel = createUI(this);
var myToolsPanel = createUI装置を発動させ、そのアウトプットを入れます(インプットはthisです)。

以上です！

補足

サンプルの記述はかなり簡易的に書いてあり、そのままでは使いづらいのでちょっと記述を足してみました。

function createUI(thisObj) {
    var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "My Tools", [100, 100, 300, 300]);
    //ボタンを使いやすいようにmyButtonという変数に入れました。
    myPanel.myButton = myPanel.add("button", [10, 10, 100, 30], "Tool #1");
    return myPanel;
}
var myToolsPanel = createUI(this);

//以下の記述が無いとウインドウの場合は画面上に出現しないので、書いておきます。
if (myToolsPanel instanceof Window){
    myToolsPanel.center();
    myToolsPanel.show();
}

//クリック時の処理をここに書けます。
myToolsPanel.myButton.onClick = function(){
    alert("OK");
}

以上です！
コピペで使うもよし、読み解いて学習に使うもよしの公式サンプルですね。