AEM ヘッドレスの高度な概念

最終更新日： 2025年5月5日
  • 適用対象：
  • Experience Manager as a Cloud Service

作成対象：

  • 中級
  • 開発者

このエンドツーエンドチュートリアルは、Adobe Experience Manager（AEM）のヘッドレスと GraphQL の基礎を説明した基本チュートリアルの続きです。この詳細チュートリアルでは、コンテンツフラグメントモデル、コンテンツフラグメントおよび AEM GraphQL 永続クエリの操作（クライアントアプリケーションでの GraphQL 永続クエリの使用など）に関する詳細を説明します。

前提条件

AEM as a Cloud Service のクイックセットアップを完了して、AEM as a Cloud Service 環境を設定します。

この詳細チュートリアルに進む前に、前の基本チュートリアルとビデオシリーズのチュートリアルを完了することを強くお勧めします。このチュートリアルは、ローカルの AEM 環境を使用して完了できますが、扱っている内容は AEM as a Cloud Service のワークフローのみです。

注意
AEM as a Cloud Service 環境にアクセスできない場合は、ローカル SDK を使用した AEM ヘッドレスのクイックセットアップを完了してください。ただし、コンテンツフラグメントのナビゲーションなど、一部の製品の UI 画面が異なることに注意が必要です。

目的

このチュートリアルでは、以下のトピックを扱います。

  • 検証ルールと高度なデータタイプ（タブプレースホルダー、ネストされたフラグメント参照、JSON オブジェクト、日付と時刻など）を使用して、コンテンツフラグメントモデルを作成します。
  • ネストされたコンテンツやフラグメント参照を操作しながらコンテンツフラグメントを作成し、コンテンツフラグメント作成ガバナンス用のフォルダーポリシーを設定します。
  • 変数とディレクティブを含んだ GraphQL クエリを使用して、AEM GraphQL の API 機能を調べます。
  • パラメーターを含んだ GraphQL クエリを AEM に永続化し、永続クエリでキャッシュ制御パラメーターを使用する方法を説明します。
  • AEM ヘッドレス JavaScript SDK を使用して、永続クエリのリクエストをサンプル WKND GraphQL React アプリに統合します。

AEM ヘッドレスの高度な概念の概要

次のビデオでは、このチュートリアルで扱う概念の大まかな概要を説明しています。このチュートリアルでは、より高度なデータタイプを使用したコンテンツフラグメントモデルの定義、コンテンツフラグメントのネスト、AEM への GraphQL クエリの永続化について説明します。

注意
このビデオ（2:25 時点）では、GraphQL クエリについて調べるために、パッケージマネージャーを使用して GraphiQL クエリエディターをインストールすることに言及しています。ただし、AEM as Cloud Service の新しいバージョンでは、組み込みの GraphiQL エクスプローラー ​が用意されているので、パッケージのインストールは必要ありません。詳しくは、GraphiQL IDE の使用を参照してください。

プロジェクトセットアップ

WKND Site プロジェクトには必要な設定がすべて含まれているので、クイックセットアップを完了した後、すぐにチュートリアルを開始できます。この節では、独自の AEM ヘッドレスプロジェクトを作成する際に使用できる、いくつかの重要な手順のみを取り上げます。

既存の設定のレビュー

AEM で新しいプロジェクトを開始する最初のステップは、プロジェクトの設定をワークスペースとして作成することと、GraphQL API エンドポイントを作成することです。設定をレビューまたは作成するには、ツール／一般／設定ブラウザー ​に移動します。

設定ブラウザーへの移動

WKND Shared サイト設定がチュートリアル用に既に作成されていることがわかります。独自のプロジェクトの設定を作成するには、右上隅にある「作成」を選択し、表示される設定を作成モーダルのフォームに入力します。

WKND Shared 設定のレビュー

GraphQL API エンドポイントのレビュー

次に、GraphQL クエリの送信先となる API エンドポイントを設定する必要があります。既存のエンドポイントをレビューするか、新しく作成するには、ツール／一般／GraphQL に移動します。

エンドポイントの設定

WKND Shared Endpoint が既に作成されていることがわかります。自分のプロジェクトのエンドポイントを作成するには、右上隅にある「作成」を選択し、ワークフローに従います。

WKND Shared エンドポイントのレビュー

メモ
エンドポイントを保存すると、セキュリティコンソールへのアクセスに関するモーダルが表示されます。このモーダルでは、エンドポイントへのアクセスの設定を希望する場合にセキュリティ設定を調整できます。ただし、セキュリティ権限そのものについては、このチュートリアルの範囲外です。詳しくは、AEM ドキュメントを参照してください。

WKND コンテンツ構造および言語ルートフォルダーのレビュー

コンテンツ構造を明確に定義することが、AEM ヘッドレス実装の成功の鍵になります。コンテンツのスケーラビリティ、ユーザビリティおよび権限管理に役立ちます。

言語ルートフォルダーは、EN や JP などの ISO 言語コードを名前として持つフォルダーです。AEM 翻訳管理システムでは、これらのフォルダーを使用して、コンテンツの主要言語とコンテンツの翻訳言語を定義します。

ナビゲーション／アセット／ファイル ​に移動します。

ファイルへの移動

WKND Shared フォルダーに移動します。フォルダーのタイトルが「English」で、名前が「EN」であることがわかります。このフォルダーが、WKND Site プロジェクトの言語ルートフォルダーです。

English フォルダー

独自のプロジェクト用に、設定内に言語ルートフォルダーを作成します。詳しくは、フォルダーの作成の節を参照してください。

ネストされたフォルダーへの設定の割り当て

最後に、プロジェクトの設定を言語ルートフォルダーに割り当てる必要があります。この割り当てにより、プロジェクトの設定で定義されたコンテンツフラグメントモデルに基づいて、コンテンツフラグメントを作成できるようになります。

設定に言語ルートフォルダーを割り当てるには、フォルダーを選択し、上部のナビゲーションバーにある「プロパティ」を選択します。

「プロパティ」の選択

次に「クラウドサービス」タブに移動し、「クラウド設定」フィールドのフォルダーアイコンを選択します。

クラウド設定

表示されるモーダルで、前に作成した設定を選択して、その設定に言語ルートフォルダーを割り当てます。