現在表示中:

AEM Mobile プロジェクトには、ページ、JavaScript と CSS のクライアントライブラリ、再利用可能な AEM コンポーネント、コンテンツ同期設定、PhoneGap アプリシェルコンテンツなど、多様なコンテンツタイプセットが含まれます。スターターキットに基づいて新規 AEM Mobile アプリをビルドすると、さまざまなタイプのすべてのコンテンツを推奨される構造に取り込むことができるので、ポータビリティと保守性の両方が長期にわたって容易になります。

ページコンテンツ

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

AEM の慣例により、アプリの最初のページは、アプリのデフォルト言語(Geometrixx とスターターキットのどちらの場合でも「en」)として機能するいずれかの子ページへのリダイレクトである必要があります。トップレベルのロケールページは通常、基盤となる「splash-page」コンポーネント(/libs/mobileapps/components/splash-page)を継承しますが、このコンポーネントは、無線によるコンテンツ同期更新のインストールをサポートするために必要な初期化を処理します(contentInit コードの場所:/etc/clientlibs/mobile/content-sync/js/contentInit.js)。

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

アプリのテンプレートおよびコンポーネントのコードは、/apps/<ブランド名>/<アプリ名> にあります。慣例に従って、テンプレートおよびコンポーネントのコードは /apps/<ブランド名>/<アプリ名> に配置してください。このパターンは、AEM のサイトでの作業経験がある開発者にはよく知られています。このパターンに従うのは通常、パブリッシュインスタンスでは /apps/ への匿名アクセスがデフォルトでロックされるからです。その結果、生の JSP コードが潜在的な攻撃者に対して非表示になります。

アプリ固有のテンプレートを表示可能にする唯一の方法は、テンプレート自体の「allowedPaths」プロパティノードを使用し、その値を /content/mobileapps (/.*)?' に設定することです。テンプレートを単一のアプリでのみ使用する場合には、さらに具体的な値に設定することもできます。また、「allowedParents」プロパティおよび「allowedChildren」プロパティを使用して、新規ページを作成している場所に基づいてどのテンプレートを作成者に対して使用可能にできるかを非常にきめ細かく制御することもできます。

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

作成可能なページコンポーネントには、AngularJS を利用する場合、/libs/mobileapps/components/angular/ng-component に同等の「sling:resourceSuperType」コンポーネントがあり、これも同じようにオーバーレイおよびカスタマイズ可能です。

JavaScript およびCSS Clientlibs

クライアントライブラリに関して、開発者は、リポジトリ内のどこに配置するかについてのオプションがいくつかあります。次のパターンはガイダンスとして示したものであり、固定の要件ではありません。

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

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

PhoneGap 設定

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー