ドキュメント

AEMのグローバルヘッダーとフッターの React アプリへの統合

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Adobe Experience Manager（AEM）のグローバルヘッダーとフッターを React アプリケーションに統合すると、スタイル設定と機能の問題が発生する可能性があります。 特にエクスペリエンスフラグメント（XF）を使用する場合、デフォルトのAEMの設定では、React の標準のシングルページアプリケーション（SPA）がサポートされません。 これを修正するには、適切なHTML フラグメントを取り込み、パスの問題を回避するように Dispatcher ルールを設定します。

説明 description

環境

  • 製品： Adobe Experience Manager（AEM）as a Cloud Service - Sites
  • インスタンス： 開発

問題/症状

  • URL 埋め込みコンポーネントの使用では、ビデオリンクのみがサポートされ、ページ URL の埋め込みは許可されません。
  • ヘッダーおよびフッターのコンテンツを JSON として提供すると（例えば、model.json）、機能に問題が発生します。 AEM ネイティブクラスが正しく機能せず、検索や翻訳などの機能が機能しない。
  • 既存のAEM アーキテクチャは headful （components/sightly）であり、テンプレートおよびコンポーネントに対する SPA React 実装をサポートしていません。

解決策 resolution

ネイティブスタイルと機能を維持しながら、AEMのグローバルヘッダーとフッターを React アプリケーションに統合するには、次の手順に従います。

  1. .head.nocloudconfig.html セレクターと .body.nocloudconfig.html セレクターを使用して、エクスペリエンスフラグメント（XF）のHTMLを取り込みます。 これらのセレクターは、クラウド設定データを削除し、HTMLを外部アプリと互換性のあるものにします。

  2. web server rewrite rules を確認してください。 エクスペリエンスフラグメント URL の前に無効なパスを追加しないでください。 例えば、/content/<my_project>/content/experience-fragments/...404 エラーを避けるために、 のようなパスが正しく設定されていることを確認します。

  3. エクスペリエンスフラグメントへのアクセスで問題が発生した場合：

    • AEM ログで、パスに関連するエラーや変更がないか確認します。
    • Dispatcher ルールを更新して、エクスペリエンスフラグメントのパスに不要なプレフィックスを追加しないようにします。

関連資料

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f