ScriptUIPanelで起動する

ドッキングパネルでももちろん文字列方式でパーツの追加が出来る。

例えば、以下のコードをウィンドウでなく、パネル用に書き換えたいとする。

//ウィンドウ専用のコード

var w = new Window('dialog{\

et : EditText{ characters : 20 }\

gr : Group{\

ok : Button{ text : "OK" }\

cancel : Button{ text : "cancel" }\

}\

}');

w.show();

ウィンドウの時はこんな感じで、ウィンドウ作成と同時に一気にパーツをぶち込むことで、一度もadd()を使用しないということも出来る。

しかし、ドッキングパネルの時はそれが出来ない。スクリプト実行と同時に先にパネルが出来てしまうから。ウィンドウで例えるなら、

var w = new Window('dialog');

これだけ先にやられちゃったという感じ。ウィンドウだけを先に作った状態。なのでこのwに対して1度はadd()しないといけないよね。

今回はウィンドウではなく、パネルであるthisに対してadd()すればいいのだが、ウィンドウの時みたいにまとめて一発でバチーンと済ませたい。

自分でやってみてほしい。

やった？

つまづいた？

グループを噛ませてadd()を一回にまとめる

まずはウィンドウ直下に追加してるEditText。今回はthisにedittextを追加するから...

this.add('edittext{ characters : 20 }')

と書いて、気づくだろう。「え、グループどうしたらいいん？」と。

さっきはウィンドウの直下にEditTextとGroupがあった。パネルの直下に追加しようと思ったらまたadd()しないとダメなん？

まぁそれも方法の1つ。その場合、次のようにする。

//パネル起動専用のコード

this.et = this.add('edittext{ characters : 20 }');

this.gr = this.add('group{\

ok : Button{ text : "OK" }\

cancel : Button{ text : "cancel" }\

}');

this.layout.layout();

add()すると大体の場合、何かしら変数で受けないといけない（this.et = ~とかthis.gr = ~とか）が個人的には受け付けない。めんどくさい。

そんな「add()は一回で十分です！！」というadd()嫌い派の方にはこちらをおすすめする。

//パネル起動専用のコード

this.gr = this.add('group{alignment : ["fill","fill"],\

et : EditText{ characters : 20 }\

gr : Group{\

ok : Button{ text : "OK" }\

cancel : Button{ text : "cancel" }\

}\

}')

this.layout.layout();

一度トップレベル（ウィンドウorパネルのこと）の直下にグループを作成する。その中に全てのパーツを入れていくことで、add()は一回で済む。注意したいのは、このグループオブジェクトにalignment : ["fill","fill"]を設定しておくこと。このグループはadd()回数を減らすためのダミーな存在。そいつが各パーツのレイアウト時に邪魔になってはいけない。（最上位のグループのサイズが足りてないから正しく配置が出来ない、とか）

alignment : ["fill","fill"]にしておくことで、トップレベルにピッタリくっつくのでそれより内側に配置するパーツの邪魔にならない。

パネル起動する前提でthisにボタンなど追加していったとしても、ユーザーがパネル起動してくれる保証がどこにある？夢見てんじゃないよ！

「みなさ～ん！パネル起動前提のスクリプトなので『ファイル』メニューからは実行しないでくださーい！！必ずウィンドウメニューから実行してくださ～い！！」て言う？誰も聞かんよ、そんなの。そもそもその違いもよくわかってないもの。「バグりました。起動できません。怖いからもう使いません」。ユーザーに期待して傷つくのはあなたよ！！

普通に実行されてしまった場合、thisにはパネルではなくグローバル変数が入っているので、

this.add('button');

なんて、add()なんか使っちゃったりしちゃってエラーになる。それはもうスクリプト作者であるあなたが予測して回避しておくべきこと。パネルで起動されたのか違うのかを判断して、ソースコードを書き分けるべき。

instanceofを使って、ウィンドウ/パネルどちらの起動かの判別

パネル起動されたかどうかというのはthisの中身で判断できる。

• • • 「this = パネルオブジェクト」⇒ドッキングパネルでの起動

    • 「this = グローバルオブジェクト」⇒普通の起動

