JavaScript Tools Guide抜粋

ImageまたはIconButtonコントロールでアイコン画像を表示したり、ListboxまたはDropdownListコントロールで選択可能なアイテムとして文字列の代わりに、または文字列と一緒に画像を表示したりできます。

いずれの場合も、要素の「image」プロパティを設定して画像を定義します。要素のScriptUIImageオブジェクト（名前付きアイコンリソース）、Fileオブジェクトまたは、アイコン画像を含むファイルのパス名、またはそのファイルへのエイリアスまたはショートカットのパス名に設定できます。（39ページの「パスの指定」を参照）。

アイコンの画像データは、Portable Network Graphics（PNG）形式、またはJoint Photographic Experts Group（JPEG）形式にすることができます。これらの形式の詳細については、http：//www.libpng.orgおよびhttp://www.jpeg.org/を参照してください。

要素に表示される画像を変更するには、いつでも画像プロパティを設定またはリセットできます。

スクリプト環境では、名前でスクリプトで使用できるアイコンリソースを定義できます。アイコンリソースを指定するには、コントロールの画像プロパティをリソースのJavaScript名に設定するか、コントロールの作成時にリソースを名前で参照します。たとえば、アプリケーション定義のアイコンリソースでボタンを作成するには：

myWin.upBtn = myWin.add（ "iconbutton"、undefined、 "SourceFolderIcon"）;

たとえば、Photoshop CS6は次のアイコンリソースを定義します。

Step1Icon

Step2Icon

Step3Icon

Step4Icon

SourceFolderIcon

DestinationFolderIcon

スクリプトが、アイコン画像を表示する要素のpreferredSizeまたはsizeプロパティを明示的に設定しない場合、preferredSizeの値はアイコン画像の寸法によって決まります。サイズの値が実際の画像グラフィックのサイズより小さいサイズに明示的に設定されている場合、表示されている画像はクリップされます。画像グラフィックの寸法よりも大きな寸法に設定されている場合、表示される画像は大きなスペースの中央に配置されます。画像は使用可能なスペースに合わせて拡大縮小されることはありません。

リストコントロール（ListBox、DropDownList、TreeView）では、ListItemオブジェクトのセットがリスト内の1つ1つの選択肢を表します。各選択肢には、ListItemのtextプロパティとimageプロパティで指定されたローカライズ可能な文字列、または画像、またはその両方のラベルを付けることができます。

numberOfColumns 作成パラメーターを指定することにより、複数の列を持つようにListBoxを定義できます。デフォルトでは、列の数は1です。複数の列を指定する場合、作成パラメーターを使用して、ヘッダーを表示するかどうか、および各列のヘッダーテキストを指定することもできます。

複数の列を使う場合、リストボックスに追加する各ListItemオブジェクトは、選択可能な行を1つを指します。ListItemオブジェクトのテキストと画像は１列目のラベルになり、subItemsプロパティはその行に表示される他の列のラベルを指定します。

subItemsの値は配列であり、その長さはnumberOfColumnsよりも1少ないです。つまり、配列の最初のメンバーであるListItem.subItems [0]は、2列目のラベルを指します。各メンバーは2つのプロパティを持つJavaScriptオブジェクトで、1つのラベルになります。

{text：displayString、image：imageFileReference}

たとえば、次のフラグメントは、2つの列を持つリストボックスを作成し、2つの選択肢の各列にラベルを作成します。

...

//タイトル付きの2つの列を持つリストボックスを作成します

var list = dlg.add ('ListBox', [0, 0, 150, 75], 'asd', {numberOfColumns: 2, showHeaders: true, columnTitles: ['First Name', 'Last Name']});

//1列目のラベルのテキスト（John）を使って、1行目のアイテムを追加します

var item1 = list.add ('item', 'John');

//その行の2列目にラベル値を追加します。

item1.subItems[0].text = 'Doe';

//1列目のラベルのテキスト（Jane）を使って、2行目のアイテムを追加します

var item2 = list.add ('item', 'Jane');

// 2行目の2列目にラベルテキストと画像を追加します

item2.subItems[0].text = 'Doe';

