この記事では、HTML5 カスタムコンポーネントのサンプルについて説明します。

この記事では、カスタムコンポーネントの作成方法について説明します。最初の例では、フレームワークと開発手順を理解するために、画像コンポーネント(Animate CC にも付属しています)とそのプロセスを説明します。2 つ目の例では、既存の UI コンポーネント(jQueryUI など)をラップして Animate CC に読み込む方法を説明します。

  1. DOM 画像コンポーネントの作成

    My Components」というカテゴリーを作成します。

    a. First Run フォルダー下の <HTML5Components> フォルダーに mycomponents というフォルダーを作成します。

    b. 添付の myimage.zip ファイルをダウンロードし、

        mycomponents フォルダーの下に中身を抽出します。

    ダウンロード

    c. Animate.を再起動します。

mycomponents フォルダー内のディレクトリ構造

コンポーネントフォルダー内に「My Components」という新しいカテゴリーがあり、そのカテゴリー下に My Image という新しいコンポーネントがあります。これをステージにドラッグ&ドロップし、画像ソースプロパティを設定して、ムービーをパブリッシュすると、動作しているカスタムコンポーネントを確認できます。 

コンポーネントメタデータ - components.js

components.js

カテゴリーが CATEGORY_MY_COMPONENTS に設定されていることに注意してください。各プロパティの名前も同様のキーを使用しています。これは、カテゴリーのローカライズされた文字列のキーです。locale フォルダーから strings.json を開くと、次のエントリを確認できます。

注意:

このファイルの編集時には、配列の最終エレメントの末尾に不要なコンマが付いているエラーがよく起こります。

カテゴリーの詳細

アイコンフィールドの値は Sp_Image_Sm に設定されています。assets フォルダーに移動すると、名前が Sp_Image_Sm で始まる次のような 2 つの png ファイルがその中にあります。

アイコンフィールドの値

これらは暗い UI と明るい UI 用のアイコンです。

components.json の「source」フィールドの値は「src/myimage.js」に設定されています。 

(function($) {    

// Register a component with the className: my.Image,
	// and prototype with the following overrides 
	// getCreateOptions
	// getCreateString
	// getProperties
	// getAttributes
   	$.anwidget("my.Image", {
        	options: {
			'visible': true,
			'position': 'absolute'
        	},
		_props: ["left", "top", "width", "height", "position", "transform-origin", "transform"],
		
_attrs: ["id", "src", "alt", "class", "border"],
		
// Return a unique ID with the prefix image
		// _widgetID is a global declared in anwidget
		// This id is used only if the user has not set any instance ID for the component in Animate CC
		// Otherwise the user configured name is used
		getCreateOptions: function() {
			return $.extend(this.options, { 'id': "image" + _widgetID++ });
		},
		
// Return the string for creating the DOM element
		// For image we just need to create the <img> tag
		getCreateString: function() {
			return "<img>";
		},
		
// Set of configurable properties
		getProperties: function() {
			return this._props;
		},
		
// Set of configurable attributes
		getAttributes: function() {
			return this._attrs;
		}    
	});   
})(jQuery);

コード内のコメントを読むと、コードを容易に理解できます。 

Animate に付属している他のコンポーネントのソースも自由にご覧ください。ほとんどの場合、まずはこれらのいずれかを使用し、その後、自分自身の要件に応じてそれを設定することができます。

jQuery-UI コンポーネントのラッピング

この節では、jQuery-UI ウィジェットをラップして Animate CC で使用する方法について説明します。この基本を理解すれば、他のどの UI フレームワークに含まれている他のどの既存コンポーネントをラップするときでも応用できます。

まず、Animate CC のパッケージされた DatePicker コンポーネント(jQuery-UI ウィジェット)を見てみましょう。次のアーカイブをダウンロードし、中身を解凍して参照します。

ダウンロード

解凍されたアーカイブの中身の構造

jquery-ui-1.12.0 というフォルダーは jQuery UI フレームワークのソースです。この中に、元の DatePicker ウィジェットとそのリソース(画像や CSS など)が格納されています。これらがラップされ、Animate CC で他の HTML5 コンポーネントと同様に使用されます。これが必要なのはローカルプレビューをする場合だけで、パブリッシュ設定で「ホストのライブラリ」を有効にしているときは、cdn を使用して依存先のソースをダウンロードできます。 

components.js

デフォルトで、jQuery と anwidget.js という 2 つの依存先モジュールがあります。 anwidget.js は CDN 上にはないので、同様の CDN エントリはありません。

次のエントリセットは、日付ピッカーウィジェットを jQuery UI から読み込むのに必要なその他のリソースに対するものです。他のライブラリに含まれている別のウィジェットをラップする場合でも、同様の依存先モジュールセットを同じように指定することができます。これらの依存先モジュールは、コンポーネントの初期化の前にダウンロードされます。

properties セクションでは、label というプロパティだけが公開されています。これは、日付ピッカーコンポーネントのラベルプロパティにバインドされています。同様に、他のプロパティも公開できます。どれを公開する場合も、ユーザーが Animate のオーサリング環境で設定できるようにします。実行時には、これらのプロパティはそれぞれ、インスタンスの options 配列に格納されているキー/値ペアとして使用できます。設定済みの値を実行時に抽出して適用できます。

メインソースファイル: src/datepicker.js

例とは異なるセクション

  1. getCreateString:

    jQuery-UI に含まれている日付ピッカーウィジェットでは、そのような入力テキストエレメントが取得されて、実行時にそれが日付ピッカーエレメントに変換されます。ですから、それに応じて適切に DOM を初期化するひよ痛があります。

  2. attach:

    このウィジェットの場合は、この関数をオーバーライドする必要があります。この API は、エレメントが DOM にアタッチされようとするたびに呼び出されます。ただし、ベースとなるランタイム(この場合は createjs)の動作方法が原因で、この API はフレームスパン中に何度も呼び出される可能性があります。

    ベースとなるエレメントのアタッチ状態を記憶した後、基底クラスのアタッチ API を呼び出します(this._superApply(arguments) を使用)。親となる DOM に初めてこのエレメントをアタッチしようとしている場合は、ベースとなる jQuery-UI ウィジェットの呼び出しを使用して、コンポーネントの DOM を日付ピッカーに変換します。https://jqueryui.com/datepicker/ を参照してください。

    JavaScript ウィジェットのほとんどは、これと同じように動作します。これと同じ手法を使用して、自分で選んだ任意のコンポーネントをラップして、同じように Animate CC に組み込むことができます。

  3. update:update をオーバーライドし、css プロパティをコンテナ div に、属性を実際の DOM エレメントにそれぞれ適用します。

    注意:

    attach、detach、update などの API をオーバーライドする場合は、基底クラスのデフォルト実装を評価し、その基底実装を適切なタイミングで呼び出す必要があります。そうしないと、コンポーネントの初期化が失敗する可能性があります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー