このガイドではカスタムのユーザーエクステンションを作成する方法を説明します。これらの機能をプロジェクトで使用する方法については、ユーザーエクステンションの使用ガイドを参照してください。
ユーザーエクステンションを使用すると、ある種の標準的でない機能を実装する複数のコンポーネントをパッケージ化し、簡単に再利用することが可能です。
また、Sencha Architect では個別のクラスまたはコンポーネントを他のプロジェクトや別のユーザーと共有できる機能も提供しています。これについては、クラスの働き ガイドで説明しています。
ユーザーエクステンションの作成
ユーザーエクステンションは、Architect プロジェクトの外部で開発されるユーザーインターフェイスコンポーネントです。Sencha Architect の初期のリリースでは、このコンポーネントをリソースとして Architect プロジェクトに含めることができましたが、静的なものであり、キャンバスには表示されず、Architect に付属するコンポーネントのように使用したり操作したりすることはできませんでした。
Sencha Architect 3.0 以後は、正しくパッケージ化されたユーザーエクステンションを Architect プロジェクトに統合できるようになりました。コンポーネントに対する完全なインタラクティブ性はサポートされていません。アプリケーション内でアクティブであるかのように、要素をクリックして操作することはできませんが、コンポーネントをキャンバスにドラッグしたり表示したり、コンフィグパネルでコンポーネントにコンフィグを設定したりできます。
個々のクラス/コンポーネントは簡単にファイルにエクスポートでき、ツールボックスに保存できます。これが最も簡単にクラス/コンポーネントを共有したり再利用したりする方法です。ユーザーエクステンションパッケージ（.aux ファイル）は、次のことに 1 つ以上該当する場合、有用です。
- 共有するのが単一のクラス/オーバーライドにとどまらない場合。たとえば新規または特別なコンフィグを公開したり、「sub」または「related」コンポーネントを自動生成したりする場合です。
- このコードをインポートする人が機能をキャンバスで表示できること、および/またはアプリのプレビュー時に正しく機能することが重要である場合。
- フレームワークに組み込まれているコンポーネント以上の機能を備えたコンポーネントを共有し再利用したい場合。たとえば、 ドラッグドロップユーザーエクステンションでは、通常のコンポーネントでは使用できない機能を提供しています。
Architect のユーザーエクステンションの作成手順は次のとおりです。
- Sencha Cmd を使用してユーザーエクステンション（UE）パッケージを生成します。
- エクステンションで使用する JavaScript ファイルを作成します（各クラスにつき 1 つ）。Ext JS または Sencha Touch フレームワークのいずれかを使用し、Architect または使用するフレームワークのツールで作成できます。
- JavaScript ファイルを UE パッケージの src フォルダに追加します。
- UE パッケージのルートディレクトリに architect ディレクトリを作成し、ユーザーエクステンションで定義する各クラスに対して JSON 定義ファイルを作成し、これらの定義ファイルを architect ディレクトリに格納します。
- 作成するユーザーエクステンション固有の CSS ファイルを resources/css ディレクトリに追加します。
- package.json ファイルに作成するユーザーエクステンションの情報を記録します。
- ユーザーエクステンションをパッケージ化します。
- 作成したユーザーエクステンションパッケージをテストします。
各手順に関する詳細は、以後に説明します。ここで触れたファイルの例を見るには、Sencha Market にある任意の Sencha ユーザーエクステンションをダウンロードしてインストールして、ソースを見てください。
エクステンションパッケージの作成
Sencha Cmd ワークスペースが未設定である場合、ワークスペースとして使用するディレクトリを選択し、次のように入力します。
sencha generate workspace /path/to/directoryパッケージを作成するには、ワークスペースに移動して次のように入力します。「FooExtension」は使用するエクステンション名に置換します。
sencha generate package -type code FooExtensionこれによりワークスペースに packages フォルダが作成され（なかった場合）、作成するパッケージ名のフォルダ（たとえば「FooExtension」）が packages 内に作成されます。
作業のほとんどは Sencha Cmd で行われますが、ユーザーが自分用のディレクトリをいくつか作成し、データを追加することが必要です。エクステンションパッケージのフォーマットはユーザーエクステンションの構造で示しています。
.js および CSS ファイルの追加
全クラスの .js ファイルを src ディレクトリにコピーして、エクステンションパッケージにデータをセットします。ほとんどのユーザーエクステンションには 1 つか 2 つのクラスしか含まれていませんが、クラスは事実上無制限に含めることができます。
作成するユーザーエクステンション固有の CSS ファイルを resources/css ディレクトリに追加します。
すべてのクラスに対する定義ファイルの作成
Architect のツールボックスを通じて使用するためには、ユーザーエクステンションパッケージの各クラスに JSON 定義ファイルが必要です。定義ファイルは、パッケージツリーのルートディレクトリに先ほど作成した architect ディレクトリにあります。Sencha Architect インフラに統合されると、この定義によりユーザーエクステンションの特徴と動作が定義されます。これらは、アイテムの名前をツールボックスおよび対応するクラスに渡すだけの極めてシンプルなファイルであることがほとんどですが、より複雑な動作を行うことも可能です。
データ追加が必要な定義ファイルとフィールドに関する詳細については、ユーザーエクステンションの構造を参照してください。
package.json ファイルへのデータ追加
sencha generate コマンドでは空の package.json ファイルが設定されます。このファイルを手作業で編集して、使用するエクステンションに関する情報を追加することが必要です。データ追加が必要な package.json ファイルとフィールドに関する詳細については、ユーザーエクステンションの構造を参照してください。
Readme.md ファイルの作成
すべてのユーザーエクステンションパッケージには、次の情報を持つ Readme.md ファイルが必要です。
- パッケージとそのコンポーネントの説明。
- UE の所有者および関連するすべてのライセンス情報の指定。
- パッケージに関する既知の問題。
- パッケージの更新時には、当該バージョンの新機能と、互換性の問題すべてを説明。
作成したユーザーエクステンションパッケージのテスト
ユーザーエクステンションパッケージのテストは、次の手順で行います。
エクステンションストレージ用の Architect 設定で指定したディレクトリのバージョン設定したフォルダにパッケージをコピーすることにより、テストシステムにインストールします。例:C:\Users\あなたのユーザー名\Documents\Architect\Extensions\MyExtension\1.0\
作成したエクステンションと互換性のあるフレームワークを使用する Architect プロジェクトを開き、作成したユーザーエクステンションをそのプロジェクトで使用します。
テスト対象となる特定の項目は次のとおりです。
- 定義が適切にロードされ、ツールボックスの [Extensions（エクステンション）] に表示されるかどうかを確認します。
- ユーザーエクステンションの各コンポーネントをプロジェクトに追加し、プロジェクトを保存/ビルドします。アプリケーションのプレビューバージョンですべての JavaScript と CSS ファイルが正しく参照されているかどうかを確認します。
- コンポーネントに使用できる任意のコンフィグの値を変更し、新しい値が実装されているかどうかを確認します。
- コンフィグに無効な値を設定し、エラー処理が適切に行われるかどうかを確認します。
- プロジェクトをアーカイブにエクスポートし、ソースコード管理にチェックインします。次に、このプロジェクトを別のシステムにダウンロードして、すべてのコンポーネントが含まれており使用可能であることを確認します。
作成したユーザーエクステンションパッケージのパッケージ
Architect でユーザーエクステンションをパッケージする方法は次のとおりです。
- エクステンション名を右クリックして、[Package Extension（エクステンションをパッケージ）] を選択します。
- エクステンションを保存するファイルとパスを選択します。
生成される .aux ファイルは Architect の他のユーザーと共有できます。
ユーザーエクステンションを手作業でパッケージする方法は次のとおりです（非推奨）。
- package.json を含むディレクトリからパッケージの全ファイルを圧縮します（エクステンションの上位ディレクトリから圧縮しないようにしてください - エクステンションの解凍時にはコンテンツをワーキングディレクトリのレベルに展開することが必要です）。
- 作成した .zip ファイルの名前を変更して .aux 拡張子にします。
ユーザーエクステンションの新しいバージョンをパッケージする方法は次のとおりです。
- package.json ファイルの
versionフィールドの値を 1 増加します。Architect ではインストール時にバージョン番号を比較するため、この手順を省略すると、ユーザーが更新された新しいエクステンションをインストールできなくなります。