テンプレートとコンポーネントの作成および追加 creating-and-adding-templates-and-components

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

AEM Mobile On-Demand は、完全に設定されたアプリテンプレート、記事テンプレートおよび記事コンポーネントを提供します。

We.Unlimited アプリは、完全に設定可能で管理しやすいAEM Mobile オンデマンドアプリケーションのシェルを表すサンプルテンプレートです。

アプリの作成時にこのサンプルテンプレートを選択すると、AEM Mobileの機能豊富なダッシュボードが提供されます。

chlimage_1-70

NOTE
AEM Mobile Apps Control Center からアプリケーションおよびモバイルアプリのコンテンツを管理するには、AEM Mobile Application Dashboard を参照してください。

アプリテンプレートの作成 creating-app-templates

アプリテンプレートは、アプリを作成するために使用され、アプリのベースラインまたは基盤を表すページテンプレートおよびコンポーネントのコレクションとして機能します。 このテンプレートは、アプリを適切に導くための基本的なプロパティをいくつかスタンプで示します。 一般に、顧客が作成するアプリの数は、合計で多くなりすぎるということはありません。

アプリテンプレートを使用すると、開発者が作成し、AEM内で新しいアプリを作成する際に使用される既存のデザインを、簡単に使用できます。

別のアプリのテンプレートに基づいてアプリを作成すると、そのアプリが作成された元のアプリを表す出発点を持つアプリが取得されます。

アプリテンプレートに基づいてアプリを作成する手順:

  1. AEM Mobile アプリカタログ(<server-url>/aem/apps.html/content/mobileapps)に移動します。
  2. 作成」/「アプリ」を選択します(下図を参照)。

このテンプレートを使用してアプリを作成すると、アプリに記事、バナー、コレクションを追加できます。 記事、バナー、コレクションの再訪問の作成については、 コンテンツ管理アクションを参照してください。

NOTE
または、AEM デベロッパーが提供する We.Unlimited アプリなど、サンプルアプリテンプレートを選択することもできます。 このサンプルテンプレートをアプリに使用すると、いくつかのサンプル記事とコレクションが動作します。 サンプルテンプレートとコンポーネントを使用するか、既存のテンプレートとコンポーネントをカスタマイズするか、アプリ用に新しいテンプレートとコンポーネントを作成するかを選択できます。
CAUTION
redirectTarget プロパティの設定
アプリテンプレートの 1 つを使用する際に、開発者がアプリケーションのコンテンツを定義します。 ただし、開発者は、jcr でのアプリケーションの作成場所と redirectTarget プロパティの値を認識しておく必要があります。
redirectTarget は、アプリ作成操作の一部として計算され、アプリテンプレートの一部として redirectTarget プロパティが使用可能で、redirectTarget の値が相対パスとして定義されている場合は、パスの解決を試みます。 アプリ作成プロセスが、アプリテンプレート内で redirectTarget の相対値を検出すると、アプリが作成された解決された場所に値が追加されます。
例えば、アプリテンプレートで redirectTarget の値が「lanugage-masters/en」として定義され、そのアプリが「/content/mobileapps/fooApp」で作成されている場合、アプリの作成後の redirectTarget の最終的な値は「/content/mobileapps/fooApp/language-masters/en」になります。

コンテンツテンプレートの作成 creating-content-templates

各エンティティタイプには、2 つの標準テンプレートがあります。 以下の項目が該当します。

  • デフォルトテンプレート:適用可能なデフォルトのプロパティや構造を持つコンテンツの作成に使用される
  • 読み込まれたテンプレート: 適用可能なデフォルトのプロパティや構造を持つAEM Mobileからコンテンツを読み込むために使用されます。

記事テンプレート article-templates