item2.subItems[0].image = File ("~/Desktop/Step1.png");

...

これにより、図のようなコントロールが作成されます。

列にはヘッダーがあり、2行目の2列目のラベルにはテキストと画像の両方があることに注目してください。

Windowクラスの静的メンバ関数はグローバルに利用でき、標準ダイアログに短いメッセージを表示します。

ホストアプリケーションは、これらのシンプルなダイアログの見た目を制御し、アプリケーションによって表示される他のアラートおよびメッセージボックスと一致します。多くの場合、これらの標準ダイアログを使用することで、独自の専用ダイアログを設計せずとも、ユーザーとの簡単な対話を行うことができます。

Windowクラスの静的メンバ関数alert、confirm、およびpromptを使えば、好きなメッセージと共にこれらのダイアログを表示できます。これらの関数を呼び出すためにWindowオブジェクトを作成する必要はありません。

ScriptUIを使用すると、コントロールを直接描画して外観をカスタマイズできます。これを行うには、onDrawイベントに応答してScriptUIGraphicsオブジェクトのメソッドを呼び出します（「イベントコールバックとリスナーによる動作の定義」（80ページ）を参照）。これらのメソッドは、描画情報をカプセル化するいくつかのヘルパーオブジェクトをパラメーターとして受け取ります。以下のものがあります。

・ScriptUIGraphics

描画メソッドをカプセル化します。graphicsオブジェクトは各コントロールのgraphicsプロパティからアクセス出来ます。

・ScriptUIBrush

塗りに使用されるブラシの設定。

・ScriptUIFont

テキストに使用されるフォントの設定。

・ScriptUIImage

画像の設定。

・ScriptUIPath

描画するパスの設定。

・ScriptUIPen

線に使用されるペンの設定。

これらのオブジェクトの詳細については、155ページの「グラフィックカスタマイズオブジェクト」を参照してください。

ScriptUIGraphicsオブジェクトには、他のグラフィックスオブジェクトを作成するメソッドが含まれています。たとえば、ScriptUIGraphics.newBrush()は、好きな色でScriptUIBrushインスタンスを作成します。これらのグラフィックオブジェクトは、UIが画面に描画される方法を制御するScriptUIGraphicsオブジェクトのプロパティ値として使用されます。たとえば、ブラシオブジェクトをbackgroundColorプロパティに配置すると、背景色がブラシに設定した色になります。

ウィンドウの背景を明るい灰色にするには、次のようにします。

g = myWindow.graphics;

myBrush = g.newBrush（g.BrushType.SOLID_COLOR、[0.75、0.75、0.75、1]）;

g.backgroundColor = myBrush;

Adobe ExtendScript SDKのこれらの例は、グラフィックカスタマイズオブジェクトの使用方法を示しています。

・ColorSelector.jsx

ユーザーがスライダーで色の値を選択すると、グラフィックオブジェクトを使用してウィンドウの背景色を変更できます。

・ColorPicker.jsx

色選択ダイアログのより複雑なバージョンで、フォントやパスなどの追加のグラフィックスオブジェクトの使用方法を示しています。

さらに、Custom elementクラスを使用すると、数種類（ranges, buttons, lists）の中から自由にカスタマイズしたコントロールを定義でき、onDrawでその見た目を設定できます。

ユーザーインターフェイスの要素は、多くの場合、目的を識別するためにタイトルまたはラベルを必要とし、タイトルは識別する要素の近くに配置されます。86ページの「自動レイアウト」の例に示すように、StaticTextをタイトルまたはラベルとして使用し、自動レイアウトメカニズムを使用して、識別する要素に関連するこのようなタイトルの配置を制御することができます。

タイトルレイアウトメカニズムを使用すると、多くの一般的なケースでこのタスクを簡単に実行できます。追加の静的テキストおよびコンテナ要素を必要とせずに、要素のタイトルと、それが識別するオブジェクトのグラフィック表現との空間的関係を定義できます。タイトルレイアウトは、要素のオプションのtitleプロパティとtitleLayoutプロパティで動作します。このタイトルと要素のグラフィック表現を、相対位置が両方のオブジェクトを囲む仮想コンテナ内のレイアウトルールに従って制御される2つの個別のオブジェクトとして扱います。これは、自動レイアウトメカニズムの操作に似ていますが、より限定された範囲内にあります。

