OpenAPIを使用したAEM コンテンツフラグメント配信の基本を学ぶ
このチュートリアルでは、AEMのコンテンツフラグメント配信とOpenAPIを使用して、AEM コンテンツを構築し、公開する方法を説明します。ヘッドレス CMSのシナリオで、外部アプリによって使用されます。 WKND チームと関連するメンバーの詳細を表示するReact アプリの作成を歩いて考えることで、これらの概念を探求します。 チームとメンバーは、AEM コンテンツフラグメントモデルを使用してモデル化され、OpenAPIを使用したAEM コンテンツフラグメント配信を使用してReact アプリで使用されます。
このチュートリアルでは、以下のトピックを扱います。
- プロジェクト設定の作成
- データをモデル化するコンテンツフラグメントモデルの作成
- 作成したモデルに基づいてコンテンツフラグメントを作成します
- AEMのコンテンツフラグメントをクエリする方法について詳しくは、AEM Content Fragment Delivery with OpenAPI API ドキュメントの「Try It」機能を参照してください
- サンプル React アプリからのOpenAPI API呼び出しを使用して、AEM コンテンツフラグメント配信を介してコンテンツフラグメントデータを使用する
- ユニバーサルエディターで編集できるようにReact アプリを強化する
前提条件 prerequisites
このチュートリアルに従うには、以下が必要です。
-
AEM Sites as a Cloud Service
-
HTML と JavaScript の基本的なスキル
-
以下のツールをローカルにインストールする必要があります。
AEM as a Cloud Service環境
このチュートリアルを完了するには、AEM AdministratorがAEM as a Cloud Service環境にアクセスすることをお勧めします。 開発環境、迅速な開発環境、または サンドボックスプログラム の環境も使用できます。
それでは、始めましょう。
コンテンツフラグメントモデルの定義からチュートリアルを開始します。
GitHub プロジェクト
ソースコードとコンテンツパッケージは、AEM ヘッドレスチュートリアル GitHub リポジトリで入手できます。
main ブランチには、このチュートリアルの最終的なソースコード が含まれています。
各ステップの最後にあるコードのスナップショットは、Git タグとして利用できます。
- 第4章の開始 – React アプリ：
headless_open-api_basic - 第4章の終わり – React アプリ：
headless_open-api_basic_4-end - 第5章の終わり – ユニバーサルエディター：
headless_open-api_basic_5-end
チュートリアルまたはコードに問題が見つかった場合は、GitHub イシューを報告してください。