ドキュメントAEMAEM チュートリアルAEM ヘッドレスチュートリアル

第 4 章 - コンテンツサービステンプレートの定義

Last update: Wed May 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 初心者
  • 開発者

AEM ヘッドレスチュートリアルの第 4 章では、AEM コンテンツサービスのコンテキストにおける AEM の編集可能テンプレートの役割について説明します。編集可能テンプレートは、コンテンツサービスを有効化した AEM コンポーネントの構成を通じて、AEM コンテンツサービスがクライアントに開示する JSON コンテンツの構造を定義するために使用されます。

AEM コンテンツサービスのテンプレートの役割について

AEM の編集可能テンプレートを使用して、イベントコンテンツを JSON として開示するためにアクセスされる HTTP エンドポイントを定義します。

従来、AEM の編集可能テンプレートは web ページを定義するために使用されていましたが、この使い方は単なる慣例に過ぎません。編集可能テンプレートを使用すると、任意の ​一連のコンテンツを作成できます。そのコンテンツがどのようにアクセスされるかは、ブラウザーで HTML として、JavaScript（AEM SPA エディター）またはモバイルアプリで消費される JSON としてなど、そのページがリクエストされる方法によって異なります。

AEM コンテンツサービスでは、編集可能テンプレートを使用して、JSON データの開示方法を定義します。

WKND Mobile アプリでは、単一の API エンドポイントを駆動するために使用される単一の編集可能テンプレートを作成します。この例では AEM ヘッドレスの概念を簡単に説明しますが、異なる一連のコンテンツを開示する複数のページ（またはエンドポイント）を作成すると、より複雑で整理された API を作成できます。

API エンドポイントについて

API エンドポイントの構成を理解し、どのコンテンツを WKND Mobile アプリに開示する必要があるかを理解するために、設計をもう一度見てみましょう。

Events API ページの分解

このように、モバイルアプリに提供するコンテンツの論理セットは 3 つあります。

  1. ロゴ
  2. タグライン
  3. イベント ​リスト

これを行うには、これらの要件を AEM コンポーネント（この場合は AEM WCM コアコンポーネント）にマッピングして、必要なコンテンツを JSON として開示します。

  1. ロゴ ​は​ 画像コンポーネント ​を介して表示されます。
  2. タグライン ​は​ テキストコンポーネント ​を介して表示されます。
  3. イベント ​リストは、一連のイベントコンテンツフラグメントを参照する​ コンテンツフラグメントリストのコンポーネント ​を介して表示されます。
NOTE
AEM コンテンツサービスでページとコンポーネントが JSON エクスポートに対応するには、ページとコンポーネントが AEM WCM コアコンポーネントから派生 ​している必要があります。
AEM WCM コアコンポーネントには、書き出したページとコンポーネントの正規化された JSON スキーマをサポートする機能が組み込まれています。このチュートリアルで使用するすべての WKND Mobile コンポーネント（ページ、画像、テキスト、コンテンツフラグメントリスト）は、AEM WCM コアコンポーネントから派生したものです。

Events API テンプレートの定義

  1. ツール／一般／テンプレート／WKND Mobile に移動します。

  2. Events API テンプレートを作成します。

    1. 上部のアクションバーで「作成」をタップします。
    2. WKND Mobile - Empty Page テンプレートを選択します。
    3. 上部のアクションバーで「次へ」をタップします。
    4. 「テンプレートのタイトル」フィールドに Events API を入力します。
    5. 上部のアクションバーで「作成」をタップします。
    6. 「開く」をタップして編集用の新しいテンプレートを開きます。

  3. まず、ルートのレイアウトコンテナのポリシーを編集して、コンテンツをモデル化するために必要な 3 つの特定された AEM コンポーネントを許可します。構造 ​モードがアクティブであることを確認し、Layout Container [Root] を選択して「ポリシー」ボタンをタップします。

  4. プロパティ／許可されたコンポーネント ​で WKND Mobile を検索します。Events API ページで使用できるように、WKND Mobile コンポーネントグループから次のコンポーネントを許可します。

    • WKND Mobile > Image

      • アプリのロゴ

    • WKND Mobile > Text

      • アプリの紹介テキスト

    • WKND Mobile > Content Fragment List

      • アプリで表示できるイベントカテゴリのリスト

  5. 完了したら、右上隅にある「完了」チェックマークをタップします。

  6. ブラウザーウィンドウを​ 更新 ​して、新しく許可されたコンポーネントのリストを左側のパネルに表示します。

  7. 左側のパネルのコンポーネントファインダーから、次の AEM コンポーネントにドラッグします。

    1. ロゴ用 Image
    2. タグライン用 Text
    3. イベント用 Content Fragment List

  8. 上記の各コンポーネント ​について、それらを選択して「ロック解除」ボタンを押します。

  9. ただし、他のコンポーネントが追加されたり、これら 3 つのコンポーネントが削除されたりしないよう、レイアウトコンテナ が ロック ​されていることを確認してください。

  10. ページ情報／管理画面で表示 ​をタップして、WKND Mobile テンプレートリストに戻ります。新しく作成した Events API テンプレートを選択し、上部のアクションバーで「有効にする」をタップします。

https://video.tv.adobe.com/v/28342?quality=12&learn=on

NOTE
コンテンツの表示に使用されるコンポーネントがテンプレート自体に追加され、ロックされていることに注意してください。 これは、作成者が事前定義されたコンポーネントを編集できるようにするためですが、API 自体を変更すると、JSON 構造に関する前提が崩れ、消費するアプリが壊れる可能性があるため、コンポーネントを任意に追加または削除することはできません。すべての API は安定している必要があります。

次の手順

必要に応じて、com.adobe.aem.guides.wknd-mobile.content.chapter-4.zip コンテンツパッケージを AEM のパッケージ マネージャー経由で AEM オーサーにインストールします。このパッケージには、チュートリアルのこの章および前の章で概要を説明する設定とコンテンツが含まれています。

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4