タイトルレイアウトは、次のタイプのUI要素で使用できます。

▶DropDownList

▶FlashPlayer

▶IconButton

▶Image

▶TabbedPanel

これらの要素タイプのほとんどでは、タイトルは通常、要素自体の外側に表示され、仮想コンテナはタイトルと別の要素を囲む想像上の線です。 IconButtonの場合、タイトルはボタンの境界内に表示され、仮想コンテナは要素の外側の境界によって定義されます。両方の場合に同じ原則が適用されます。

▶titleプロパティは、UI要素のテキストラベルを定義する文字列です。タイトルは、グラフィック要素の左または右、上または下、またはグラフィック要素の中央に重ねて表示できます。配置はtitleLayoutプロパティによって制御されます。

▶titleLayoutプロパティは、以下を指定するプロパティを含むオブジェクトです。

▷タイトルの文字幅。

▷タイトルの文字幅内での位置揃え。

▷必要に応じてタイトルを切り捨てる方法。

▷それが識別するオブジェクトに関するタイトルの向き、整列、および間隔。

▷タイトルとその関連オブジェクトを囲む仮想コンテナ内のマージン。

すべてのtitleLayoutプロパティはオプションです。このメカニズムを使用する要素タイプには、各プロパティのデフォルト値があります。詳細については、リファレンスセクションを参照してください。 141ページの「titleLayout」を参照してください。

次のセクションでは、タイトルレイアウトを使用してさまざまなレイアウトを実現する方法を示す例を示します。

タイトルの配置と向き

自動レイアウトとは異なり、タイトルレイアウトでは、配置プロパティを使用して、タイトルとグラフィック要素の方向、およびタイトルとグラフィック要素の配置方法を指定します。 このプロパティには2要素の配列が含まれます。最初の要素は水平方向の配置を指定し、2番目の要素は垂直方向の配置を指定します。 これらの許容値は、塗りつぶし値が許可されないことを除いて、自動レイアウトで使用される値と同じです（88ページの「子の位置合わせ」を参照）。

▶タイトルがグラフィック要素の左または右に表示される行方向を実現するには、水平方向の配置を左または右として、垂直方向の配置を中央、上部、または下部として定義します。

button.titleLayout = { alignment: ['right', 'center'] };

▶タイトルがグラフィック要素の上または下に表示される列方向を実現するには、垂直方向の配置を上部または下部として、水平方向の配置を中央として定義します。

image.titleLayout = { alignment: ['center', 'bottom'] };

▶タイトルがグラフィック要素に重ねて表示されるスタック方向を実現するには、垂直および水平の両方の配置を中心として定義します。 この方向は、主にiconbuttonまたは画像要素タイプで役立ちます。 たとえば、ドロップダウンリストにタイトルを重ねることは意味がありません。 この例では、ボタンのタイトルはアイコン画像の中央に配置されています。

button.title = 'Get information';

button.titleLayout = { alignment: ['center', 'center'] };

▶行の方向を使用して、タイトルをグラフィック要素の上部、中央、または下部に揃えるかどうかを制御できます。 この例では、タイトルは画像の左側に配置され、上端に揃えられます。

image.titleLayout = { alignment: ['left', 'top'] };

▶タイトルをグラフィック要素から分離するデフォルトのピクセル数をオーバーライドするには、スペースを使用します。 この例では、titleLayoutは、パネルの上に15ピクセルのタイトルを配置するように構成されています。

panel.title = 'Image format';

panel.titleLayout = { alignment: ['center', 'top'], spacing: 15 };

タイトル文字の幅と位置調整

▶自動計算されたタイトル幅を上書きするには、charactersプロパティにゼロ以外の正の値を定義します。これにより、指定された数の「X」文字を保持するのに十分なスペースがタイトル領域に確保されます。これは、要素のタイトルが（ローカライズされた値などで）変更される可能性があり、切り捨てられたりレイアウト全体に影響を与えたりすることなく、すべての期待値に適合する十分なスペースを確保する場合に便利です。

