​​ScriptUI事始め

​​はじめに

​​ScriptUserInterface（以下SUI）は、ExtendScriptが動作するAdobeアプリケーションで利用でき、ほとんど同じコードでほとんど同じ見かけのユーザーインターフェイス（UI）を生成することができます。
​​今回は事始めということで、SUIの導入部分についてです。
​​とはいうものの、SUIについては資料が少なく（特に日本語の資料は皆無）、僕の場合は広大なネットの海を漂いながら拾い集めた独学の知識です。間違っているところ、もっといい書き方などあるかもしれまんせが、そこはご容赦ください。
​​動作確認はMac 10.12、ExtendScriptToolkit CC、InDesign CC2017です。Windowsでも動作するレベルのものしか書いていませんが、Windowsではインターフェイスの見かけが若干異なります。

​​Hello World!

​​まずは、やってみましょう！
​​ExtendScriptToolkit（以下ESTK）で以下のコードを入力してください。
​​var myDlg = new Window ("palette", "title");
​​myDlg.add ("statictext", undefined, "Hello World!");
​​myDlg.show ();
​​
 
Dropbox file icon
01_firstCode
​​
​​入力できたら、ESTKで実行してください。
​​
 
User-uploaded image: +2018-03-23+9.51.17.png
​​
​​こんな小さなウィンドウが現れたと思います。１行ずつ見ていきましょう。

​​Windowオブジェクトの生成

​​まずはWindowオブジェクトを生成します。それが１行目です。先程のコードでは引数を２つ省略していますので、改めてオブジェクトモデルビューア（以下OMV）から参照してみます。
​​new Window (type, title, bounds, properties)

​​Window Type

​​typeには３種類あります。”dialog”、”palette”、”window”です。
​​dialogはウィンドウがモーダルダイアログになり、それ以外はモーダレスダイアログ（モードレスダイアログ）になります。要するに、dialogはSUIで表示しているウィンドウ以外、アプリケーションを操作できなくするものです。
​​先程のコードの”palette”の部分を”dialog”にして、違いを観察してみてください。
​​左上の閉じるボタンが消えましたよね。
​​
 
User-uploaded image: +2018-03-23+10.01.45.png
​​
​​このままではアプリケーションが操作できないまま固まります（一応、Escキーでキャンセルすることはできます）。
​​というわけで、dialogとpaletteの違いを覚えましょう（windowについては触れません）。
​​（InDesignで実行する上ではもうひとつ大事な違いがありますが、後述します）
  • ​​dialogはモーダルダイアログになり、アプリケーションを操作できなくする
  • ​​paletteではウィンドウを表示中でもアプリケーションを操作でき、閉じるボタンが標準で付いている

​​title

​​titleは、Windowオブジェクトのタイトルバーに表示させる文字列です。

​​bounds

​​boundsは生成するWindowオブジェクトの位置とサイズをpixel単位で指定します。しかし、SUIにはレイアウトのためのさまざまな方法が用意されているので、あえてboundsを指定する必要あありません。

​​properties

​​propertiesは、その名の通りWindowオブジェクトのプロパティを指定できます。これはOMVから引用したいところですが、とても長いので簡単に列挙します。
  • ​​resizeable（ウィンドウのリサイズを許可：デフォルトはfalse）
  • ​​su1PanelCoordinates（Photoshopのみ有効）
  • ​​maximizeButton（最大化ボタンの許可）
  • ​​minimizeButton（最小化ボタンの許可）
  • ​​independent（ウィンドウの独立：Windowsのみ有効、デフォルトはfalse）
  • ​​borderless（ウィンドウのタイトルと境界線を非表示：デフォルトはfalse）
​​以上の６つのプロパティを、Windowオブジェクト生成時に定義することができます。言い方を変えれば、生成した後では変更できないプロパティです。必ず生成時に一緒に定義する必要があります。

​​サンプル

​​以下はWindowオブジェクト生成のサンプルです。いろいろ試してみてください。
​​new Window ("dialog", "", undefined, {borderless: true});
​​new Window ("palette", "リサイズ", undefined, {resizeable: true});
​​new Window ("palette", "ボーダレス", undefined, {resizeable: true, borderless: true});
​​このように、４つめの引数であるpropertiesのみ、{ }で囲んで各要素を定義します。
​​{ キー: 値, キー: 値… }