マニュアルキャンセル

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

検索

最終更新日 : 2023年5月24日

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

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

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

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

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

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

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

ダウンロード

ファイルを取得する
myimage.zip ファイルをダウンロードするには、ここをクリックしてください。

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

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

コンポーネントメタデータ - 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($) {    

// className: my.Image を含むコンポーネントおよび
 // 次のオーバーライドを含むプロトタイプを登録 
 // getCreateOptions
 // getCreateString
 // getProperties
 // getAttributes
    $.anwidget(&quot;my.Image&quot;, {
         options: {
   'visible': true,
   'position': 'absolute'
         },
  _props: [&quot;left&quot;, &quot;top&quot;, &quot;width&quot;, &quot;height&quot;, &quot;position&quot;, &quot;transform-origin&quot;, &quot;transform&quot;],
  
_attrs: [&quot;id&quot;, &quot;src&quot;, &quot;alt&quot;, &quot;class&quot;, &quot;border&quot;],
  
// 接頭辞画像を含む一意の ID を返す
  // _widgetID は anwidget で宣言されたグローバル
  // この ID は、ユーザーが Animate のコンポーネントにインスタンス ID を設定していない場合にのみ使用される
  // それ以外の場合、ユーザーが設定した名前が使用される
  getCreateOptions: function() {
   return $.extend(this.options, { 'id': &quot;image&quot; + _widgetID++ });
  },
  
// DOM エレメントを作成するための文字列を返す
  // <img> タグを作成するためにのみ必要な画像用
  getCreateString: function() {
   return &quot;<img>&quot;;
  },
  
// 設定可能なプロパティのセット
  getProperties: function() {
   return this._props;
  },
  
// 設定可能な属性のセット
  getAttributes: function() {
   return this._attrs;
  }    
 });   
})(jQuery);

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

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

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

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

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

ダウンロード

ファイルを取得する

datepicker.zip ファイルをダウンロードするには、ここをクリックしてください。

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

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

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

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

例とは異なるセクション

getCreateString:

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

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

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

JavaScript ウィジェットのほとんどは、これと同じように動作します。これと同じ手法を使用して、自分で選んだ任意のコンポーネントをラップして、同じように Animate に組み込むことができます。
update：update をオーバーライドし、css プロパティをコンテナ div に、属性を実際の DOM エレメントにそれぞれ適用します。

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