本ガイドでは、Architect プロジェクト、カスタムのアプリのテンプレート、 ユーザーエクステンションを格納するファイルについての情報を提供します。Architect 3 では Sencha Cmd を使用してプロジェクトをビルドします。ほとんどの場合、Architect がビルド作業を行うため、Cmd の知識は必要ありません。Cmd の内部的な働きに関する詳細は、次の高度な Sencha Cmd ドキュメントを参照してください。
これらは Ext JS のドキュメントとして公開されています。この高度な情報は Touch にも関係します。
ストレージの場所
プロジェクト、コンポーネント、エクステンション、テンプレート、テーマのストレージの場所は、[Architect Preferences（Architect 基本設定）] 画面の [File（ファイル）] セクションで設定できます。
プロジェクトファイルの構造
すべての Architect プロジェクトに必要な基本的構造とファイルは、[Save（保存）] ボタンを押してプロジェクトを最初に保存する際に生成されます。本ガイドでは、このファイルの構造を、オプションのファイルやプロジェクトサイクルの後のほうで作成するその他のファイルを含めて説明します。
Architect プロジェクトのアプリケーションファイル「MyApp1」は「myapp1」ディレクトリに次の構造で格納されています。ここでの説明には、オプションのファイルやプロジェクトサイクルの後のほうで作成するその他のファイルも含まれる点に注意してください。すべての Architect プロジェクトに必要な基本的構造とファイルは、[Save（保存）] ボタンを押してプロジェクトを最初に保存する際に生成されます。
デフォルトでは、これらのファイルは Documents/Architect/Projects ディレクトリにある、プロジェクト保存時に指定した名前を持つフォルダ内に格納されています。
myapp1/
myapp1.xds # File used as entry point to saved project
.architect # User settings for your project such as nodes in Inspector
index.html # HTML index file
app/
controller/ # .js files for components in Controllers node
override/ # Optional folder that contains override files
form/
override/ # Optional folder that contains override files
model/ # .js files for components in Models node
override/ # Optional folder that contains override files
Readme.md
store/ # .js files for components in Stores node
override/ # Optional folder that contains override files
view/ # .js files for components in Views node
override/ # Optional folder that contains override files
app.js # Launches the Application class
app.json # Application decriptor
README.md
bootstrap.css
bootstrap.js
bootstrap.json
build/ # Folder where build output is placed
build.xml # Defines the app build process
ext/ # Copy of the Ext JS SDK (Ext JS projects only)
index.html # Entry point to your application
metadata/ # Files that describe the pieces of the project
Application # Metadata for the Application node
model/ # Metadata for components in the Models node
resource/ # Metadata for components in the Resources node
store/ # Metadata for components in the Stores node
view/ # Metadata for components in the Views node
overrides/
packager.json # Configuration for native packaging (Touch only)
packages/ # Sencha cmd packages
resources # Library file plus project files developed outside Sencha Architect
project-images/ # (optional) Contains images to use for styling the app
sass/
.sencha/
theme/ # Custom Themes and Themes applied from Toolbox (Ext JS only)
touch/ # Touch libraries (Touch projects only)最上位レベルのディレクトリ
プロジェクトの最上位レベルのディレクトリには次のファイルが格納されています。
.xds ファイル
Architect でプロジェクトへのエントリポイントとして使用するファイルには .xds という接尾辞が付いています。名前のメインの部分は、プロジェクトの初回保存時に付けたものとなります。これには、プロジェクトを開いたり保守したりするために Architect で使用する少量のデータが格納されています。Architectを起動して、保存されたプロジェクトで作業を行うとき、Architectは.xdsファイルを開いています。
これはシンプルな JSON 設定ファイルであり、Architect を使用して作業する際に直接変更する唯一のファイルです。プロジェクトをビルドするたびに、Architect ではプロジェクトの実行に必要な全てのコードファイルを作成します。
index.html および app.js ファイル
アプリケーションをプレビューして実行する際にブラウザにロードされるインデックスファイルです。アプリケーションの初期化ロジックが格納されています。
.architect** ファイル
.architect ファイルにはプロジェクトのユーザー設定が保存されています。たとえば、ノードが [Project Inspector（プロジェクトインスペクタ）] で展開されているか折りたたまれているか等の設定です。**このファイルはソース管理から除外してもかまいません。**
packager.json ファイル（Touch プロジェクトのみ）
packager.json ファイルには Sencha Touch プロジェクトのネイティブパッケージの作成情報が格納されています。
app ディレクトリ
app ディレクトリにはプロジェクトの各最上位レベルコンポーネントの .js ファイルが、[Project Inspector（プロジェクトインスペクタ）] ウィンドウにリストされているノード（Controllers、Models、Stores、Views）に対応するサブフォルダとフォームのフォルダに整理されて格納されています。このファイルは Architect によって作成され、プロジェクトの保存またはビルドのたびに上書きを行うので、直接編集するべきではありません。
コントローラや*モデル*などの override サブフォルダ（オプション）には、コードエディタの [Create Override（オーバーライドの作成）] ボタンを使用して作成したオーバーライドが保存されます。ツールボックスでコンポーネントを右クリックしてアクセスできるこの [Create Override for this Class（このクラスのオーバーライドの作成）] ボタンを使用して作成したオーバーライドは、サブクラスではなく新規のクラスとなります。
Architect の機能では提供していない特別な操作を行う必要がある場合は、Architect のコードエディタを使用してオーバーライドファイルを作成してください。各最上位レベルのコンポーネントやクラスでは、これが可能です。オーバーライドクラスは適切なタイプのディレクトリに作成された override サブディレクトリ（たとえば view/override や store/override）に保存されます。
bootstrap.js、bootstrap.css、bootstrap.json
これらのファイルは開発モードでアプリをビルドする際に使用されます（ビルドせずに index.html ファイルをプレビュー）。*bootstrap.css* が正しいテーマを開発モードに取り込みます。独自の .css file ファイルを app.json ファイルに追加したり、使用する index.html ファイルのブートストラップコメントの外に含めたりすることが必要となる場合があります。
詳細については、ウェブアプリのビルドを参照してください。
build.xml とビルドディレクトリ
build.xml ファイルでは、作成するアプリケーションのビルドプロセスを定義しています。Cmd によって生成され、通常は変更しません。ビルドプロセスを理解したい場合、これを読んでみると面白いかもしれません。ビルドの出力結果は build ディレクトリに保存されます。
metadata ディレクトリ
metadata ディレクトリには、プロジェクトの全てについての詳細を記述したファイルが保存されています。各クラス（コントローラ、ビュー、モデル、ストア、リソース）の情報はそれぞれのファイルに保存されます。metadata ファイルは直接編集しないでください。ただし、プロジェクトにとって重要なファイルですので、ソース管理リポジトリで管理してください。通常のソース管理操作（変更の取り消しやソースコード管理からの更新など）による変更は想定内です。
packages ディレクトリ
packages ディレクトリには、使用するテーマを保持するパッケージなど、このアプリケーション用に自動生成されたフレームワークパッケージが格納されています。
resources ディレクトリ
resources ディレクトリには、Architect 外で作成され編集されたファイルやフォルダが保存されています。たとえば、Architect 外で開発された CSS ファイル、画像、SCSS ファイル、JavaScript などです。これらは作成するアプリに外部リソースとして統合されます。たとえば、外部の .css ファイルをアーカイブに追加したあとに CSS リソースをプロジェクトに追加して、そこからこのファイルをポイントします（css/styles.css など）。詳細は、リソースの使用を参照してください。
リソースとして追加された CSS および JavaScript ファイルは Architect のコードエディタで編集できます。
[Project Inspector（プロジェクトインスペクタ）] の Resources の下には Library ノードが表示されていても、フォルダ構造の中にはこのライブラリを表すファイルは存在しないことに注意してください。
注意： Architect 外で編集されたプロジェクトファイルはリソースとして Architect にインポートするか、ユーザーエクステンションとしてパッケージ化できます。
theme
Sencha Architect のテーマ作成プロセスによって自動生成されたファイルが格納されています。
ext または touch ディレクトリ
保存されている各 Architect 3 プロジェクトには、そのプロジェクトで使用するフレームワーク SDK のコピーを保持するディレクトリツリーが含まれています。これには GPL および商用ビルドのライブラリが、デバッグ版および本番用のライブラリと共に含まれます。最初に Architect プロジェクトを開く際、プロジェクトは Sencha サーバーにあるフレームワーク SDK のコピーにアクセスするように設定されますが、初回保存時にはこの SDK のコピーをプロジェクトツリーに取り込みます。
同一のフレームワーク SDK を使用する複数のアプリケーションを作成して管理している場合、アプリケーション用のディレクトリの外部に ext または touch ディレクトリを作成すると良いでしょう。これにより、各アプリケーションのディレクトリに専用の SDK のコピーを埋め込む代わりに、単一のフレームワーク SDK のコピーをすべてのアプリケーションで共有できます。これを行う場合、ビルドツールに使用する SDK の場所を通知することが必要です。Resources ノードの Library ノードを選択し、「Library Base Path」コンフィグの値（デフォルト値は ext/ または touch/）を対象のフレームワーク SDK ディレクトリの場所を示す値に変更します。たとえば、*ext* ディレクトリを Extensions、*Projects*、*Templates* ディレクトリと同じレベルにおく場合、このコンフィグに「../../ext」を設定します。
Sencha Cmd でフレームワーク SDK を使用してアプリケーションを生成する方法に関する詳細は、次を参照してください。
ユーザーエクステンションの構造
デフォルトでは、インストールされている ユーザーエクステンション（UX）のファイルは Documents/Architect/Extensions ディレクトリに、そのエクステンションの名前で格納されます。ユーザーエクステンションはバージョンごとに固有のサブディレクトリを保持し、その名前は1.0、1.1、のようになります。このディレクトリは [Edit Menu（編集メニュー）] > [Architect Settings（Architect 設定）] > [Asset Storage（アセットストエージ）] セクション > [Extension（エクステンション）] で変更できます。
バージョン番号が付けられたディレクトリに保存されているファイルやディレクトリは次のとおりです。
architect/ # JSON definition files for each of the UX classes
Xx1.Definition.js # Definition file for the Xx1.Definition class
Xx2.Definition.js # Definition file for the Xx2.Definition class
...
build.xml # Generated file that controls how the UX is built
docs/
package.png # Graphic used on Sencha Market for this UX
screenshots/
pict.png # Graphic used for Sencha Market
licenses/ # License agreement for this UX
Readme.md
overrides/ # Contains any overrides that are required
package.json # Describes the User Extension package to be built
Readme.md # Description of this UX used on Sencha Market
resources/ # Static resources used in this UX
css/ # CSS resources for this UX
images/ # Files for images used in this UX
sass/ # SASS files used in this UX
config.rb
etc/ # General, non-component oriented SASS
example/
Readme.md # Information about this SASS
etc/ # SASS files that must be used explicitly
src/ # SASS sources that mimic the component-class hierarchy
# These files are gathered in a build of the CSS
# based on classes used by the build.
var/ # Contains variable declaration files named by component class
src/ # Javascript source files for each extension class
xxxx.js
yyyy.jsほとんどのファイルが自動生成されたものです。*packager.json* ファイルには、手作業で情報を設定する必要があります。ユーザーエクステンション内の各クラス/コンポーネント用のDefinition（定義）ファイルも、手作業で作成してデータを設定する必要があります。次のセクションでは、この 2 つのファイルの完全なリファレンス情報を提供します。これらのファイルの設定に関する説明やガイドラインについては、アプリのテンプレートとユーザーエクステンションの作成を参照してください。
定義ファイル
定義ファイルでは次のことを定義します。
- ユーザーに対するエクステンションの提示方法
- ユーザーに公開する設定
- Sencha Architect における動作
エクステンション内のクラスそれぞれについて定義ファイルを 1 つ作成することが必要です。ファイルの拡張子は .js でなければなりません。ファイル名にはクラス名と「Definitions」または「Def」という文字列を使用することを推奨します。たとえば、FancyPants というエクステンションの場合、定義ファイルの名前は「FancyPantsDef.js」とします。
定義ファイルはすべて、User Extension Project ディレクトリの architect セクションに格納されています。*package.json* ファイルでは、エクステンション内の各クラスに対する定義ファイルを識別します。
サンプルの定義ファイルを次に示します。
{
classAlias: "plugin.dragdropregion",
className: "Ext.ux.DragDropRegion",
inherits: "abstractplugin",
autoName: "MyDragDropRegion",
validParentTypes:["abstractpanel"],
"toolbox": {
"name": "Drag Drop Region",
"category": "Containers",
"groups": ["Containers","Views"]
},
configs: [{
name: 'drag',
type: 'boolean',
hidden: false,
initialValue: true,
merge: false
},
{
name: 'drop',
type: 'boolean',
hidden: false,
initialValue: true,
merge: false
},
{
name: 'group',
type: 'string',
hidden: false,
initialValue: 'ddg',
merge: false
},{
name: 'notifyEnterCls',
type: 'string',
hidden: false,
initialValue: 'highlightDropZone',
merge: false
},
{
name: 'dragLabel',
type: 'string',
hidden: false,
initialValue: 'Untitled Region',
merge: false
},
{
name: 'frameSwapped',
type: 'boolean',
hidden: false,
initialValue: 'true',
merge: false
},
{
name: 'frameColor',
type: 'string',
hidden: false,
initialValue: '#99FF99',
merge: false
},
{
name: 'frameCount',
type: 'number',
hidden: false,
initialValue: 2,
merge: false
}]
}これらの全プロパティの説明が下の表に記載されています。
必須のプロパティ
| プロパティ | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| className | string | -- | エクステンションのクラス名です（たとえば Ext.ux.Coverflow）。このクラスの src ファイルにある extend 行の内容と一致していることが必要です。 |
| classAlias | string | -- | エクステンションのエイリアスです（たとえば widget coverflow）。このクラスの src ファイルにある alias 行の内容と一致していることが必要です。 |
オプションのプロパティ
| プロパティ | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| inherits | string | Ext.Base | このクラスが継承するクラスです。 |
| autoName | string | -- | このクラスをプロジェクトに初めて含める際に、クラス名を自動生成するのに使用される文字列です。この名前は [Project Inspector（プロジェクトインスペクタ）] とコードエディタファイルに表示されます。 |
| toolbox | object | -- | このコンポーネントがツールボックスでどのように表示されるかを記述するオブジェクトです。下記を参照してください。 |
| configs | object 配列 | -- | 設定オブジェクトの配列 |
| listeners | object 配列 | -- | リスナオブジェクトの配列。使用できるイベントに関する詳細な説明は後述します。 |
| validParentTypes | string 配列 | すべての親 | このオブジェクトに対する有効な親タイプの配列（xtype に対応する文字列を使用）です。ここにタイプがリストされている場合、このコンポーネントはこのリストに挙げたタイプのいずれかに一致するコンポーネントにのみドロップできます。 |
| validChildTypes | string 配列 | すべての子 | このオブジェクトに対する有効な子タイプの配列です。ここに挙げたタイプのコンポーネントのみがこのコンポーネントの子となれます。 |
| disableInitialView | boolean | false | true の場合、このコンポーネントはユーザーの初期ビューに表示されません。 |
| disableDuplication | boolean | false | true の場合、このコンポーネントは複製できません。 |
| hideConfigs | string 配列 | -- | 非表示にする設定の配列です。別の定義を継承する際、設定の一部を非表示にしたい場合に便利です。 |
| showConfigs | string 配列 | すべてのコンフィグ | 表示する設定の配列です。ここに設定がリストされている場合、表示できるのはリストに挙げられているもののみです。このプロパティが指定されていない場合、すべてのコンフィグが [Config（コンフィグ）] パネルに表示されます。 |
toolbox プロパティ
toolbox プロパティは、ツールボックスにおけるこのエクステンションの表現を記述するオブジェクトです。
| プロパティ | タイプ | 説明 |
|---|---|---|
| name | string | このエクステンションのツールボックスカテゴリに表示される、ユーザーにわかりやすい名前です。 |
| category | string | エクステンションのカテゴリです。このエクステンションが表示される、ツールボックスのカテゴリです。この値には常に「Extensions」が追加されるため、ユーザーエクステンションコンポーネントはすべてこの Extensions カテゴリに表示されます。「Container」や「Buttons」といった適切な機能別のカテゴリも作成すると良いでしょう。このクラスを複数のカテゴリで表示するには、この例の「groups」での表示に使用するのと類似した配列を作成します。 |
| groups | string 配列 | フィルタグループの配列です。ツールバーの右カラムにこのクラスがリストされるグループを定義します。グループは、ツールボックスにデフォルトで存在するものでも、新しく作成するものでも構いません。 |
configs
このコンポーネントでサポートされるコンフィグを記述する設定オブジェクトの配列です。ここにリストされているコンフィグはすべて、「hidden」プロパティが「true」となっていない限り、コンポーネントの [Config（コンフィグ）] パネルでセットできます。
| プロパティ | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| name | string | -- | [Config（コンフィグ）] パネルで使用される表示名です。 |
| type | -- | -- | このコンフィグのタイプです（boolean、string など）。 |
| hidden | boolean | -- | true の場合。 |
| initialValue | -- | -- | 作成時に自動設定される値です。 |
listener オブジェクト
onCreate、onSetup などのイベントに対するリスナオブジェクトの配列です。
| プロパティ | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| name | string | -- | このオブジェクトの名前です。 |
| fn | string | イベントが検出されると呼び出される関数です。 |
package.json ファイル
package.json ファイルでは、ユーザーエクステンションパッケージの作成方法、このパッケージのバージョン番号、使用できるフレームワークのバージョン、パッケージの作成に必要なファイルすべてを定義します。**sencha generate** コマンドにより、*package.json* ファイルの雛形をセットアップします。
{
"name": "DreidelExtension",
"type": "code",
"creator": "anonymous",
"summary": "Short summary",
"detailedDescription": "Long description of package",
"version": "1.0.0",
"compatVersion": "1.0.0",
"format": "1",
"local": true,
"requires": []
}このファイルを手作業で編集して、使用するエクステンションに関する情報を追加することが必要です。フィールドは次のように定義されます。
| フィールド | 説明 |
|---|---|
| name | ユーザーエクステンションパッケージの名前です。この名前は sencha generate のコマンドラインで指定された名前から生成されます。これによってディレクトリ名が決まるため、変更しないでください。 |
| type | 「code」でなくてはなりません。 |
| creator | このユーザーエクステンションの作者名を明記したい場合には、ここに名前を入れます。 |
| summary | 作成したエクステンションの概要を記述します。たとえば、「特別なウィジェットを備えたおしゃれなパネル」などです。（将来の利用のために予約） |
| detailedDescription | ユーザーエクステンションのより詳細な説明です。（今後のために留保） |
| version | ユーザーエクステンションの今回リリースのバージョン番号です。1.1.2 というようなバージョンの文字列となります。Sencha Cmd ではユーザーエクステンションの新規作成時に 1.0 を自動設定します。アップグレードを反映する番号に変更できます。 |
| compatVersion | Architect では現在使用していません。 |
| local | 有効な値は「local」です。-->. |
| requires | ユーザーエクステンションパッケージをロードする前にロードすることが必要なクラスの配列です。たとえば、エクステンションクラスが依存している大規模なライブラリがある場合に便利です。requires を使用しないと、必須ライブラリのロード処理が完了する前に、コンポーネントによる処理が開始される場合があります。 |
compatVersion と local 行の間に architect セクションを追加することも必要です。以下は、SchedulerGrid ユーザーエクステンションからとった例です。これは、クラスを 5 つ持つ複雑なユーザーエクステンションです。
"architect": {
"defsonly": true,
"compatFrameworks": [
"ext42"
],
"requires":[
"sch-all-min.js"
],
"classes": [{
"definition": "ResourceModel.js",
"className": "Sch.model.Resource",
"js": ["ResourceModel.js"],
"css": []
},{
"definition": "ResourceStore.js",
"className": "Sch.data.ResourceStore",
"js": ["ResourceStore.js"],
"css": []
},{
"definition": "EventModel.js",
"className": "Sch.model.Event",
"js": ["EventModel.js"],
"css": []
},{
"definition": "EventStore.js",
"className": "Sch.data.EventStore",
"js": ["EventStore.js"],
"css": []
},{
"definition": "SchedulerGridPanel.js",
"className": "Ext.ux.SchedulerGrid",
"js": ["SchedulerGridPanel.js"],
"css": [
"editor.css",
"sch-all.css"
]
}]
},フィールドは次のように定義されます。
| フィールド | 説明 |
|---|---|
| defsonly | （オプション）クラスの定義を指定することはできますが、JavaScript ファイルは指定できません。たとえば、Scheduler Grid ユーザーエクステンションには個別に定義された 5 つのクラスを定義する scheduler-grid-all.js がありますが、その定義はすべて schedulergrid-all.js クラスで既に行われています。 |
| compatFrameworks | このユーザーエクステンションを使用できるフレームワークのバージョンです。ピリオドなしの文字列で表されます（「touch22」、「ext42」など）。この文字列では 2 桁以上の数字を使用することはできません。たとえば「ext421」と指定すると、パッケージはロードされません。複数の値はカンマで区切って指定できますが、1 つのユーザーエクステンションパッケージに Ext JS フレームワークと Sencha Touch フレームワークの両方を指定することはできませんので、注意してください。 |
| requires | （オプション）このエクステンションのクラスを実行する前にロードする必要のあるクラスをリストします。 |
| classes array | パッケージのカスタムコードを構成するクラスすべてをリストする配列です。各クラスの .js Javascript ソースは src ディレクトリに格納し、architect ディレクトリには各クラスの定義ファイルを格納することが必要です。 |
| className | このクラスの完全修飾名です。 |
| definition | このクラスの定義ファイルの名前です。定義ファイルは architect ディレクトリに格納することが必要です。 |
| js | このクラスに対応する src フォルダにあるファイル名の配列です。このファイルは 1 つしかない場合がよくあります。 |
| css | このクラスに対応する resources/css フォルダにあるファイル名の配列です。CSS 定義を単一のクラスではなくユーザーエクステンション全体に適用する場合、この宣言を classes 配列の外部で行います。 |
| css | src/css フォルダからロードする CSS ファイルの配列。クラスから独立した CSS ファイルです。Architect プロジェクトの中で、ユーザーエクステンションパッケージのクラスが少なくとも 1 つは使われている場合にのみロードされます。 |
空白のものも含め、すべてのフィールドをファイルに含めることが必要です。たとえば、クラスに固有の CSS ファイルがない場合、**css** フィールドは空です。
アプリのテンプレートファイルの構造
カスタムのアプリのテンプレートを作成する手順に、アプリのテンプレートの作成を参照してください。
インストールしたカスタムのアプリテンプレートのファイルとディレクトリは次のとおりです。
template.json # Template metadata such as title, category and description
template.xda # Project archive containing the template code
preview.png # (Optional) Preview PNG image.
preview/ # (Optional) Provides a live preview of template within architect
app/ # Any architect app with index.html can be used for preview
controller/
Tasks.js
model/
Tasks.js
store/
Tasks.js
view/
FormPanel.js
MainView.js
TaskList.js
index.html
app.jsデフォルトでは、カスタムのアプリテンプレートのファイルは Documents/Architect/Templates ディレクトリに格納されます。テンプレートはフォルダから動的に読み込まれるため、一連のテンプレートをソースコントロールを介して、あるいは単純なコピー/貼り付けで、簡単に共有できます。
この保存場所は、[Edit Menu（編集メニュー）] > [Preferences（基本設定）] > [File（ファイル）] > [Templates（テンプレート）] を開いて設定を変更することで、変えられます。この場所を変更すると、既存のテンプレートが自動的に移行されます。
テンプレートはできるだけシンプルにすることが重要です。現在のプロジェクトやプロジェクトのアーカイブ（.xda）ファイルを使用してテンプレートを作成すると、ビルドファイル、ユーザー設定、SDK ファイルといった不要なアイテムが自動的に削除されます。
テンプレートのプレビュー画像
テンプレートに「preview.png」ファイルを含めると、Architects テンプレートブラウザで表示できる視覚的なプレビューをユーザーに提供できます。プレビュー画像の推奨サイズ（ピクセル）は次のとおりです。
- デスクトップまたはタブレットをターゲットとするテンプレート:*800x600*
- スマホをターゲットとするテンプレート:*325x525*
テンプレートのプレビュー
テンプレートにリアルタイムのプレビューを含めることもできます。現在のプロジェクトやプロジェクトのアーカイブ（.xda）ファイルを使用してテンプレートを作成する際、プレビューフォルダが自動作成されますが、プレビューファイルはいつでも編集できます。
プレビューフォルダが正常に機能するには、フォルダに「index.html」ファイルが必要です。
テンプレートのメタデータ
テンプレートのメタデータは次のように template.json に格納されます。
{
"title": "Button Template",
"name": "ButtonProject",
"description": "A template with a big button.",
"category": "My Templates",
"framework": "ext42"
}そこに、次のテンプレート値が保存されます。
| プロパティ | タイプ | 必須 | デフォルト値 | 説明 |
|---|---|---|---|---|
| name | string | true | -- | テンプレートのプロジェクト名です。（編集しないでください） |
| framework | string | true | -- | テンプレートのフレームワークです。たとえば、「ext42」などです。（編集しないでください） |
| title | string | true | -- | テンプレートブラウザで使用される表示タイトルです。 |
| category | string | true | -- | テンプレートが表示されるテンプレートブラウザ内のカテゴリです。 |
| description | string | false | -- | テンプレートの詳細な説明です。 |
| usePreviewImage | boolean | false | false | 動的なテンプレートではなくプレビュー画像をテンプレートで強制的に使用します。 |
| profile | string | false | -- | テンプレートブラウザにおけるテンプレートの表示とプレビューの方法を決定します。ExtJS には「desktop」を、Sencha Touch には「phone」を自動的に使用します。「tablet」という値を指定して、タブレット様の表示を行うこともできます。 |
高度なテンプレートの編集
テンプレートを作成またはインポート後に編集するには、ローカルのテンプレートフォルダで直接編集します。*template.json* メタデータファイル、プレビュー画像、リアルタイムプレビューファイルを直接編集できます。ただし、実際のテンプレートのコードはプロジェクトのアーカイブ（template.xda）として内部的に保存されているため、Architect を使用して次の方法で編集することが必要です。
- テンプレートフォルダで template.xda ファイルを探します。
- [File（ファイル）] > [Import Archive（アーカイブをインポート）] を選択します。
- 必要に応じてプロジェクトを編集し、一時的な保存場所に保存します。
- 完了したら、[File（ファイル）] > [Archive Project（プロジェクトをアーカイブ）] を選択します。
- 新しいプロジェクトアーカイブを「template.xda」としてテンプレートフォルダに上書き保存します。
- テンプレートメタデータの framework と category の値がアーカイブしたプロジェクトのそれと同じであることを確認してください。
テンプレートのバージョン管理とアップグレード
テンプレートは特定バージョンの ExtJS や Touch に固有のものです。 template.json の framework の値は template.xda もアップグレードする場合を除き、変更してはなりません。テンプレートをアップグレードする場合、そのテンプレートを使用して新しいプロジェクトを作成し、そのプロジェクトを対象のフレームワークにアップグレードし、これを使用して新しいテンプレートを作成するのが最適な方法です。プロジェクトライブラリのバージョンアップに関する詳細は、「リソースの使用」の「ライブラリのアップグレード」を参照してください。