CEPガイド２：開発の初め方

本記事はCEPスーパーメガガイドのPart 2です。
エクステンションの参考用ソースはこちら。

開発環境について

CEP 5用エキステンションのソースファイルはHTML・JS・テキストしかないので、テキストエディタやHTML制作ツールさえあれば問題なく開発開始ができる。下記の外部アプリも役に立つかも知れない：

  • Node.jsを使うならインストールしよう。厳密に言うとなくても開発できるが、npmモジュールの取得などを出来たほうが便利。
  • ベータ状態だが、Extension Builder 3というIDEがAdobe Labsから提供されて、最新版はCEP 5に対応する。マニフェスト編集とか動作確認をやりやすくしてくれる。Eclipseベースなので、Eclipseに慣れている方にはお勧めだが、私はそうでもないので特に使っていない。EB3の使い方についてはこの記事までご参照を。
  • アドビのDavid Deraedtが作ったBracketsプラグインは参考になるかも知れない。だが現在はCEP 4用のもので、CEP 5の対応は準備中のようである。

ちなみに私はちょうどアドビプロモーションのためにエクステンションを作ったところだが、Edge AnimateとBracketsしか使わなかった。

ソースの構成

最低限のCEP 5パネルのソースに必要なパーツは２つ：マニフェストと何かのHTML。マニフェストのパスは /CSXS/manifest.xml と固定される（CSXSはCEPの旧名）。HTMLのパスはマニフェストに設定するので、/index.html ではなくても良い。

マニフェストXMLについて

ミニマルなマニフェストはこんな感じになる：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<ExtensionManifest ExtensionBundleId="com.fenomas.example" 
                   ExtensionBundleName="私のちょう格好いい拡張機能" 
                   ExtensionBundleVersion="1.0" 
                   Version="5.0">
    <ExtensionList>
        <Extension Id="com.fenomas.example.myExt" Version="0.1"/>
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList>
            <Host Name="PHXS" Version="[15.0,15.9]" />
            <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.fenomas.example.myExt">
            <DispatchInfo>
                <Resources>
                    <MainPath>./index.html</MainPath>
                </Resources>
                <UI>
                    <Type>Panel</Type>
                    <Menu>私のちょう格好いいパネル</Menu>
                    <Geometry>
                        <Size>
                            <Height>300</Height>
                            <Width>500</Width>
                        </Size>
                    </Geometry>
                </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>

しばらく見つめたら大体把握できると思うが、注意点として：

  • 複数のエクステンションをバンドル出来るので、マニフェストの頭にExtensionBundleName とExtensionList がある。バンドルのIDをcom.hoge にして、エクステンションのIDをcom.hoge.piyo にするパターンになる。
  • 6行目と19行目のVersion="5.0" はCEP 5を指している。
  • 初期に表示されるHTMLは26行目のMainPath で定義される
  • パネルなどが28行目からのUI セクションで定義される。パネル以外にはダイアログ、モーダルダイアログも指定できる。

そして11行目からのHostList は、対応するCCツールのコードネームのバージョンをリストアップする。リストに入っていないツールまたはバージョンがそのエクステンションの存在を無視する。CEP 5に対応するツールのコードネームは下記の通り：

PHXS: Photoshop
PHSP: Photoshop (older code)
ILST: Illustrator
FLPR: Flash Pro
PPRO: Premiere Pro
AEFT: After Effects
PRLD: Prelude
IDSN: InDesign
AICY: InCopy

参考用のソース

見やすくするため、上記のマニフェストから一部の任意フィールドを省略しました。参考のソースとしてはこのバージョンを使ってください： myExtension.zip

動作確認のやり方

パネルのUIはHTML5なのである程度はブラウザで動作確認しながら作ることも出来るが、もちろんCCツール上でパネルの動作確認も必要。そうするには２つの手段がある：

１．無署名エクステンションの許可を設定する

設定する場所はOSで異なる：

Mac: ~/Library/Preferences/com.adobe.CSXS.5.plist
Win: HKEY_CURRENT_USER/Software/Adobe/CSXS.5

MacのplistはXcode、またはテキストエディタで編集し、Windowsの場合はregeditを利用する。そして必要な編集は、PlayerDebugMode というキーを追加し、タイプをString 、バリューを1 に設定する。

２．ソースを拡張機能の共用フォルダに移動

フォルダもOSで異なる。

Macの場合：  ~/Library/Application Support/Adobe/CEP/extensions/
Win 32bit： C:\Program Files\Common Files\Adobe\CEP\extensions\
Win 64bit： C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\

それだけ。①の設定を行って、エクステンションのフォルダを②の場所におけば、対応CCツールを起動するとエクステンションが認識される。パネルを開く方法は若干ツールによるが、多くの場合はメニューの「ウィンドウ➔エクステンション」から開ける。

CEP 5の初め方はこれぐらいである。次回の投稿 Part 3：HTML開発とデバッグ をご参照ください！