Show Menu
トピック×

アプリの構造

単一ページアプリケーションフレームワークを基にしたクライアント側レンダリング(React など)が必要なプロジェクトでは、SPA エディターを使用することをお勧めします。 詳細情報 を参照してください。
AEM Mobile プロジェクトには、ページ、JavaScript と CSS のクライアントライブラリ、再利用可能な AEM コンポーネント、コンテンツ同期設定、PhoneGap アプリシェルコンテンツなど、多様なコンテンツタイプセットが含まれます。Basing your new AEM Mobile app on the Starter Kit is a good way to get all the different types of content into our recommended structure to ease both portability and maintainability over the long term.

ページコンテンツ

アプリケーションのページが AEM Mobile コンソールで認識されるには、そのすべてのページが /content/mobileapps の下に配置されている必要があります。
AEM の慣例により、アプリの最初のページは、アプリのデフォルト言語(Geometrixx とスターターキットのどちらの場合でも「en」)として機能するいずれかの子ページへのリダイレクトである必要があります。トップレベルのロケールページは、通常、Over-the-air Content Syncアップデートのインストールに必要な初期化を管理する「スプラッシュページ」コンポーネント(/libs/mobileapps/components/splash-page)から継承されます(contentInitコードは/etc/clientlibs/mobile/content-sync/js/contentInit.jsで入手できます)。

テンプレートおよびコンポーネント

アプリのテンプレートおよびコンポーネントのコードは、/apps/<ブランド名>/<アプリ名> にあります。規則に従って、テンプレートとコンポーネントコードを/apps/<brand name>/<app name>に配置する必要があります。 このパターンは、AEM のサイトでの作業経験がある開発者にはよく知られています。このパターンに従うのは通常、パブリッシュインスタンスでは /apps/ への匿名アクセスがデフォルトでロックされるからです。その結果、生の JSP コードが潜在的な攻撃者に対して非表示になります。
App specific templates can be configured to only be presented by using the allowedPaths property node on the template itself, and setting its value to '/content/mobileapps(/.&ast;?' に設定することです。テンプレートを単一のアプリでのみ使用する場合には、さらに具体的な値に設定することもできます。The allowedParents and allowedChildren properties can also be leveraged for very fine grained control of which templates will be available to an author based on the where the new page is being created.
When creating a new app page component from scratch, it is recommended to set it's sling:resourceSuperType property to 'mobileapps/components/angular/ng-page'. これにより、シングルページアプリとして作成したりレンダリングしたりできるようにページが設定され、コンポーネントで .jsp ファイルを変更する必要がある場合にはそのファイルをオーバーレイできます。ng-page には UI フレームワークが一切含まれないので、開発者は通常最終的には(少なくとも)「template.jsp」(/libs/mobileapps/components/angular/ng-page/template.jsp からオーバーレイされたもの)をオーバーレイすることになります。
Authorable page components, wishing to leverage AngularJS, have an equivalent sling:resourceSuperType component located at /libs/mobileapps/components/angular/ng-component which can be overlaid and customized in the same way.

JavaScript およびCSS Clientlibs

クライアントライブラリに関して、開発者は、リポジトリ内のどこに配置するかについてのオプションがいくつかあります。次のパターンはガイダンスとして示したものであり、固定の要件ではありません。
clientside コードが単独で機能でき、アプリケーションの特定のコンポーネントに関連していない(つまり、他のアプリケーションで再利用できる)場合には、/etc/clientlibs/<ブランド名>/<ライブラリ名> に格納することをお勧めします。一方、clientlib が単一のアプリに固有のものである場合には、アプリのデザインノードの子としてネストできます(/etc/designs/phonegap/<ブランド名>/<アプリ名>/clientlibs)。この clientlib のカテゴリは、他のライブラリで使用しないでください。必要に応じて他のライブラリを埋め込むために使用してください。このパターンに従うと、開発者はクライアントライブラリをアプリに追加するたびに新規コンテンツ同期設定を追加する必要がなくなり、単にアプリの design clientlib の embeds プロパティを更新するだけでよくなります。例えば、/content/phonegap/geometrixx-outdoors/jcr:content/page-app/app-config/clientlibs-allにあるGeometrixx clientlibs-all Content Sync configノードを見てみましょう。
クライアント側コードが特定のコンポーネントに密接に結合されている場合は、そのコードを /apps/ 内のコンポーネントの場所の下にネストされたクライアントライブラリに配置し、そのカテゴリをアプリの「design」clientlib に埋め込みます。

PhoneGap 設定

Each AEM Mobile app contains a directory which hosts the configuration files used by the PhoneGap command line interface and PhoneGap build to turn your web content into a runnable application. 例えば、Geometrixx のサンプルでは、このディレクトリ(/content/phonegap/geometrixx-outdoors/shell/jcr:content/pge-app/app-content)はシェルの一部として存在しますが、このようなデザイン上の決定となったのは、無線で更新できないコンテンツ(デバイス API やアプリ自体の設定を処理するプラグインなど)のみが含まれているからです。
In this directory you will also find a number of Cordova hooks which can be used to install plugins, place resource files in their platform specific locations, and other actions which should be executed as part of the build. Note: as an alternative to downloading each plugin as part of the build, you can follow the pattern of the Kitchen Sink app and include plugin source code with the rest of your app project.

次の手順

Once you learn about the Structure of the app, see Creating and Editing the Apps using App Console .