本ガイドでは、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」を設定します。