無制限の記事は、一般的なAEM Mobile オンデマンド記事レイアウトを表すサンプルテンプレートです。

  1. 記事の管理 で、「+」を選択して記事を作成します。 無制限の記事 または リッチ テキスト記事 のいずれかを選択できます。 次の画像は、これら 2 つの記事テンプレートのいずれかから選択できるオプションを示しています。

  2. 次へ」をクリックして、記事の名前とタイトル、説明、作成者、要約、部署、サムネール画像、記事へのアクセスなどの記事メタデータを定義します。

  3. 次へ をクリックして、提供情報のプロパティを入力します。

  4. 次へ をクリックして、記事の画像またはソーシャルメディア画像を入力します

  5. 次へ をクリックして、この新しい記事のリンク先のコレクションを選択します。

  6. 次へ をクリックして、ソーシャル共有の詳細を入力します。

  7. 作成 をクリックして、サンプルを使用した記事の作成プロセスを終了します。 完了 または 記事の編集 をクリックして、この記事のプロパティを編集します。

chlimage_1-71

記事へのコンポーネントの追加 adding-components-to-article

作成したら、テキストや画像などのコンポーネントを追加して、記事のコンテンツを編集できます。 記事は、AEM ページテンプレートの拡張機能です。

編集する記事を選択し、「編集」をクリックして記事にコンポーネントを追加します。

chlimage_1-72 chlimage_1-73

左側のパネルで「+」を選択して、記事にコンポーネントを追加します。

chlimage_1-74

標準テンプレートの作成 creating-out-of-the-box-templates

標準の Article Template はありませんが、カスタムテンプレートを拡張するデフォルトのテンプレートがあります。詳しくは、Geometrixx Unlimitedアプリの Article template sample を参照してください。

通常のAEM テンプレートで必要なプロパティを超える主要なプロパティには、以下が含まれます。

dps-resourceType="dps:Article"

このプロパティにより、AEM ページがAEM Mobile ターゲット記事ページとして認識されます。

AEM テンプレートと同様に、デフォルトのプロパティまたは子ノードをテンプレートの jcr:content に追加できます。

バナーとコレクションのテンプレート banner-and-collection-templates

CAUTION
バナーとコレクションにはコンテンツがないので、作成はカスタムテンプレートをサポートしません。

コンポーネントの作成および追加 creating-and-adding-components

コンポーネントではおよびを使用してウィジェットにアクセスでき、これらを使用してコンテンツをレンダリングします。

シンプルなコンポーネントがコードリポジトリに含まれ、そのソースはAEMにあります。 その後、CRXDE Liteでローカルに開くこともできます。

NOTE
現在、AEM Mobileに標準で提供されているコンポーネントはありません。

ページにコンポーネントを追加できます。 AEM Mobile アプリでは任意のコンポーネントを使用できますが、適用すると、が正しくレンダリングされない場合があります。

ただし、AEMでレンダリングされるカスタム書き出しコンテンツ同期ハンドラーがないと、カスタムコンポーネントがAEM Mobile On-demand Servicesに正しく書き出されアップロードされない場合があります。

コンポーネントを他のいくつかの構築ブロックコンポーネントと共に既にAEM ページに含めていれば、別のコンポーネントをページに追加したり、既存のコンポーネントを編集したりできます。

ページに別のコンポーネントを追加するには:

  1. そのページを選択し、エディターのヘッダーの右上にあるドロップダウンから、編集モードになっていることを確認します
  2. エディターのヘッダーの左端のアイコンを使用してサイドパネルを切り替えます
  3. コンポーネント」タブを選択します
  4. 使用可能なコンポーネントのいずれかをページにドラッグ&ドロップします

chlimage_1-75

既存のコンポーネントを編集するには:

  1. そのページを選択し、編集 モードになっていることを確認して、コンポーネントを選択します
  2. レンチアイコンを選択して、コンポーネントを設定します
NOTE
AEMにコンポーネントを作成し、CRXDE Liteを使用した開発を使用してカスタマイズできます。 既存のコンポーネントを必要に応じてカスタマイズしたら、記事を管理編集 オプションを使用して、ページに追加できます(上図を参照)。

次の手順 the-next-steps

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