アプリのテンプレートとユーザーエクステンションを使用すると、コードを他の人と簡単に共有できます。この 2 つの相違点は次のとおりです。
- アプリのテンプレートはプロジェクトの開始時にのみ使用できます。ユーザーエクステンションは、開発中であればいつでもプロジェクトに導入できます。
- テンプレートは全体的なものですが、ユーザーエクステンションはコンポーネントをツールボックスに追加するものです。コンポーネントはユーザーエクステンションパッケージの他のコンポーネントと共に、あるいは抜きで、含めることができます。
- テンプレートは Architect で作成しますが、ユーザーエクステンションには Sencha Architect 外部で作成された JavaScript や CSS コードが含まれる場合があります。
本ガイドでは、プロジェクトにおけるアプリのテンプレートとユーザーエクステンションの使用方法について説明します。カスタムのテンプレートを作成する方法については、ユーザーエクステンションの作成ガイドおよびアプリのテンプレートの作成ガイドを参照してください。
アプリのテンプレートの使用
新しいプロジェクトの開始プロセスを簡素化するために、アプリのテンプレートを提供しています。Sencha Architect パッケージには一般的なプロジェクトタイプが複数用意されています。あなた自身で作成、あるいは他の誰かが作成したテンプレートを追加することもできます。
Architect を起動して [Create New（新規作成）] を選択すると、使用するフレームワークを選択し、さらにプロジェクトで使用するアプリのテンプレートを選択する画面が表示されます。下は Ext JS の画面ですが、Sencha Touch の画面もそれほど変わりません。
- 使用するフレームワークを選択します（Ext JS または Sencha Touch）。
- 別のバージョンのフレームワークを選択するには、フレームワーク名の右側にある矢印をクリックします。この操作を行うと、「空のプロジェクト」が表示されます。これをクリックすると、標準的な Architect 開発画面が開きます。テンプレートを使用せずにプロジェクト作成を開始する場合、現在のフレームワークの「空のプロジェクト」をクリックしても構いません。
- 各フレームワークで使用できるテンプレートは「Basic（基本）」、「Layouts（レイアウト）」、「Examples（例）」「Starter Apps（スターターアプリ）」に論理的にグループ化されています。各グループへのリンクは左のカラムに表示されています。使用可能なテンプレートを見て、希望するものに最も近いものを 1 つ選択します。
- アプリのテンプレートをプレビューするには、テンプレートをマウスでポイントすると右上に表示される「目」のアイコンをクリックします。
- プロジェクトに必要なものに最も近いアプリのテンプレートをクリックし、画面右下にある [Create（作成）] ボタンをクリックすると、Architect でこのテンプレートを元にプロジェクトをセットアップします。
- ツールバーで [New Project（新しいプロジェクト）] ボタンをクリックすると、前回のプロジェクト開始時に使用したテンプレートページにジャンプします。
これらのテンプレートによりアプリケーションの構造が設定され、ビュー、コントローラ、モデル、ストア、テーマなどが含まれる場合もあります。基本的に、Architect プロジェクトで使用できる構成要素はすべてテンプレートに含めることができます。テンプレートは、作成するプロジェクトに合わせてカスタマイズできます。
「空のキャンバス」を選択することで、いつでも空のキャンバスから開発を開始できます。
ユーザーエクステンションの組み込み
ユーザーエクステンション機能により Architect 外部で作成したコンポーネント（クラス）を Architect プロジェクトに組み込めるようになりました。ユーザーエクステンション機能を使用すると、Architect 用にパッケージされたユーザーエクステンションのコンポーネントをその他のコンポーネントと同じようにツールボックスからドラッグしたり、Architect のキャンバスで描画したり、Architect のコンフィグパネルで設定したり、Architect 上で保守を行ったりできます。
このようなエクステンションを使用することにより、既に誰かがコーディングしている機能を再度書く必要がなくなり、また、多くのコミュニティメンバーがダウンロードして使用することにより、長期間にわたって包括的なテストが行われることになるというメリットもあります。
Architect ユーザーエクステンションはパッケージで配布されるため、簡単にダウンロードしてインストールできます。各ユーザーエクステンションパッケージは Ext JS または Sencha Touch で使用できます。対象の Architect プロジェクトに使用しているフレームワークとの互換性があるパッケージを必ず選択してください。ユーザーエクステンションは専用のサンドボックスで実行されるため、ウェブからダウンロードしたコードを実行する際に安全が担保されます。
本ドキュメントではユーザーエクステンションを Architect 3 プロジェクトに組み込む方法を説明します。
カスタムのユーザーエクステンションパッケージの作成方法については、ユーザーエクステンションの作成を参照してください。
ユーザーエクステンションのダウンロード
ユーザーエクステンションをダウンロードする手順は次のとおりです。
- Sencha Market にログインします。
- [Product（製品）] タブをクリックします。
- [Sencha Architect 3] を選択します。
- Sencha Architect 3 用にパッケージされたエクステンションを必ず選択してください。
- 選択したエクステンションがプロジェクトに使用するフレームワークとバージョンに対応していることを確認してください。
ユーザーエクステンションのインストール
ユーザーエクステンションを Architect プロジェクトに組み込む手順は次のとおりです。
- ユーザーエクステンションパッケージをダウンロードします。.aux という拡張子を持つファイルです。
- このユーザーエクステンションに互換性のあるフレームワークを使用して、Architect プロジェクトを起動します。
- ツールボックスの [Extensions（エクステンション）] の右にあるアイコンをクリックするか、
[File（ファイル）]メニューで [Install User Extension（ユーザーエクステンションをインストール）] を選択します。 - ファイルブラウザが表示されたら、ダウンロードした .aux ファイルを探して選択します。
- エクステンションが正常にインストールされたことを通知するメッセージが表示されるはずです。
正常にインストールされると、エクステンションがツールボックスの [Extensions（エクステンション）] の専用カテゴリ内に表示されます。エクステンションにはカッコつきで内包するクラス数が表示され、さらに [Extensions（エクステンション）] カテゴリにリストされている数が、このクラス数分だけ加算されます。
ユーザーエクステンションに含まれるクラスは、その他のカテゴリにも含まれます。たとえば、「Drag Drop Region」と「Scheduler Grid」というクラスは、Containers カテゴリにリストされます。
ジグソーパズルのようなアイコンは、そのクラスがユーザーエクステンションに属するものであることを表していることに注意してください。このアイコンは、ユーザーエクステンションのクラスがある場合、[Project Inspector（プロジェクトインスペクタ）] にも表示されます。
エクステンションが正常にインストールされなかった場合、エクステンションパッケージのファイルや、パッケージファイルの重要な設定パラメータが欠落しているか、その他の問題が発生していることが考えられます。Architect では有用なデバッグ情報を Sencha Architect Log に出力し、問題の分析を支援します。
ユーザーエクステンションパッケージのコンポーネントの使用
ユーザーエクステンションパッケージが正常にインストールされたら、エクステンションのコンポーネントがツールボックスの [Extensions（エクステンション）] カテゴリと、場合によっては他の適切なカテゴリにリストされます。このコンポーネントはすべて、他のコンポーネント同様、キャンバスや [Project Inspector（プロジェクトインスペクタ）] にドラッグしたり、[Config（コンフィグ）] パネルでコンフィグ（あれば）を設定したりできます。
ユーザーエクステンションのコンポーネントの一部は、1 つ以上の最上位レベルコンポーネントを自動生成します。たとえば、特殊なビューには、設定済みのフィールドを持つストアとモデルが存在する場合があります。この場合、Architect ではこれらをリンクされたグループとして作成します。これにより、ユーザーがリンクされたグループのメンバーである（つまり相互依存関係にある）コンポーネントを削除しようとしたときに Architect から警告を発することができます。
次のキーボードショートカットも使用できます。⌘+ および ⌘+- （Mac） または Ctrl++ および Ctrl+-（Windows および Linux） で、リンクされたグループのコンポーネントを循環的に選択できます。
プロジェクトを保存またはビルドすると、プロジェクトで使用されたエクステンションのコピーがプロジェクトフォルダ内に保存され、以後もプロジェクトに含まれます。エクステンションの開発者は、表示するコンフィグアイテムをコントロールでき、追加のコンフィグアイテムを作成したり、適切なデフォルト値を割り当てたりできます。エンドユーザーは、これらの値を適宜微調整できます。
バージョン管理
ユーザーエクステンションパッケージはバージョン管理されます。システムには複数バージョンのユーザーエクステンションパッケージをインストールできますが、ツールボックスには最新（最も大きな数字）のパッケージがロードされ表示されます。
古いバージョンのユーザーエクステンションパッケージを使用したプロジェクトを開くと、Architect ではデフォルトでその古いバージョンのパッケージをロードしますが、次の代案を提示します。
- 新しいバージョンのエクステンションをインストールしている場合（プロジェクトに含まれるのは v1.0 だがシステムには v1.1 もある場合）、プロジェクトをアップグレードして新しいバージョンを使用するかどうか尋ねられます。アップグレードを選択しない限り、プロジェクトに含まれているバージョンが使用されます。
- Sencha Architect に現在インストールされているものより新しいバージョンのエクステンションがプロジェクトに含まれている場合、他のプロジェクトでも使用できるように、そのエクステンションをインストールするかどうか尋ねられます。
- Sencha Architect に現在インストールされていないエクステンションがプロジェクトに含まれている場合、他のプロジェクトでも使用できるように、そのエクステンションをインストールするかどうか尋ねられます。
ユーザーエクステンションパッケージのアンインストール
ユーザーエクステンションパッケージをシステムからアンインストールするには、ツールボックスで対象のユーザーエクステンションパッケージを右クリックし、ドロップダウンメニューで [Uninstall Extension（エクステンションをアンインストール）] を選択します。
ユーザーエクステンションのインストール先は変更できるということに注意してください。Mac の場合は [Sencha Architect] ドロップダウンメニュー、Windows と Linux の場合は [Edit （編集）] ドロップダウンメニューで、**[Preferences（基本設定）] ** 画面の [Preferences（基本設定）] をクリックして、[Extensions（エクステンション）] フィールドの値を変更します。
