アプリの構造

メモ

Adobeは、単一ページアプリケーションのフレームワークベースのクライアントサイドレンダリング（React など）を必要とするプロジェクトでは、SPA Editor を使用することをお勧めします。詳細情報。

AEM Mobileプロジェクトには、ページ、JavaScript および CSS クライアントライブラリ、再利用可能なAEMコンポーネント、コンテンツ同期設定、PhoneGap アプリシェルコンテンツなど、様々なコンテンツタイプのセットが含まれます。次を基に新しいAEM Mobileアプリを作成するスターターキットは、すべての異なるタイプのコンテンツを推奨される構造に取り込み、長期的な移植性と保守性の両方を容易にする良い方法です。

ページコンテンツ

アプリケーションのページがAEM Mobileコンソールで認識されるように、すべてのページが/content/mobileapps の下に配置されている必要があります。

chlimage_1-52

AEMの慣例により、アプリの最初のページは、アプリのデフォルト言語 (Geometrixxとスターターキットの両方のケースで「en」) となる、アプリの子の 1 つへのリダイレクトにする必要があります。トップレベルのロケールページは、通常、基盤の「splash-page」コンポーネント (/libs/mobileapps/components/splash-page?lang=ja) を継承します。このコンポーネントは、空中コンテンツ同期更新のインストールに必要な初期化を処理します (contentInit コードは/etc/clientlibs/mobile/content-sync/js/contentInit.jsにあります )。

テンプレートとコンポーネント

アプリのテンプレートとコンポーネントコードは、/apps/にある必要があります。<brand name="">/<app name="">. 慣例に従い、テンプレートとコンポーネントのコードは/apps/に配置する必要があります。<brand name="">/<app name="">. このパターンは、AEMで Site を既に使用している開発者にとってよく知っている必要があります。通常は、パブリッシュインスタンスで/apps/がデフォルトで匿名アクセスにロックされるので、これに従います。したがって、生の JSP コードは潜在的な攻撃者から隠されます。

アプリ固有のテンプレートは、 allowedPaths プロパティノードを作成し、その値を'/content/mobileapps(/.*?lang=ja)?' — またはテンプレートを単一のアプリに対してのみ使用できる場合は、より具体的なもの。この allowedParents および allowedChildren プロパティは、新しいページの作成場所に基づいて、作成者が使用できるテンプレートを詳細に制御する場合にも使用できます。

アプリページコンポーネントを最初から作成する場合は、新しく作成したコンポーネントに sling:resourceSuperType プロパティを「mobileapps/components/angular/ng-page」に設定します。これにより、オーサリング用とレンダリング用のページが単一ページアプリとして設定され、コンポーネントで変更が必要な.jsp ファイルをオーバーレイできます。 ng-page には UI フレームワークがまったく含まれていないので、デベロッパーは通常、(/libs/mobileapps/components/angular/ng-page/template.jsp%E3%81%8B%E3%82%89%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%82%A4%E3%81%95%E3%82%8C%E3%81%9F?lang=ja)「template.jsp」（少なくとも）をオーバーレイすることになります。

AngularJS を使用したいオーサリング可能なページコンポーネントには、同等の機能があります sling:resourceSuperType /libs/mobileapps/components/components/angular/ng-component のコンポーネント。同じ方法でオーバーレイおよびカスタマイズできます。

JavaScript と CSS の clientlibs

クライアントライブラリには、開発者がリポジトリ内のどこに配置するかを選択できるオプションがいくつかあります。次のパターンはガイダンス用に提供されていますが、難しい要件ではありません。

お使いのクライアントサイドコードが独立していて、アプリケーションの特定のコンポーネントに関連していない場合（つまり、他のアプリケーションで再利用できる場合）は、Adobeは/etc/clientlibs/に保存することをお勧めします。<brand name="">/<lib name="">. 一方、clientlib が単一のアプリに固有の場合は、アプリのデザインノードの子としてネストできます。/etc/designs/phonegap/<brand name="">/<app name="">/clientlibs. この clientlib のカテゴリは、他のライブラリでは使用しないでください。また、必要に応じて他のライブラリを埋め込むために使用する必要があります。このパターンに従うと、開発者はクライアントライブラリをアプリに追加するたびに新しいコンテンツ同期設定を追加する必要がなくなり、アプリのデザイン clientlib の「embeds」プロパティを更新するだけで済みます。例えば、/content/phonegap/geometrixx-outdoors/en/jcr:content/pge-app/app-config/clientlibs-all のGeometrixxclientlibs-all コンテンツ同期設定ノードを確認します。

クライアントサイドコードが特定のコンポーネントと緊密に結び付いている場合、そのコードを/apps/内のコンポーネントの場所の下にネストされたクライアントライブラリに配置し、そのカテゴリをアプリの「デザイン」clientlib に埋め込みます。

PhoneGap 設定

各AEM Mobileアプリには、PhoneGap で使用される設定ファイルをホストするディレクトリが含まれていますコマンドラインインターフェイスおよび PhoneGap Build は https://build.phonegap.com/ web コンテンツを実行可能なアプリケーションに変換する場合。例えば、Geometrixxサンプルでは、このディレクトリ (/content/phonegap/geometrixx-outdoors/shell/jcr:content/pge-app/app-content?lang=ja) はシェルの一部として配置されています。デバイス API を扱うプラグインやアプリ自体の設定など、オーバージェイトで更新できないコンテンツのみが含まれるので、設計上の決定がおこなわれました。

このディレクトリには、 Cordova フックプラグインのインストールに使用できる、リソースファイルをプラットフォーム固有の場所に配置し、ビルドの一部として実行する必要があるその他のアクションを配置できます。注意：ビルドの一部として各プラグインをダウンロードする代わりに、Kitchen Sink アプリのパターンに従ってプラグインのソースコードを含めることができます残りのアプリプロジェクトと共に使用できます。