本ガイドでは Architect アプリケーションをチームの一員として開発するためのメカニズムについて説明します。Architect で使用する MVC アプリケーションアーキテクチャは、堅牢でポータブルなアプリケーションの作成のみならず、専門家が最適な部分のコードを担当できるチームによる開発環境を支援します。ユーザーインターフェイスの専門家がビューを作成し、ビジネスとデータの専門家がビューにデータを提供するモデルとストアおよびアプリケーションにその機能を提供するコントローラを作成します。
チームによる Architect プロジェクトの開発手順は次のとおりです。
- ソースコード管理(Source Code Management: SCM)システムを選択して設定し、適切なポリシーとワークフローを確立します。
- プロジェクトのリーダーが Architect でアプリケーションプロジェクトをセットアップし、保存してソースコードツリーを作成し、ファイルを SCM にチェックインします。
- チームメンバー全員が、使用するシステムに Architect をインストールして設定します。
- チームメンバーは各自、使用するローカルシステムにプロジェクトファイルすべてを複製し、[Save(保存)] ボタンを使用して完了した作業内容をこまめに保存しながら開発作業を進めます。
- 成果物は SCM に頻繁にチェックインし、チームメンバー全員がこまめにローカルファイルをチームのリポジトリに同期することが必要です。同一ファイルを複数のメンバーで編集している場合は、この段階で変更内容をマージできます。
- プロジェクトを別のグループと共有する必要がある場合には、プロジェクトアーカイブ(.xda ファイル)を作成します。このアーカイブは、ダウンロード後に、ローカルにインストールされた Sencha Architect アプリケーションから開くことができます。
Architect には、異なるプロジェクトや異なる開発者間でコードの一部を共有できる機能が搭載されています。
ソースコード管理システムの設定
Sencha では、すべてのプロジェクトのソースコードをソースコード管理(Source Code Management: SCM)システムで管理することを強く推奨しています。これにより、ファイルに加えられた変更すべての詳細な履歴の保持と、コードのバックアップ保護を行えます。最新の SCM システムでは、複数のメンバーが同一のファイルを編集する場合に変更内容を結合できるツールを提供しており、異なるリリースへのブランチを保持できます。
Sencha ソースコードは git で開発しており、git を使用してダウンロードできるサンプルプロジェクトを公開しています。Sencha Architect と一緒に利用できる優れた SCM は他にもたくさんあります。
プロジェクトの開始に先立ち、使用する SCM をセットアップして、Architect プロジェクトの格納先やソースに対して誰がどのようなアクセス権を持つかを定義し、バックアップ手順(必要な場合)を設定し、SCM の管理や保守の段取りを決めてください。これらについては、本ドキュメントの対象外です。
Architect プロジェクトの開始
任意の 1 人(チームリーダーが適任)が Architect プロジェクトを開始することが必要です。
使用するフレームワークとバージョンを選択し、適切なアプリテンプレートを選択するか、または空のテンプレートを選択して空のプロジェクトを開始します。
アプリケーションの命名
Architect プロジェクト作成の最初のステップは、アプリケーションに名前を付けることです。
アプリケーションに名前を付ける手順は次のとおりです。
- 画面右上にある [Project Inspector(プロジェクトインスペクタ)] ウィンドウの最上部にある [Application(アプリケーション)] をクリックします。
- [Config(コンフィグ)] パネルで「
name
」を見つけ、「MyProject
」といった名前をつけます。プロジェクト名は大文字で始めます。
これにより、アプリケーションを表す Application ノード(Ext.app.Application クラス)が設定されます。通常、これは Viewport を使用したシングルページであり、作成するアプリケーションのクラスすべて(モデル、ビュー、コントローラ、ストア)を単一の名前空間に配置できるようにします。このシングルページを準備し、アプリケーションの JavaScript すべてをロードすると、アプリケーションの起動関数が呼び出されます。この関数は通常、アプリケーションを起動するための「ブートストラップ」コードを実行します。
単純なアプリケーションの場合、通常は Application ノードの「name
」を設定するだけで十分です。複雑なアプリケーションの場合、その他の設定が必要となることがあります。
プロジェクトの保存
プロジェクトの保存の説明に従ってプロジェクトを保存します。
保存されるプロジェクトのファイルに関する情報については、プロジェクトファイルを参照してください。
プロジェクトの初回保存時に Architect によってこのプロジェクト用のディレクトリが作成されます。保存場所はダイアログに表示されます。ディレクトリの命名規則は、前述のステップで割り当てたアプリケーション名を小文字にしたものです。つまり、アプリケーション名が「MyProject」である場合、このプロジェクトのディレクトリは「myproject
」という名前になります。Architect ではこの規則を強制しているわけではありませんが、これに従えば、何がどこにあるかを思い出しやすくなります。Architect で作成するファイルとディレクトリの詳細なリストについては、次のセクションを参照してください。
ソース管理へのプロジェクトのチェックイン
プロジェクトは原則としてすべてバージョン管理の対象にすべきです。ただし、以下は例外です。
- ユーザーレベルの設定を保持する .architect ファイル
- bootstrap.json
- build フォルダ
- ext フォルダ
これらのファイルを無視するように SCM を設定できます。
チームメンバーによるプロジェクトの開発方法
開発チームの各メンバーが Sencha Architect とウェブサーバーを各自のローカルシステムにインストールすることが必要です。手順については、インストールと設定ガイドを参照してください。
プロジェクトリーダーがプロジェクトを SCM にチェックインしたら、チームメンバーが各自のシステムにリポジトリを複製し、Architect のスプラッシュ画面にある [Open an Existing Project(既存のプロジェクトを開く)] リンクを使用してプロジェクトをローカルで開き、コーディングを開始します。
チームメンバーが作業内容を頻繁に保存し、変更内容を定期的に SCM にチェックインすることが必要です。
プロジェクトアーカイブの作成
プロジェクトアーカイブは Architect プロジェクトのコンポーネントすべてを保持するファイルです。開発チーム外のユーザーに提供でき、ローカルディスクにダウンロードして Architect にロードし、閲覧したり変更したりできます。作成している Architect プロジェクトを Sencha のコミュニティやプロジェクトチーム外の人々と共有したい場合に便利です。
プロジェクトアーカイブの作成手順は次のとおりです。
- プロジェクトが、単に保存されているだけでなく、ビルドされていることを確認してください。
- Architect でプロジェクトを開き、[File(ファイル)] メニューに移動します。
- [Archive Project(プロジェクトのアーカイブ)]を選択します。
- 開いたダイアログボックスにプロジェクトのアーカイブ名を入力し、[Save(保存)] をクリックします。
Architect により .xda という拡張子を持つファイルが作成されます。このファイルはサーバーにアップロードしたり、電子メールで送信したり、USB ドライブにコピーしたりできます。別の人がこのファイルをダウンロードして Architect で開くことができます。このプロジェクトに変更を加えたら、その変更を保持するアーカイブを作成できます。
.xda ファイルは必ず SCM にチェックインする必要がありますが、アーカイブは、ソースコード管理システムの代わりに変更の保存や記録を行うためのものではありません。
コンポーネントの共有と再利用
最上位レベルのコンポーネントは、固有の .js ファイルを保持するクラスです。これらのコンポーネントはアプリからツールボックスにエクスポートしたり、他のユーザーと共有できるファイルにエクスポートしたりできます。子コンポーネントはクラス化できるので、共有することが可能ですし、コンポーネントのインスタンスはリンクされたインスタンスにできるので、特定のインスタンスに適用された変更を自動的に全インスタンスに適用することが可能です。これについてはすべてクラスの働きで説明しています。
カスタムのアプリのテンプレートとユーザーエクステンションの作成
単一のクラスではなく一連のコードを共有したい場合、新規プロジェクトの開始に使用できるカスタムのアプリのテンプレートを作成するか、ツールボックスにインストールして異なるアプリで他のコンポーネントと同じように使用できるユーザーエクステンションを作成できます。詳細については、アプリのテンプレートの作成ガイドおよびユーザーエクステンションの作成を参照してください。
Architect 外で開発したリソースの取り込み
プロジェクトコードの一部を Architect 外で開発し、「リソース」としてプロジェクトに取り込むことができます。通常、次のようなものがあります。
- JavaScript コード(アプリケーション用のビジネスロジックを実行するコードであることが多い)
- カスタムの CSS
- Architect 外で開発したテーマ
- 特定データのファイル
リソースをプロジェクトに追加する手順は次のとおりです。
- 任意の開発者 1 人がリソースファイルを手作業でローカルのファイルシステムにあるプロジェクトツリーの適切な場所にコピーします。
- この開発者が、リソースの使用に記述した指示に従って Architect でこのリソースをプロジェクトに追加します。
- 次に、この開発者がローカルでアプリケーションのビルドとプレビューを行い、新しく追加したリソースが機能することを確認します。
- プロジェクト用の SCM に変更したプロジェクトのコードをチェックインします。
- その後、プロジェクトの他の開発者が自身のプロジェクトのコピーを同期/更新して、このリソースにローカルアクセスを行えるようにします。
Sencha Architect 3.0 を使用して開始する場合、Architect 外で開発された JavaScript は ユーザーエクステンションとしてパッケージできることに注意してください。この場合、リソースとして取り込むのではなく、プロジェクトに統合することができます。
詳細は、リソースの使用を参照してください。