カスタム HTML5 コンポーネントの作成

Animate には一連のデフォルトコンポーネントが付属しています。しかし、それだけでは足りない場合があります。このトピックは、Animate のカスタム HTML5 コンポーネントを作成する方法を理解するのに役立ちます。

コンポーネント定義は次の 3 つの主要部分で構成されます。

• メタデータ：コンポーネントに関する情報（表示名、バージョン、設定可能な一連のプロパティ、アイコンなど）を提供します。これは components.js というファイルに記述されます。複数のコンポーネントをカテゴリーとしてグループ化することができ、その場合は、このファイルによって、カテゴリーに属するすべてのコンポーネントのメタデータを提供できます。
• ソース：実際のコンポーネントソースに関する情報を提供します。これは、コンポーネントを使用するムービーをプレビューまたはパブリッシュする際に、実行時に埋め込まれます。
• アセット：実行時の依存関係に関する情報（JavaScript ライブラリ、CSS、ランタイムアセット、アイコンなど）を提供します。これらのアセットは、Animate オーサリング環境で使用できます。

 コンポーネントの定義には、ローカライズ関連のリソースも含まれます。

Animate では、起動時に次のフォルダーを調べてカスタム HTML5 コンポーネントを探し、それらを読み込みます。

<AppData>/Local/Adobe/Adobe Animate 2017/en_US/Configuration/HTML5Components

~/Library/Application Support/Adobe/Animate 2017/en_US/Configuration/HTML5Components/

 上記のフォルダーパスは、米国英語に適用されます。Animate を他の言語で使用している場合、en_US を置き換える言語固有のフォルダー名を探してください。

components.js ファイルの格納場所にあるフォルダーごとに、Animate によって、カテゴリーが作成され、その中にすべてのコンポーネントが読み込まれます。

コンポーネントのメタデータは components.js というファイルに記述されます。このファイルは、HTML5Components ディレクトリ内の別個のフォルダーに格納されています。 

components.js

は、次のセクションで構成される JSON ファイルです。

• category：コンポーネントパネルでのこのコンポーネントセットの名前で、ローカライズ可能です。
• components：コンポーネントに関するメタデータを記述するエントリを要素とする配列。上記のサンプルでは、この配列の要素が 1 つだけです。メタデータは次のセクションで構成されます。

コンポーネントのソース

各コンポーネントには、以下を処理するコードを提供するソースファイルが関連付けられている必要があります。

• 設定したプロパティ値セットを割り当てたコンポーネントインスタンスの実行時での作成
• DOM へのアタッチと DOM からのデタッチ
• フレームごとのプロパティの更新

カスタムコンポーネントを開発しやすいように、基底クラスとユーティリティ関数が anwidget.js ファイルに用意されています。このインターフェイスは今後、機能強化される予定ですが、下位互換性は保たれます。現時点では、DOM ベースのコンポーネントのみサポートされていますが、Canvas ベースのコンポーネントもサポートされる予定です。現時点では、ウィジェットのみサポートされていますが、フレームワークが機能強化され、動作の割り当て（非 UI コンポーネント）もサポートされる予定です。

anwidget.js ファイルは First Run フォルダー内の HTML5Components/sdk フォルダーにあります。この中には、カスタムコンポーネントの基底クラス AnWidget と、カスタムコンポーネントを登録するためのユーティリティメソッド $.anwidget(<className>, {Object Prototype}) が用意されています。現在の実装では jQuery を使用しているので、ウィジェットから提供されるサービスを使用するたびに、jQuery が依存先モジュールとして常に追加されます。ただし、jQuery に暗黙に依存しないようにする場合は、ウィジェットと同じインターフェイスを提供するコンポーネントクラスを jQuery を使用せずに実装する必要があります。

HTML には、デフォルトで以下のセクション（$PRELOADER_DIV を除く）が含まれます。

上の図が DOM へのエレメントの追加順序を示していることに注意してください。したがって、dom_overlay_container div は canvas の上に示されています。

 最初のリリースでは、コードスニペットのように、dom_overlay_container div のID に依存している機能がいくつかあるので、この ID を変更しないでください。

上図からわかるように、dom_overlay_container div は canvas の上にオーバーレイとして示されています。ベースとなる canvas にもマウスイベントが必ず適切に伝達されるように、この div に CSS プロパティ {pointer-events: none} を使用しています。プロジェクトにおいて Animate で設定するすべてのコンポーネントインスタンスは、この dom_overlay_container div の子としてインスタンス化されアタッチされます。コンポーネントインスタンスの相対的順序は実行時に維持されますが、現時点では、コンポーネントインスタンスはすべて、常にオーバーレイとして表示されます。マウスイベントも受信するように、実行時のすべてのコンポーネントインスタンスに {pointer-events: all} を設定しています。

コンポーネントのライフサイクル

基本クラスは $.AnWidget と呼ばれ、以下のオーバーライドを提供します。

ローカライゼーション

カテゴリー文字列、コンポーネント表示名およびプロパティ名はローカライズできます。components フォルダー下にある locale という名前のフォルダー内に strings.json という名前のファイルを作成します。ローカライズするすべての文字列にキーと値のペアを提供し、components.js 内のキーを使用します。他のロケールについては、locale フォルダー下の対応するフォルダー内のファイルに文字列を記述する必要があります。

HTML5 のカスタムコンポーネントのパッケージ化と配布

Animate 開発者またはデザイナーは、パッケージ化されたすぐに利用できるコンポーネントを提供することにより、アニメーターがコードを書かなくてもカスタムコンポーネントをインストールして使用できるようにすることができます。以前は、アニメーターが HTML5 エクステンションを有効にするには、ファイル構造を理解し、プログラミングを行い、特定のフォルダーにファイルを手動で移動する必要がありました。

前提条件

• 開発者が作成したコンポーネント。コンポーネントの作成手順については、ここをクリックしてください。
• CC エクステンション署名ツールキット。

コンポーネントをパッケージ化する前に、コンポーネントのソースパスと出力先パスのメタデータを含む MXI ファイルを作成します。例えば、次のように指定します。

このソースと出力先ファイル情報は、エクステンションユーティリティがコンポーネントを正しくインストールするために必要となります。

コンポーネントのパッケージ化

HTML5 カスタムコンポーネントをパッケージ化するには、次の手順を実行します。 

コンポーネントの配布

パッケージ化されたこの projectName.zxp コンポーネントファイルは任意の Animate ユーザーに配布できます。

 アドビでは、Adobe Add-ons Web サイトを介して製品を配布することを推奨しています。アドオンは一般に（無料または有料で）配布することも、個人的に（特定のユーザーに無償で）配布することもできます。

配布されたコンポーネントのインストール

Animate デザイナーまたは開発者は、エクステンションの管理ユーティリティを使用して、配布された ZXP ファイルのコンポーネントをインストールできます。