アプリの構造 structure-an-app

NOTE
単一ページアプリケーションフレームワークを基にしたクライアントサイドレンダリング(React など)が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。詳細情報

AEM Mobile プロジェクトには、ページ、JavaScriptと CSS クライアントライブラリ、再利用可能なAEM コンポーネント、コンテンツ同期設定、PhoneGap アプリシェルコンテンツなど、様々なコンテンツタイプが含まれます。 新しいAEM Mobile アプリを スターターキットに基づくと、あらゆる種類のコンテンツをお勧めの構造に取り込んで、長期にわたって移植性と保守性の両方を容易にすることができます。

ページコンテンツ page-content

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

chlimage_1-52

AEMの慣例により、アプリの最初のページは、アプリのデフォルト言語として機能する子の 1 つにリダイレクトする必要があります(Geometrixxとスターターキットの両方の場合は「en」)。 最上位のロケールページは通常、基盤の「スプラッシュページ」コンポーネント (/libs/mobileapps/components/splash-page)から継承されます。このコンポーネントは、OTC コンテンツ同期アップデートのインストールをサポートするために必要な初期化を行います(contentInit コードは/etc/clientlibs/mobile/content-sync/js/contentInit.jsで入手できます)。

テンプレートとコンポーネント templates-and-components

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

アプリ固有のテンプレートは、テンプレート自体の allowedPaths プロパティノードを使用し、その値を「/content/mobileapps (/*)?' - テンプレートを 1 つのアプリでのみ使用できるようにする場合は、より具体的なものを使用することもできます。 allowedParents プロパティと allowedChildren プロパティを使用すると、新しいページが作成される場所に基づいて、作成者が使用できるテンプレートを詳細に制御することもできます。

angular アプリページコンポーネントを新規に作成する場合は、sling:resourceSuperType プロパティを「mobileapps/components/mobile/ng-page」に設定することをお勧めします。 これにより、オーサリングとレンダリングの両方に対応するページが単一ページアプリとして設定され、コンポーネントの変更が必要になる可能性のある.jsp ファイルをオーバーレイできるようになります。 ng-page には UI フレームワークがまったく含まれていないので、開発者は通常、「template.jsp」(/libs/mobileapps/components/angular/ng-page/template.jspからオーバーレイ)をオーバーレイすることになります。

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

JavaScriptと CSS Clientlibs javascript-and-css-clientlibs

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

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

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

PhoneGap 設定 phonegap-configuration

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

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

次の手順 the-next-steps

アプリの構造については、App Console を使用したアプリの作成と編集を参照してください。

recommendation-more-help
2eeeb575-8007-40cc-a72d-206fbc4ddd4b