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

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

AEM Content Servicesのテンプレートの役割について

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

従来のAEM編集可能テンプレートは、Webページの定義に使用されていましたが、この使用は単なる慣例です。 編集可能なテンプレートは、任意の​コンテンツのセットを構成するために使用できます。そのコンテンツへのアクセス方法:をブラウザーでHTMLとして使用する場合、JavaScript(AEM SPA Editor)またはモバイルアプリで使用されるJSONは、そのページがリクエストされる方法の関数です。

AEM Content Servicesでは、編集可能なテンプレートを使用して、JSONデータの公開方法を定義します。

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

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

APIエンドポイントの作成方法と、WKND Mobileアプリに公開するコンテンツを理解するには、デザインに再度アクセスします。

イベントAPIページの分解

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

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

これをおこなうには、必要なコンテンツをJSONとして公開するために、これらの要件をAEMコンポーネント(およびこの場合はAEM WCMコアコンポーネント)にマッピングします。

  1. ロゴ​は、画像コンポーネント​で表示されます
  2. タグ行​は、テキストコンポーネント​で表示されます。
  3. イベント​のリストは、コンテンツフラグメントリストコンポーネント​を介して表示され、次に、一連のイベントコンテンツフラグメントを参照します。
メモ

AEM Content ServiceでのページとコンポーネントのJSON書き出しをサポートするには、ページとコンポーネントがAEM WCMコアコンポーネント​から派生している必要があります。

AEM WCMコアコンポー ネントには、書き出されたページとコンポーネントの正規化されたJSONスキーマをサポートする組み込み機能が用意されています。このチュートリアルで使用されるWKND Mobileコンポーネント(ページ、画像、テキスト、コンテンツフラグメントリスト)は、すべてAEM WCMコアコンポーネントから派生しています。

イベントAPIテンプレートの定義

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

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

    1. 上部のアクションバーの「作成」をタップします。
    2. WKND Mobile - Empty Page​テンプレートを選択します。
    3. 上部のアクションバーで「次へ」をタップします。
    4. 「テンプレートのタイトル」フィールドに​Events API​と入力します。
    5. 上部のアクションバーの「作成」をタップします。
    6. 開く」をタップして、編集用に新しいテンプレートを開きます。
  3. 最初に、ルートレイアウトコンテナのPolicyを編集して、識別された3つのAEMコンポーネントを使用して、コンテンツをモデル化する必要があります。 構造​モードがアクティブになっていることを確認し、Layout Container [Root]​を選択して、「ポリシー」ボタンをタップします。

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

    • 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​テンプレートを選択し、上部のアクションバーで「有効」をタップします。

メモ

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

次の手順

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

このページ