ドキュメントExperience Cloud KCS

AEMのグローバルヘッダーとフッターをReact アプリに統合する

最終更新日： 2026年6月22日

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

説明 description

環境

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

問題/症状

  • URL埋め込みコンポーネントを使用すると、ビデオリンクのみがサポートされ、ページ URLの埋め込みは許可されません。
  • ヘッダーとフッターのコンテンツをJSON （例：model.json）として提供すると、機能の問題が発生します。 AEM ネイティブのクラスが正しく動作せず、検索や翻訳などの機能が機能しません。
  • 既存のAEM アーキテクチャはヘッドフル（コンポーネント/見た目）で、テンプレートとコンポーネントの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
experience-cloud-kcs-help-kbarticles