ドキュメントExperience Cloud KCS

AEMでサードパーティまたはSPA コンポーネントが正しくレンダリングされない

最終更新日： 2026年7月16日

Angular、React、マイクロフロントエンド、外部埋め込み、スタンドアロン SPAをAEMページに統合するには、適切な統合モデルと設定が必要です。 実装が正しくないと、レンダリングの問題、スタイルの欠落、オーサリングの制限、検証の問題、ペイロードの不整合、Dispatcherの書き換えエラーが発生することがよくあります。 この記事では、サポートされている統合パターンと、これらの問題を回避するために必要な手順の概要を説明します。

説明 description

環境

  • Adobe Experience Manager as a Cloud Service （AEMaaCS）
  • Adobe Experience Manager On-Premise Software
  • AEM Managed Services

問題/症状

  • サードパーティのAngular、React、ウィジェットのコンポーネントは、スタイル設定や機能なしでレンダリングされます。
  • JavaScriptまたはCSS リソースの読み込みに失敗する。
  • エクスペリエンスフラグメント HTML セレクターリクエストで​ 404 ​個のエラーが返されます。
  • 作成者は、AEM ページ内にサードパーティコンポーネントを配置したり、編集したりすることはできません。
  • 埋め込まれたソーシャルメディアコンテンツが表示されない。
  • サポートされているAngularまたはReact統合モデルに関して、不確実性が存在します。
  • リモート SPAが正しく読み込まれない、または統合できない。

原因

AEMは、それぞれ特定の要件と制限を備えた、複数の統合モデルをサポートしています。 サポートされていない埋め込み方法が使用されている場合、統合モデルが誤って混在している場合、エクスペリエンスフラグメントの書き換えが正しく設定されていない場合、またはリモートアプリケーションがサポートされているパターンに従ってホストおよび設定されていない場合に問題が発生します。

解決策 resolution

この問題を解決するには、次の手順に従います。

  1. SPA エディター、ハイブリッド HTLおよびReact、埋め込みコンポーネント、マイクロフロントエンドフレームワーク、リモート SPA、エクスペリエンスフラグメント統合など、特定のユースケースでサポートされている統合パターンを選択します。
  2. AEM 6.5でのAngular実装の場合、必要なSPA Editor機能パックがインストールされ、設定されていることを確認します。
  3. HTL ページのReact コンポーネントの場合は、サポートされているクライアントライブラリ、web コンポーネントラッパー、コンテナエレメントを使用してコンポーネントを読み込みます。
  4. SPA エディター実装の場合は、コンポーネントマッピングとモデル統合を確認します。
  5. サポートされているソーシャルメディアコンテンツには、埋め込みコンポーネントまたはHTML コンポーネントを使用します。
  6. iframe、web コンポーネント、リモートスクリプトの読み込み、モジュールフェデレーションなど、サポートされているアプローチを通じてマイクロフロントエンドを実装します。
  7. サポートされているデプロイメント方法を使用してリモート SPAをホストし、アプリケーションアセットにアクセスできることを確認します。
  8. 外部アプリケーションでコンテンツを再利用する場合は、エクスペリエンスフラグメント HTML セレクターを使用し、書き換え動作を検証します。
  9. 埋め込みPDF表示の場合は、クライアントライブラリを使用してビューアを実装し、ソース PDF ファイルにアクセスできるようにします。
  10. オーサー環境とパブリッシュ環境の両方で、レンダリング、オーサリング機能、アセットの読み込みを検証します。

関連トピックス

recommendation-more-help
experience-cloud-kcs-help-kbarticles