以下のhtmlファイルは、Extension Builder(2014/12/04)で新規プロジェクトを作成したときに作られるものです(一部省略)。

 

<index.html>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/topcoat-desktop-dark.min.css" />
  <link id="hostStyle" rel="stylesheet" href="/css/styles.css" />
  <title></title>
</head>
<body class="hostElt">
  <div id="content">
    <div> <button id="btn_test" class="topcoat-button--large hostFontSize">Call ExtendScript</button> </div>
  </div>
  <script src="/js/libs/CSInterface.js"></script>
  <script src="/js/libs/jquery-2.0.2.min.js"></script>
<script src="/js/themeManager.js"></script>
  <script src="/js/main.js"></script>
</body>
</html>

 

これはボタンが一つだけという簡単なサンプルになっています。記述自体に特殊なものはなく、各idはこのサンプルの必然に過ぎません。Webサイト構築のノウハウがほぼそのまま流用できますので、HTMLやCSSについての解説は省きます。

各JavaScriptの読み込み位置は自由ですが、ここではボタンに反応させる部分をJavaScriptが担っている(main.js)ので、HTMLオブジェクトが読み込まれた後に実行されるように書かれています。

なお、ここで読み込んでいる各スクリプトは以下のようなものです。

■CSInterface.js

AdobeがSDKとして提供しているライブラリで、ExtendScriptを使ってCCアプリケーションと交信するために必須のものです。

■jquery-2.0.2.min.js

HTMLでGUIを作成する際に使用される有名なライブラリです。このサンプルではボタンのレスポンスに使われています。UIに使われていなければ不要です。

■themeManager.js

Extension Builderが追加しているライブラリです。CCアプリケーションはUIのテーマを変更できますが、それに応じてパネルの見栄えも変更するのがベストです。このライブラリはその際に有用な関数を提供します。

■main.js

このサンプルでボタンに反応させるスクリプトはここに書き込まれています。ここを見るとExtendScriptとの交信方法がわかります。この程度のスクリプトは直接HTMLに書き込んでもいいのですが、実際はもっと長くなるはずなのでこのように別ファイルで読み込むのが無難です。

 

GUIの作り込みには、BootstrapやFoundationなどのライブラリーを使うこともできます。

また、日頃Web開発で使い慣れたツールがあれば、GUIはそちらで作成するほうがよいかもしれません。Creative Cloudに加入していればDreamwaverが使えますので、そちらを使ってもよいでしょう。

 

Joomla templates by a4joomla