HTML 拡張機能の作成

Animate は、HTML 拡張機能を使用して拡張できます。Adobe Extension Builder 3 を使用すると、Animate 向けの HTML 拡張機能を作成できます。以前のバージョンでは、SWF 拡張機能を使用して Animate を拡張することのみが可能でしたが、Adobe Extension Builder 3 では、Creative Cloud アプリケーション向けの HTML 拡張機能を作成できます。はじめに、Eclipse と Extension Builder 3.0 をダウンロードしてインストールする必要があります。

HTML 拡張機能を作成するには、次の操作を行います。

1. Eclipse を起動します。 
2. New Project（新規プロジェクト）ウィザードで、新規の Application Extension Project（アプリケーション拡張機能プロジェクト）を作成します。プロジェクトの分かりやすい名前を入力して、「Next（次へ）」をクリックします。
3. New Adobe Application Extension Project（新規 Adobe アプリケーション拡張機能プロジェクト）パネルで、「Adobe Animate」を選択します。「次へ」をクリックします。
4. 次の使用可能なオプションを使用して拡張機能を設定します。
   
   1. Bundle ID（バンドル ID）：拡張機能を一意に識別します。
   2. Menu name（メニュー名）：拡張機能の表示名です。Menu Name は、Animate の ウィンドウ／エクステンションメニュー内に表示されます。
      
   3. Window Details（ウィンドウ詳細）：拡張機能ウィンドウのタイプとサイズをカスタマイズするために使用します。
      
      「Next（次へ）」をクリックします。
5. 次以降の画面で、拡張機能向けの参照ライブラリをさらにカスタマイズできます。
   1. CEP Interface Library（CEP インターフェイスライブラリ）：ホストアプリケーションとやり取りするための関数を提供します。このオプションはデフォルトで選択されています。
   2. Frameworks（フレームワーク）：jQuery などの一般的な JavaScript ライブラリ用の設定です。
      
   3. Services（サービス）：Adobe IPC Communication Toolkit が含まれます。これは、アドビのアプリケーション、拡張機能、外部アプリケーション間の通信を可能にするツールキットです。このツールキットは、CEP Service Manager 経由でメッセージをやり取りするためのプロトコルを提供します。CEP Service Manager は、Creative Cloud の通信のハブとして動作します。
      
      「Finish（終了）」をクリックして、新しい Eclipse プロジェクトを作成します。

Animate での拡張機能のデバッグ

作成した拡張機能は、Eclipse から直接実行できます。

1. プロジェクトを右クリックし、Run As（実行）／Adobe Flash Extension（Adobe Flash 拡張機能）を選択します。これにより、Animate が起動します。
2. Animate で、ウィンドウ／エクステンションメニュー項目を選択します。拡張機能パネルが開きます。

拡張機能の書き出し

拡張機能を配布するには、ZXP パッケージとして書き出す必要があります。書き出した ZXP パッケージは、Creative Cloud アプリケーション上の Adobe Extension Manager によってダウンロードされ実行されます。

1. Eclipse で、Script Explorer（スクリプトエクスプローラー）ビューに切り替えてプロジェクトを右クリックし、Export（書き出し）／Adobe Extension Builder 3／Application Extension（アプリケーション拡張機能）を選択します。Export Wizard（書き出しウィザード）が表示されます。
2. 拡張機能パッケージを署名するための証明書が必要になります。既存の証明書を参照するか、「Create（作成）」をクリックして新しい証明書を作成します。
3. 「Finish（終了）」をクリックします。
4. 書き出しが完了したら、拡張機能の ZXP パッケージがプロジェクトフォルダー内に格納され、配布できるようになります。

メモ：インストールするには、<extension>\.staged-extension\CSXS\manifest.xml ファイルにアクセスして、Animate の最小バージョンが 13.0 となるように host タグを更新する必要があります。

Animate での拡張機能のインストール

Adobe Extension Manager を使用して、Animate 内で HTML 拡張機能をインストールできます。HTML 拡張機能は、Animate の機能を拡張するために使用できます。

HTML 拡張機能へのインタラクティブ機能の追加

コントロールの追加、ビヘイビアーの定義およびホスト（Animate およびオペレーティングシステムを含む）環境に関する情報の取得によって、Animate とやり取りする HTML 拡張機能を構築できます。これは 2 つの方法で実行できます。

1. CEP インターフェイスライブラリの使用：CEP インターフェイスライブラリは、ホスト環境の情報を取得するための API と、JSFL を実行できる eval スクリプトを提供します。CEP インターフェイスライブラリについて詳しくは、Eclipse でHelp（ヘルプ）／Help Contents（ヘルプ目次）／Adobe Extension Builder／References（参照）を開いて参照してください。
2. JSFL の使用：CEP インターフェイスライブラリの Eval スクリプト API を使用して、JSFL スクリプトを実行できます。
   
   JSFL のほかにも、Animate 内の CEP インフラストラクチャは、HTML パネル内でのみ使用可能な次のイベントも公開します。
   • com.adobe.events.flash.documentChanged：現在アクティブなドキュメント内の変更によってトリガーされます。
   • com.adobe.events.flash.timelineChanged：現在アクティブなドキュメントのタイムラインに変更が加えられたときにトリガーされます。
   • com.adobe.events.flash.documentSaved：現在のドキュメントを保存したときにトリガーされます。
   • com.adobe.events.flash.documentOpened：新しいドキュメントを開いたときにトリガーされます。
   • com.adobe.events.flash.documentClosed：現在アクティブなドキュメントを閉じたときにトリガーされます。
   • com.adobe.events.flash.documentNew：新しいドキュメントを作成したときにトリガーされます。
   • com.adobe.events.flash.layerChanged：別のレイヤーを選択したときにトリガーされます。
   • com.adobe.events.flash.frameChanged：別のフレームを選択したときにトリガーされます。
   • com.adobe.events.flash.selectionChanged：ステージ上の別のオブジェクトを選択したときにトリガーされます。
   • com.adobe.events.flash.mouseMove：ステージ上にマウスを移動したときにトリガーされます。

例

このコードスニペットの説明：

• csinterface：CEP インターフェイスライブラリのオブジェクト。
• com.adobe.events.flash.selectionChanged：選択中のオブジェクトの変更をトリガーするイベント。前述のどのイベントでも使用できます。
• CallbackFunction：トリガーされるイベントをリスニングするメソッド。