前回は自動化関連の概要から始めてExtensionまわりの経緯と現状及びツールのセットアップまでを解説しました。今回は引き続きExtension関連の解説となりますが、マニフェストファイルについて重点的に解説したいと思います。
Extensionプロジェクトの生成
メニューから「New Creative Cloud Extension」を選んでみます。入力する項目は２項目で、nameとUniqueIDです。
前者はエクステンションメニューに表示される名前で、UniqueIDはエクステンションを識別するためのユニークなIDとなります。このIDはコンフリクトを避ける必要があるために通常は自身の持つドメインをリバースしたものとエクステンション名称を合わせたものを利用します。特にエクステンションの配布を考える方はこのルールを厳守して下さい。nameは現状では利用されないデータである為、重複しても問題はありませんが、出来るだけ重複しないように処理したほうが無難でしょう。とりあえず今回はデフォルトのままで進めてみます。Create Extensionボタンをクリックするとプロジェクトが用意されます。
こんな感じでメッセージが出ます。まずは左側に表示されているプロジェクトを俯瞰してみてください。jsxとかCSXSなんてフォルダがなければ完全にWeb用コンテンツと同じだということが見て取れるでしょう。
このCC Extension Builderですが、プロジェクトをルートのCEPへ生成します。ですから、テストは対象アプリケーションを立ち上げるだけで可能となっています。前述の通りプロジェクト自体はCC2014のみをサポートしますから他のバージョンで利用したい場合は主にmanifest.xmlファイルの調整が必要ですが、プロジェクトの生成自体は以上で完了です。
しかしながら、ここからスムーズにエクステンションを作りなさいと言ってしまうのはいささか乱暴ですので、エクステンションの構造の詳細な説明から始めましょう。
Extensionの構造
プロジェクトの構造をチェックしてみましょう。
典型的な例として用意したのはWorkspace Switcherのプロジェクト構造です。パネルのUIを構成する中心はindex.htmlです。このファイルがmainPathとしてmanifest.xml内で指定されます。index.htmlは通常のHTMLファイルと同じ構成です。
CEPインフラ上では内蔵するChrome Embeded FrameworkがHTMLのレンダリングを担当します。そして利用されるJavascriptエンジンはV8ですから動作的にはChiromeだと考えて差し支えありません。通常のブラウザで利用可能なCookieやLocal Storage、そしてIndexed DB等も正常に動作します。
注意が必要なのはアプリケーションをコントロールするギミックです。基本的にCEF自体は直接アプリケーションに対してはアクセスを提供しません。
内蔵されたCEFは主にCEF上でWebコンテンツと同様にHTMLをレンダリングしJavascriptを処理します。このJavascriptはあくまでもV8エンジン上で動作するロジックです。CEPにはCSXSインターフェースクラスにいくつかのイベントが設定されています。これらは幾つかのアプリケーションの状態を監視することが可能です。しかし、オブジェクトモデルへの直接のアクセスは用意されていません。CEPから各アプリケーションモデルへのアクセスはevalScriptというCSInterfaceクラスに用意されたメソッドを介して行われます。現状では各アプリケーションにブリッジする機能は基本的にこのメソッドだけです。
また、プラグイン経由でイベントを発行させたり、ネイティブ系からダイレクトにCEPへとアクセスさせることも可能です。しかし、内容的には基本的な事柄から逸脱しますので、今回はこのあたりの事は解説いたしません。
ここで、重要な事についてまとめておきましょう。
- HTML5＋CSS3＋Javascriptでユーザーインターフェース（エクステンションパネル）を構成できる。
- レンダリングエンジンはCEFが利用されている為、CookieやLocal Storageが利用できる。
- アプリケーションのオブジェクトモデルを操作するのはExtendscriptである。
- ２つの異なったJavascriptエンジンをつなぐのはCSInterfaceクラスに内蔵されたevalScriptメソッドだけである。
以上のようになります。次に各構成ファイルについて説明していきます。
manifest.xmlの編集
プロジェクトの基本情報等を編集するためにはmanifest.xmlファイルを調整する必要があります。まずはデフォルトの状態を見てみます。
<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest Version="5.0" ExtensionBundleId="com.example.helloworld" ExtensionBundleVersion="1.0"
ExtensionBundleName="Hello World" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<ExtensionList>
<Extension Id="com.example.helloworld" Version="1.0" />
</ExtensionList>
<ExecutionEnvironment>
<HostList>
<!-- Uncomment Host tags according to the apps you want your panel to support -->
<!-- Photoshop -->
<Host Name="PHXS" Version="[15.0,15.9]" />
<Host Name="PHSP" Version="[15.0,15.9]" />
<!-- Illustrator -->
<!-- <Host Name="ILST" Version="[18.0,18.9]" />-->
<!-- InDesign -->
<!-- <Host Name="IDSN" Version="[10.0,10.9]" /> -->
<!-- Premiere -->
<!-- <Host Name="PPRO" Version="[8.0,8.9]" /> -->
<!-- AfterEffects -->
<!-- <Host Name="AEFT" Version="[13.0,13.9]" /> -->
<!-- PRELUDE -->
<!-- <Host Name="PRLD" Version="[3.0,3.9]" /> -->
<!-- FLASH Pro -->
<!-- <Host Name="FLPR" Version="[14.0,14.9]" /> -->
</HostList>
<LocaleList>
<Locale Code="All" />
</LocaleList>
<RequiredRuntimeList>
<RequiredRuntime Name="CSXS" Version="5.0" />
</RequiredRuntimeList>
</ExecutionEnvironment>
<DispatchInfoList>
<Extension Id="com.example.helloworld">
<DispatchInfo >
<Resources>
<MainPath>./index.html</MainPath>
<ScriptPath>./jsx/hostscript.jsx</ScriptPath>
</Resources>
<Lifecycle>
<AutoVisible>true</AutoVisible>
</Lifecycle>
<UI>
<Type>Panel</Type>
<Menu>Hello World</Menu>
<Geometry>
<Size>
<Height>300</Height>
<Width>300</Width>
</Size>
<!--<MinSize>
<Height>550</Height>
<Width>400</Width>
</MinSize>
<MaxSize>
<Height>550</Height>
<Width>400</Width>
</MaxSize>-->
</Geometry>
<Icons>
<Icon Type="Normal">./icons/iconNormal.png</Icon>
<Icon Type="RollOver">./icons/iconRollover.png</Icon>
<Icon Type="Disabled">./icons/iconDisabled.png</Icon>
<Icon Type="DarkNormal">./icons/iconDarkNormal.png</Icon>
<Icon Type="DarkRollOver">./icons/iconDarkRollover.png</Icon>
</Icons>
</UI>
</DispatchInfo>
</Extension>
</DispatchInfoList>
</ExtensionManifest>
これがプロジェクトの初期状態です。このマニフェストというのは非常に大事なものです。細かく説明していきましょう。
<ExtensionManifest Version="5.0"
ExtensionBundleId="com.example.helloworld"
ExtensionBundleVersion="1.0"
ExtensionBundleName="Hello World"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
まずは冒頭のルートタグから。VersionはCSXSランタイムバージョンと同じです。利用するcsinterface.jsのマイナーバージョンには追随しませんのでご注意下さい。また、2.0〜3.0がFlashインターフェス系のエクステンションで、4.0以降がCEPエンジンを利用するHTMLエクステンションとなります。バンドルバージョンは1.0、バンドルネームはエクステンション名が入ります。しかし、このExtensionBundleVersion及びExtensionBundleNameは利用されない情報です。
注意しなければならないのはExtensionBundleIdで、基本的にリバースドメインにエクステンション名を接続したものが利用されます。例えば、わたしが利用するドメインは「net.sytes.chuwa」ですから、これにエクステンション名「testExtension」を付加して「net.sytes.chuwa.testExtension」というIdとなります。
まず省略可能なオプションタグから解説しましょう。
オプションタグ
- Author
- Legal
- Abstract 無くても構いませんが、エクステンションマネージャーの情報やインストール時のメッセージなどに利用されるものです。 以下に一例を示します。
<Author>
<![CDATA[TenA]]>
</Author>
<Contact mailto="「メールアドレスを記述」" />
<Legal>
<![CDATA[This Software is licensed under the MIT license.
----
The MIT License (MIT)
Copyright (c) 2015 TenA
・
・
・
]] href="「http://LinkToLegalInformationPage」">
</Legal>
<Abstract href="「http://LinkToAbstractInformationPage」">
<![CDATA[Test Extension ABSTRACT Information]]>
</Abstract>
という具合になるのですが、わたし自身を含め詳細な記述をされているエクステンションはあまり見たことがありません。情報を詰め込もうとするとmanifestファイルのメンテナンスが面倒になったりしますので、詳細に書きたい場合はhrefでリンクさせると良いでしょう。
さて、このあたりはテストする分には全く影響しない部分ですので詳細は割愛します。上記サンプルの構造に合わせた実装を行って下さい。
必須タグ - ExtensionList
さて、以降は必須タグとなります。ここはしっかり構成しなければいけません。まずはエクステンションのリストです。このマニフェストファイルには複数のエクステンションを収容することが出来ます。Adobe社のCEP_HTML_Test_Extensionというサンプルを見てみると分かるのですがこのExtensionListにてExtensionを複数定義しています。抜粋して見てみましょう。
<ExtensionList>
<Extension Id="com.adobe.CEPHTMLTEST.Panel1" Version="1.0"/>
<Extension Id="com.adobe.CEPHTMLTEST.Panel2" Version="1.0"/>
<Extension Id="com.adobe.CEPHTMLTEST.ModalDialog" Version="1.0"/>
<Extension Id="com.adobe.CEPHTMLTEST.Modeless" Version="1.0"/>
</ExtensionList>
この様になっています。ExtensionListタグのチャイルドとしてExtensionタグがあります。このタグのプロパティにIdがあります。これはエクステンションを識別するためのIdとなりますのでユニークなIdとして設定する必要があります。上の例ではExtensionBundleIdは「com.adobe.CEPHTMLTEST」が設定（Adobe社のサンプルを確認してみてください）されています。ここにバンドルされた各エクステンションを識別するための「Panel1」などのエクステンション名称が付加されてIdとなっています。しかし、通常では複数をバンドルする事は少ないケースです。シングルエクステンションの場合はこのIDとExtensionBundleIdが同じでも構いません。CC Extension Builderが生成するプリセットは
<ExtensionManifest Version="5.0" ExtensionBundleId="com.example.helloworld" ExtensionBundleVersion="1.0"
ExtensionBundleName="Hello World" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<ExtensionList>
<Extension Id="com.example.helloworld" Version="1.0" />
</ExtensionList>
この様にExtensionBundleIdと同一の内容となっています。また、このExtensionのIdは他のタグから参照されるベースとなる情報になります。
もう一つのVersionプロパティは識別のために書いておいた方がいいのですが、必須項目ではありません。
必須タグ - ExecutionEnvironment
このタグではサポートするアプリケーションをリストアップします。
<HostList>
<!-- Uncomment Host tags according to the apps you want your panel to support -->
<!-- Photoshop -->
<Host Name="PHXS" Version="[15.0,15.9]" />
<Host Name="PHSP" Version="[15.0,15.9]" />
<!-- Illustrator -->
<!-- <Host Name="ILST" Version="[18.0,18.9]" />-->
<!-- InDesign -->
<!-- <Host Name="IDSN" Version="[10.0,10.9]" /> -->
<!-- Premiere -->
<!-- <Host Name="PPRO" Version="[8.0,8.9]" /> -->
<!-- AfterEffects -->
<!-- <Host Name="AEFT" Version="[13.0,13.9]" /> -->
<!-- PRELUDE -->
<!-- <Host Name="PRLD" Version="[3.0,3.9]" /> -->
<!-- FLASH Pro -->
<!-- <Host Name="FLPR" Version="[14.0,14.9]" /> -->
</HostList>
この例はCC Extension Builderが生成するものです。デフォルトではPhotoshopのCC2014だけをコメントアウトしてサポートしています。Hostタグですが、プロパティを２つ持ちます。一つ目がNameプロパティです。指定するのは各アプリケーションを定義してある４文字で表されるenigmaコードを指定します。
- Dream Weaver 「DRWV」
- Flash 「FLPR」
- InDesign 「IDSN」
- InCopy 「AICY」
- Illustrator 「ILST」
- Photoshop std 「PHSP」
- Photoshop ext 「PHXS」
- Premier Pro 「PPRO」
- Prelude 「PRLD」
- After Effects「AEFT」
各アプリケーションのコードは以上のようになっています。注意する必要のある事項がひとつあります。PhotoshopはExtendedとStandardの区別が必要ですが、基本がスタンダードとなっています。ExtendedやCC以降であればアプリケーション自体は「PHXS」と書いておけば認識するのですが、Add OnsやExtension Managerは「PHSP」が記述されていない場合、インストールしてくれません。Extendedだけのサポートとしたい場合や、CC以降の場合でも「PHSP」の指定がない場合は認識されませんので必ず併記を行って下さい。
もう一つのプロパティのVersionですが、これは２通りの記述ができます。
<Host Name="ILST" Version="[17.0,19.9]" />
こう記述するとバージョンレンジ指定となります。
<Host Name="ILST" Version="18.0" />
一方こちらの記述では最低バージョンの指定とみなされ18.0以降のバージョン全てでサポートされます。
これらサポートバージョンの表記ですが、あくまでマニフェスト的にはという事に注意が必要です。各アプリケーションにおいてはバージョン毎にオブジェクトモデルに差異があります。このオブジェクトモデルの違いを吸収するためにはExtendscript側のコードで違いを吸収するギミックを用意する必要があります。
必須タグ - LocaleList
サポートするロケールのリストです。チャイルドタグはLocaleで、このタグはCodeプロパティを持ちます。
<Locale Code="All" />
この例のAllは、すべてのロケールが対象となります。米国英語なら「en_US」、日本語なら「ja_JP」という具合に割り当てると特定の言語のみをサポートすることが出来ます。わたしの作るエクステンションの場合、Allかen_XXが大半を占めますが、これはAddOnsが英語をサポートしないエクステンションを承認しないことが大きな理由です。
必須タグ - RequiredRuntimeList
利用するCSXSランタイムのバージョンリスト。チャイルドタグがRequiredRuntimeでNameとVersionプロパティを持ちます。Nameは「CSXS」で固定で、Versionは以下のようになります。
- CS5 -> 2.0
- CS5.5 -> 2.5
- CS6 -> 3.0
- CC（2013） -> 4.0
- CC2014 -> 5.0
- CC2015 -> 6.0
実際のエクステンションにおいてはCSXSランタイムが基本的に上位互換を保つ為、サポートする一番バージョンの低いランタイムバージョンだけを記述します。
必須タグ - DispatchInfoList
一番重要な項目です。実際のエクステンションの内容を記述する部分です。このリストのチャイルドは前記のExtensionListのチャイルドタグのExtensionタグと整合性を保つように記述する必要があります。
では子であるExtensionタグについて詳細を見ていきます。必須プロパティはひとつ「Id」だけです。前述のExtensionListのチャイルドタグExtensionのIdプロパティと同じものにします。
Extensionタグの子であるdispatchInfoタグについてはResourcesやUIについての重要定義が含まれます。また、プロパティにはHostの指定が可能で、アプリケーションごとにScriptPathを切り替える場合やアイコン・サイズなどをアプリケーション毎に調整する場合に重宝します。
</Geometry>
<Icons>
<Icon Type="Normal">./icons/PE_regular.png</Icon>
<Icon Type="RollOver">./icons/PE_active.png</Icon>
</Icons>
</UI>
</DispatchInfo>
<DispatchInfo Host="IDSN">
<Resources>
<MainPath>./index.html</MainPath>
<ScriptPath>./jsx/idsn/hostscript.jsx</ScriptPath>
</Resources>
<Lifecycle>
上の例ではIndesignの場合に読み込まれるExtendscriptファイルを切り替えるためにDispatchInfoのHostプロパティを設定しています。
Resourcesタグ（DispatchInfoタグのチャイルド）
このタグが定義するものは非常に重要なものです。
MainPath
エクステンションルートを明示的に定義します。実際にはエクステンション本体のHTMLを指定します。
ScriptPath
各アプリケーションのオブジェクトモデルに直接アクセスするExtendscriptファイルを指定します。HTMLに付随するJavascriptファイルでは無いことに留意下さい。こちらはオプションとしてEngineプロパティを指定できます。Extendscriptを実行するセッションエンジンを指定できますが、ホストアプリケーションがセッションエンジンをサポートしない物もありますが、そういったものでは効果を発揮しません。
CEFCommandLine（オプション）
CEPが内蔵するChrome Embedded Frameworkでは起動オプションを利用して各種コントロールを行うことが出来ます。
<CEFCommandLine>
<Parameter>--enable-media-stream</Parameter>
</CEFCommandLine>
上の例ではメディアストリームの読み込みを許可しています。以下に主なオプションスイッチを示します。
- --enable-media-stream メディアストリームの読込許可
- --enable-speech-input スピーチインプットの許可
- --ignore-certificate-errors SSL認証のエラーを無視
- --persist-session-cookies セッションクッキーの保持.
- --disable-javascript-access-clipboard Javascriptからのクリップボードへのアクセスを無効
- --proxy-auto-detect プロキシ設定の自動検出
- --disable-application-cache アプリケーションキャッシュを無効
- --nodejs-disabled NODE.jsを無効
その他のスイッチは以下を参照して下さい。
http://peter.sh/experiments/chromium-command-line-switches/
Lifecycle（オプション）
エクステンションパネルというのは基本的にエクステンションパネルを開いた時に自動的にアクティベートされます。しかし、エクステンションによっては表示自体が行われないものやCEP系ではないエクステンションもあります。Lifecycleタグはそういったエクステンションもアクティベートのタイミングを定義できます。チャイルドにはフラグとなるタグが２つあります。ひとつはAutoVisibleで、true/falseで設定します。CEP系のパネルはデフォルトでAutoVisible動作となります。 もうひとつはStartOnで、エクステンションを起動する為のイベント等を定義します。以下に例を示します。
<Lifecycle>
<AutoVisible>false</AutoVisible>
<StartOn>
<Event>com.adobe.csxs.events.ApplicationActivate</Event>
</StartOn>
</Lifecycle>
この例ではAutoVisibleをfalseに設定し、CSXSイベントを利用して、ホストアプリケーションがアクティベートされた時にエクステンションを起動します。利用できるイベントは
- documentAfterActivate
- documentAfterDeactivate
- applicationBeforeQuit
- applicationActivate
- documentAfterSave
等がありますが、アプリケーションによりサポートするものが違います。イベントのサポート状況に関する情報は後日まとめます。
UI
UIタグはエクステンションパネルの外観を定義します。具体的にはパネルタイプ、メニューでの表示名称、サイズ、カスタムアイコンの定義です。このうち最低限必要なのがTypeタグとMenuタグです。まずは例を見てみます。
<UI>
<Type>Panel</Type>
<Menu>Workspace Switcher</Menu>
<Geometry>
<Size>
<Height>70</Height>
<Width>180</Width>
</Size>
<MaxSize>
<Height>200</Height>
<Width>350</Width>
</MaxSize>
<MinSize>
<Height>30</Height>
<Width>100</Width>
</MinSize>
</Geometry>
<Icons>
<Icon Type="Normal">./icon/sw_regular.png</Icon>
<Icon Type="RollOver">./icon/sw_active.png</Icon>
</Icons>
</UI>
Typeタグはエクステンションのタイプを定義します。Panel、ModalDialog、Modeless、Customの４種類が定義可能です。Panelは一般的なドッキング可能なフローティングパネル。ModalDialogはダイアログパネル等と同様に常に前面に表示され、表示されている間は他の部分へのアクセスを制限します。Modelessはいわゆるフローティングパレットで、前面に表示されますが、他へのアクセスを妨げません。Customはアプリケーションによって扱いが違います。通常はパネルとして表示をしないエクステンションでの設定に使われます。Customのサポート状況は以下をご覧ください。
サポートするアプリケーション
Photoshop、Premiere Pro、Prelude、Flash Pro
サポートしないアプリケション
InDesign、InCopy
※IllustratorはCustomをPanelとして処理します。
サイズは３種類設定可能で、それぞれ高さと幅を設定します。min及びmaxを設定しておくとパネルはそのサイズ以上、又は以下にリサイズされません。
Icons
まずサンプルから見てみます。
<Icons>
<Icon Type="Normal">./images/IconLight.png</Icon>
<Icon Type="RollOver">./images/IconLight.png</Icon>
<Icon Type="DarkNormal">./images/IconDark.png</Icon>
<Icon Type="DarkRollOver">./images/IconDark.png</Icon>
</Icons>
Typeプロパティにアイコンタイプを設定します。Normalは通常表示されるアイコンで、RollOverがポインタがロールオーバーした時に表示されるアイコンとなります。それぞれにDarkがついたものを定義するとアプリケーションのアピアランスがダーク系に設定された場合にそれらが選択されます。HiDPI表示に対応させる場合は、IconLight@2X.png という具合に@2X等を拡張子の前に挿入した高解像度アイコンファイルを用意し通常のアイコンと同一階層に配置しておきます。
DependencyList（オプション）
エクステンションの中にはIPCツールキット等を利用してエクステンション同士が連携して動作するものが存在します。そういう場合、この依存性リストを記述しておけばエクステンションマネージャーが必要なエクステンションが存在するかどうかを検証してくれます。実際の依存性はチャイルドタグのDependencyタグにて設定します。
<Icon Type="RollOver">./icons/PE_active.png</Icon>
</Icons>
</UI>
</DispatchInfo>
<DependencyList>
<Dependency Id="net.sytes.chuwa.highlight" Version="2.0.0"/>
</DependencyList>
</Extension>
</DispatchInfoList>
この例ではIdが「net.sytes.chuwa.highlight」のエクステンションのVer.2.0.0がインストールされているかどうかをチェックします。注意点としてはVersionの書き方です。該当バージョンそのものを記述する方法とレンジを記述する方法があります。上の例では2.0.0だけがターゲットになります。最低バージョンの表記ではないことにご注意下さい。レンジ指定の場合は1.0〜3.5のレンジをターゲットにするのであれば「Version="[1.0,3.5]"」と記述します。
以上で重要な部分は網羅しました。幾つかの用途不明なエレメントやプロパティが存在しますが、エクステンションの動作に影響を与えることは無いと思われるのでmanifest.xmlについてはこれで区切りとします。
続いて他のファイルについての解説です。
HTMLファイル及びCSS
これらに関しては一般的にHTML5、CSS3と呼ばれるものが利用可能です。
Javascript
CEPの内蔵するCEFはバージョンが3です。V8エンジン上で動作することと、CC2014以降においてはnode.jsが内蔵されていますのでCC2014以降（csInterface.js ver.5.2以降）ではNPMモジュールが利用可能となり、ファイルアクセスやデータベース操作、ネットワーク処理等の実装が楽にできるようになりました。また、CEPネイティブファンクション群には各種ファイルアクセスAPIも提供されています。その他Jquery等のフレームワークも利用可能です。と、まあ、勢いに乗せて列記していますが、以下に典型的なファイル構成を挙げてみましょう。
/js/libs/CSInterface.js
/js/libs/jquery-2.0.2.min.js
/js/main.js
/js/themeManager.js
これはJsxLauncherのjsディレクトリの内部を示しているのですが、この構成ファイルについて解説しておきます。
CSInterface.js
CEPエンジンへのアクセスをコントロールする為のライブラリです。各種イベントへの接続やランタイムエンジンへの接続、Extendscriptへのブリッジなど多岐にわたって実装されている要となるライブラリです。
jquery-2.0.2.min.js
よく使われるjqueryも利用可能です。
main.js
これはJavascriptの実装を記述したファイルです。一般的なHTMLと同様にHTMLファイルのsrc属性で指定して読み込みます。マニフェストファイルに記述するスクリプトでは無いことに注意して下さい。
themeManager.js
こちらもHTML上で読込指定して利用します。CC Extension Builder for Bracketがバンドルするライブラリで、アプリケーションのアピアランスにエクステンションのアピアランスを追随させる為のライブラリです。
Javasccript関連に関しては以上ですが、他のフレームワークなども利用可能です。適宜ライブラリを追加しHTML上で読み込み処理を記述して下さい。ひとつ注意していただきたいことがあります。それは、CEP自体がノンブロッキングで動作するということです。日頃Extendscriptをバリバリやっている方が移行してくるとかなり異質な部分です。evalScriptメソッドもノンブロッキングで返り値の拾い方に注意が必要です。このあたりの事情については過去に解説してあります。
http://chuwa.iobb.net/tech/archive/2013/12/call-back-from-extendscript.html
http://chuwa.iobb.net/tech/archive/2014/11/sdk-primer-2-cep.html#more
さて、最後はExtendscriptエンジン側のファイルについてです。
JSXファイル
マニフェストファイルにScriptPathとして定義されるファイルです。アプリケーションオブジェクトモデルに対する操作などのロジックをExtendscriptで記述します。構成は通常アプリケーションをJavascriptでコントロールする場合と同様に行います。しかし、CEPに対するイベント発行等のエクステンションならではの特殊な処理等もいくつか存在します。
エクステンションのHTML部分というのは言わばユーザーインターフェースを司る部分です。この部分はユーザーの操作性に大きな影響を及ぼす部分ですが、このCEP側の実装をいかにこねくり回そうともアプリケーション自体のオブジェクトモデルを操作することは出来ません。この部分はevalScriptでブリッジされるExtendscript側のスクリプトエンジンが受け持つものです。ですから、このExtendscipt側から見ると本来ScriptUIが担当する部分をCEPが代替するようにも見えるかもしれません。しかし、このオブジェクトモデルを直接操作する部分というのはCEP側のリモートデバッグでは殆どうかがい知ることのできない部分です。ですからこのオブジェクトを操作するメインロジックというのはESTK等をを利用してあらかじめデバッグを済ませておいたほうが良いでしょう。この部分があやふやな状態でリモートデバッグに入ると何処のロジックがまずいのか特定するのに手間取る事にもなりかねません。