最終更新日 :
2021年4月27日
AEM UI のベストプラクティス
- ページオーサリングのカスタマイズ - オーサリングインスタンスのページオーサリング機能（およびコンソール）をカスタマイズするためのベストプラクティス。
- コンソールのカスタマイズ - オーサリングインスタンスのコンソール（およびページオーサリング機能）をカスタマイズするためのベストプラクティス。
- RTE の詳細 - AEM でのリッチテキスト設定と RTE の使用に関するベストプラクティス。
UI の問題のデバッグ
- AEM Chrome 拡張機能 - このブラウザー拡張機能は、UI が遅いまたは壊れている原因をデバッグするために、非実稼動環境で利用できます。 この拡張機能を使用すると、Sling の要求処理（実行されたフィルター、サーブレット、エラーハンドラー、コンポーネント、Sling リソースなど）およびページ読み込み中に実行された JCR クエリを表示できます。
- タッチ操作対応 UI のクライアント側の問題のデバッグ - クライアント側の問題をデバッグするための様々な手順。
- AEM 開発者モードを使用したコンポーネントの問題のデバッグ - 開発中または非実稼動環境でコンポーネントをデバッグする際に役立ちます。
clientlib の問題
AEM の clientlib とは - 最新の Web サイトは、複雑な JavaScript および CSS コードによって駆動されるクライアント側の処理に大きく依存しています。このコードの提供を整理して最適化することは、非常に複雑な問題です。
この問題に対処するために、AEM にはクライアント側ライブラリフォルダーが用意されています。これにより、クライアント側のコードをリポジトリに保存し、カテゴリに整理して、コードの各カテゴリをクライアントに提供するタイミングと方法を定義できます。クライアント側ライブラリシステムは、最終的な Web ページに正しいコードをロードするための正しいリンクを作成します。
組み込み clientlib の 1 つがロードされていない場合：
すべての埋め込みファイルの名前を確認するには、次の手順を使用します。
- Web ブラウザーのアドレスボックスで、次のテキストを HTML の URL に追加します。
?debugClientLibs=true
- ページが読み込まれたら、ページのソースを表示します。
- リンク要素の href として提供されているリンクをクリックして、ファイルを開き、ソースコードを表示します。
ほとんどの clientlib が縮小されていない場合：
- 縮小オプションが AEM HTML ライブラリマネージャーで有効になっているかどうかを確認します。
- それでも問題が解決しない場合は、デバッグロガーを設定して構文エラーをチェックします。次の手順に従います。
- http://<host>:<port>/system/console/slinglog を開きます。
- 「Add new logger」をクリックします。
- 「Log Level」を「DEBUG」に設定します。
- ログファイル名を「clientlibs.log」に変更します。
- 「Logger」フィールドに次のクラスを追加します。
com.adobe.granite.ui.clientlibs - 「Save」をクリックします。
- 以下のようなエラーが表示される場合、clientlibs ファイルに構文エラーがあります。
27.06.2019 11:36:01.450 *ERROR* [0:0:0:0:0:0:0:1 [1561649761160] POST /libs/granite/ui/content/dumplibs.rebuild.html HTTP/1.1] com.adobe.granite.ui.clientlibs.processor.gcc.impl.YUIScriptProcessor Processed /apps/acs-commons/components/dam/custom-component-activator/clientlib/activator.js. 1 error(s), 0 warning(s) 27.06.2019 11:36:01.450 *DEBUG* [0:0:0:0:0:0:0:1 [1561649761160] POST /libs/granite/ui/content/dumplibs.rebuild.html HTTP/1.1] com.adobe.granite.ui.clientlibs.impl.HtmlLibraryBuilderImpl processing /apps/acs-commons/components/dam/custom-component-activator/clientlib with processor yui for mode min rejected.
- また、新しいプロセッサでしか処理できない新しい js ファイルが存在する可能性があるので、スクリプトプロセッサを YUI から GCC に変更して試すこともできます。
RTE の問題
RTE 機能をテストする前に、常に最新の SP/CFP をインストールしてください。
RTE で属性が削除される場合：
- 保存後に RTE から一部の属性が削除される場合は、クロスサイトスクリプティングを防止するために導入された XSS セキュリティフレームワークが原因である可能性があります。
- ログファイルには、次のようなメッセージが表示されることがあります。
25.02.2019 18:29:31.815 *INFO* [10.98.144.110 [1551119371795] GET /content/support/en_US/security.html HTTP/1.1] org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. The rel attribute had a value of "noopener noreferrer". This value could not be accepted for security reasons. We have chosen to remove this attribute from the tag and leave everything else in place so that we could process the input.
- この場合は、「/libs/cq/xssprotection/config.xml」をオーバーレイし、ビジネスニーズに従ってセキュリティルールを更新できます。ただし、AEM インスタンスがクロスサイトスクリプティングに公開されるので、アドビでは推奨していません。