droplist.titleLayout = { alignment: ['left', 'center'], characters: 20 };

▶文字の値がデフォルトのタイトル幅よりも大きい幅を指定する場合、justifyプロパティを設定して、タイトル用に予約されたスペース内でのタイトルのテキストの位置調整を制御できます。値leftは、スペースの左端にテキストを配置し、右側に空白スペースを残します。 rightは、スペースの右端にテキストを配置し、左側に空白スペースを残します。 centerは、テキストをスペースの中央に配置し、テキストの両側の空白スペースを均等に分割します。

droplist.titleLayout = { alignment: ['left', 'center'], characters: 20, justify: 'right' };

▶この例では、文字を使用して、グループ内のすべてのドロップダウンリストコントロールタイトルの末尾にあるコロンを垂直方向に揃える方法を示します。各要素のタイトルには同じ文字値が使用され、すべてが右揃えになります。

w.ddl1 = w.add("dropdownlist { title: 'Image format:' }");

w.ddl2 = w.add("dropdownlist { title: 'Background color:' }");

w.ddl3 = w.add("dropdownlist { title: 'Text color:' }");

w.ddl1.titleLayout = { alignment: ['left', 'center'], spacing: 3, characters: 16, justify: 'right' };

w.ddl2.titleLayout = { alignment: ['left', 'center'], spacing: 3, characters: 16, justify: 'right' };

w.ddl3.titleLayout = { alignment: ['left', 'center'], spacing: 3, characters: 16, justify: 'right' };

タイトルの切り捨て

タイトル用に予約されているスペースがテキスト全体を表示するのに十分でない場合は、truncateプロパティを設定して、切り捨てられたテキストの外観を制御します。切り捨てが中央の場合、文字はテキストの中央から削除され、省略記号（...）に置き換えられます。値の終了の場合、文字はテキストの末尾から削除され、省略記号に置き換えられます。 truncateがnoneまたは定義されていない場合、置換省略記号文字なしで、文字が末尾から削除されます。

この例は、同じタイトル文字列に対する3つのオプションすべての効果を示しています。

w.btn1 = w.add("iconbutton { title: 'Start 123456 End', image: 'SystemWarningIcon' }");

w.btn2 = w.add("iconbutton { title: 'Start 123456 End', image: 'SystemWarningIcon' }");

w.btn3 = w.add("iconbutton { title: 'Start 123456 End', image: 'SystemWarningIcon' }");

w.btn1.titleLayout = { characters: 8, truncate: 'middle' };

w.btn2.titleLayout = { characters: 8, truncate: 'end' };

w.btn3.titleLayout = { characters: 8, truncate: 'none' };

タイトルおよびグラフィックオブジェクトの周りのマージン

marginsプロパティは、要素の各エッジをその要素内の可視コンテンツから分離するピクセル数を指定します。 この値はデフォルトのマージン設定をオーバーライドします（ほとんどの要素タイプにはマージンなし、アイコンボタンの各端に6ピクセル）。

▶iconbuttonの場合、マージン値はボタンのフレームとそのタイトルおよびアイコン画像の間のパディングを制御します。

▶他の要素タイプの場合、マージンは、タイトルとグラフィックオブジェクトの境界ボックスの結合を囲む仮想境界線の間のパディングを制御します。これにより、要素が占めるスペースがデフォルトの測定値より大きくなります。

この例は、iconbuttonおよびdropdownlist要素のデフォルトのマージンをオーバーライドする方法を示しています。

リストはパネルに囲まれており、リストの周囲に人為的な境界線が作成されます。

w.btn1 = w.add("iconbutton { title: 'Default margins', image: 'SystemWarningIcon' }");

w.btn2 = w.add("iconbutton { title: 'Extra T/B margins', image: 'SystemWarningIcon' }");

var defaultBtnMargins = w.btn2.titleLayout.margins;

w.btn2.titleLayout = { margins: [defaultBtnMargins[0], 15, defaultBtnMargins[2], 15] };