このどっちかであるので、「thisがPanelオブジェクト かどうか」を調べればいい。

それにはこうする。

this instanceof Panel

instanceofは雑に言うと、「instanceofの左側のオブジェクト（this）の種類は右側のやつ（Panel）ですか？」というのを調べることが出来る。true/falseで返ってくる。上の例だと、thisがPanelオブジェクトの時はtrue、それ以外のときはfalseが返ってくる。

余談だが、これを使ってコンポ（CompItem）、AVレイヤー（AVLayer）、シェイプレイヤー（ShapeLayer）、プロパティ（Property）、ファイル（File）、UIのボタン（Button）などオブジェクトの種類をいろいろ調べることが出来る。スクリプト作るなら絶対に使うから覚えておく。

三項演算子を使っての場合分け

あとは簡単、パネル起動の時はthisをウィンドウ代わりに使えばいいし、パネル起動じゃ無い時はnew Window()でウィンドウを作成すれば良い。つまり、

if(this instanceof Panel){

var w = this;

}

else{

var w = new Window('dialog');

}

こんな感じで書けば、変数wにはパネルかウィンドウ、適切なものが入る。その後、wにadd()で他のパーツを追加していけばいい。

ただこの書き方、内容の割に行数も取って、あんまり美しくない。

ここで「三項演算子」を使うとよい。三項演算子を使うと先程のコードは次のように書ける。

var w = (this instanceof Panel)? this : new Window('dialog');

分からなかったらググって自分で調べる。今回やってることは難しくなくて、

( A )? B : C;

これは「AがtrueだったらB、falseだったらC」という意味。わからなければ最初のif文でも構わない。

もし「パネル起動しか許さぬ！」という場合は、

if(!(this instanceof Panel)){ alert("パネルじゃないときの処理！！"); }

みたいな風にして判断すればいい。this instanceof Panel全体がtrue/falseになるので!をつけて反転させている。その際、this instanceof Panel全体をカッコでくくっているのも見落とさない。カッコを付けないと

!this instanceof Panel

となり、!がthisにしか適用されないからだ。

これが一番現実的な書き方

というわけで、これが一番正解に近い書き方かしら。ウィンドウかパネルか関係なく、噛ませのグループを入れちゃう。

//これが最も限りなく正解に近い？

var w = (this instanceof Panel)? this : new Window('dialog');

var res = 'group{alignment : ["fill","fill"],\

et : EditText{ characters : 20 }\

gr : Group{\

ok : Button{ text : "OK" }\

cancel : Button{ text : "cancel" }\

}\

}';

w.gr = w.add( res );

w.layout.layout();

if( w instanceof Window ) w.show();

今回はadd()の引数にする文字列を一度変数res（リソース=resourceの略）で作成している。add()内で直接書いてもいいが、見やすさの問題なのでご自由に。

最後の行でif( w instanceof Window ) w.show();としているのは、ウィンドウの時はshow()で表示しないといけないが、パネルの時はshow()してはいけないから。w instanceof Windowでwの中身がウィンドウかどうかを判断している。

ドッキングパネルに対応させる時は、

• • 1. thisがPanelオブジェクトであることを利用する

    2. layout()メソッドを実行するのを忘れない！！

    3. show()してはいけない！！

    4. グループを１つ噛ませることで、add()が一回で済む！！

    5. ハイブリッドに対応させる！！

       1. thisの中身で場合分け！！

       2. ウィンドウの時は逆にshow()が必要！！

といった感じですかね。

長くはなったが、理解すれば、なんてこと無い。

書いてる私自身こんなに長くなると思ってなかったくらいに、簡単なことなので。

ESTKで作成時にF5でデバッグすると通常のウィンドウ起動扱いになるので、パネルでの挙動を確認したければ、

• • • 保存（これ重要）

    • パネルが開いた状態なら閉じる

    • 「ウィンドウ」メニューから起動

を繰り返さないといけない。パネルが出たままだと更新されない。ちゃんとパネルを閉じて、「ウィンドウ」メニューから再度実行する。AEを再起動する必要はない。