w.panel1 = w.add("panel { margins: 0, ddl1: DropDownList { title: 'Default margins' } }");

w.panel2 = w.add("panel { margins: 0, ddl2: DropDownList { title: 'Extra L/R margins' } }");

w.panel2.ddl2.titleLayout = { margins: [15, 0, 15, 0] };

ScriptUIは、ウィンドウとユーザーインターフェイス要素を配置およびサイズ設定するプロパティの複雑な値を表すオブジェクトを定義します。これらのオブジェクトは直接作成できませんが、対応するプロパティを設定すると作成されます。そのプロパティは、そのオブジェクトを返します。プロパティはBoundsオブジェクトを返します。

これらのプロパティは、オブジェクト、文字列、または配列として設定できます。

▶e.prop = Object - オブジェクトには、次の表に示すように、このタイプに対して定義されたプロパティのセットが含まれている必要があります。プロパティには整数値があります。

▶e.prop = String - 文字列は、同じオブジェクト記述に準拠した、実行可能なJavaScriptインラインオブジェクト宣言でなければなりません。

▶e.prop =Array - 配列は、下の表に示すように、このタイプに対して定義された順序で整数座標値を持つ必要があります。例えば：

次の例は、画面の左上隅近くに380 x 390ピクセルのウィンドウを配置する同等の方法を示しています。

var dlg = new Window('dialog', 'Alert Box Builder');

dlg.bounds = {x:100, y:100, width:380, height:390}; //object

dlg.bounds = {left:100, top:100, right:480, bottom:490}; //object

dlg.bounds = "x:100, y:100, width:380, height:390"; //string

dlg.bounds = "left:100, top:100, right:480, bottom:490"; //string

dlg.bounds = [100,100,480,490]; //array

結果のオブジェクトには、そのタイプに対して定義された順序で値を持つ配列、またはそのタイプに対してサポートされているプロパティを持つオブジェクトとしてアクセスできます。

サイズと場所のオブジェクトタイプ

以下に、プロパティ値のオブジェクトタイプ、それらを作成および格納する要素プロパティ、およびそれらの配列とオブジェクトプロパティの形式を示します。

○Bounds

画面の座標空間内のウィンドウの境界、またはコンテナの座標空間内のユーザーインターフェイス要素の境界を定義します。要素の左上隅と右下隅の座標を定義する配列[left、top、right、bottom]が含まれます。

要素の境界プロパティを設定すると、境界オブジェクトが作成され、このプロパティは境界オブジェクトを返します。

▶オブジェクトには、left、top、right、bottom、またはx、y、width、heightという名前のプロパティが含まれている必要があります。

▶配列には、[左、上、右、下]の順序で値が必要です。

○Dimension

Windowまたはユーザーインターフェイス要素のサイズを定義します。要素のサイズをピクセル単位で定義する配列[width、height]が含まれます。

要素のサイズまたはpreferredSizeプロパティを設定すると、Dimensionオブジェクトが作成されます（preferredSizeが-1の場合、サイズは自動的に計算されます）。

▶オブジェクトには、widthとheightという名前のプロパティが含まれている必要があります。

▶配列には、[幅、高さ]の順に値が必要です。

○Margins

コンテナの端とその最も外側の子要素との間のピクセル数を定義します。コンテナの左端と一番左の子要素との間のマージンを定義する要素を持つ配列[左、上、右、下]を含みます。

要素のmarginsプロパティを設定すると、Marginsオブジェクトが作成されます。

▶オブジェクトには、left、top、right、bottomという名前のプロパティが含まれている必要があります。

▶配列には、[左、上、右、下]の順序で値が必要です。

marginsプロパティを数値に設定することもできます。その後、すべての配列値がこの数値に設定されます。

○Point

Windowまたはユーザーインターフェイス要素の場所を定義します。配列[x、y]が含まれます。これらの値は、要素の座標空間の原点からの水平および垂直ピクセルオフセットとして要素の原点を表します。

要素の位置プロパティを設定すると、Pointオブジェクトが作成されます。

▶オブジェクトには、xおよびyという名前のプロパティが含まれている必要があります。

▶配列には、[x、y]の順序の値が必要です。