ACS AEM Commons - AEM Environment Indicator - AEM開発者ブログ by YAMATO

こんにちは。大和株式会社の豊蔵です。

今回はACS AEM CommonsのAEM Environment Indicatorについて紹介します。
ACS AEM Commonsって何？という方は"ACS AEM Commons全機能ひとこと紹介 2025年版"の記事をご確認ください！

AEM Environment Indicatorとは

「今どの環境で作業してるんだっけ...？」
AEMでの作業中にそんな風にヒヤリとしたこと、ありませんか？
本番・開発等の複数の環境を行き来していると、画面を見ただけでは判別しづらくて、不安になることもしばしば。間違って本番環境に手を加えてしまったら…と思うとゾッとしますよね。
そんな不安を解消してくれるのが、「AEM Environment Indicator」です！

これなら間違って編集することはありませんね！

と、上の例はやりすぎですが...
この機能を使えば、環境毎にインジケーターを表示して、今どの環境を操作しているのかが一目で分かるようになります。しかも、色・位置・表示内容などは自由にカスタマイズ可能。作業ミスのリスクを大幅に減らすことができます。

使い方

以下のパスにOSGi設定用のJSONファイルを配置し、デプロイしてください。
/apps/example/osgiconfig/config.author/com.adobe.acs.commons.wcm.impl.AemEnvironmentIndicatorFilter.cfg.json
※exampleやconfig.authorの部分はプロジェクトや環境に応じて調整してください。

{
    "css-color":"",
    "css-override":"",
    "inner-html":"",
    "always-include-base-css":false,
    "always-include-color-css":false,
    "browser-title-prefix":"",
    "excluded-wcm-modes":[],
    "allowed-extensions":[]
}

以下では、それぞれの設定項目について順に解説していきます。

1．Color

インジケーターとして表示されるバーの色を指定します。
CSSのbackground-colorプロパティで有効な値（例redや#FF0000など）を入力してください。
環境によって色を変えると分かりやすいでしょう。

2．CSS Override

acs-commons-env-indicatorセレクタとプロパティを書くことで、インジケーターのバーをカスタマイズできます。注意点は、acs-commons-env-indicatorセレクタが必須であることです。
こちらの設定を行う際には、1．Colorは設定不要です。（設定しても無視されます。）

基本的に、デフォルトで用意されたインジケーターのバーのCSSをカスタマイズすると良いでしょう。

#acs-commons-env-indicator { border-bottom: 1px solid rgba(0, 0, 0, 0.25); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: fixed; left: 0; top: 0; right: 0; height: 5px; z-index: 100000000000000; background-color: red;}

カスタマイズによって、インジケーターの表示位置を画面下にしたり、バーを太くすることが可能です。

3．InnerHTML

インジケーター内の<div>タグに、任意のHTMLを埋め込むことができます。
基本的に、環境名を文字で表示する（例：DEV、PROD）という使い方になるでしょう。
styleを書くことで自由に文字をカスタマイズできます。

例として、インジケーター下に赤文字で"DEV"を表示する設定です。
pointer-events: noneによって、文字に隠れたボタンなどに影響がでないようにしてあります。

設定例：

<b style=\"line-height: 20px; font-size: 30px; padding-left: 20px; pointer-events: none; color: red;\">DEV</b>

実際の表示：

他にも、画像を表示したり、<script>タグを使ってマウスオーバー時の処理を追加することも可能です。

4 & 5．Always Include Base CSS & Always Include Color CSS

これらの設定は本来、2．CSS Override と併用することで、デフォルトのスタイルを補完するための機能と思われます。
ですが、最新バージョン(v6.11.0)では、利用できないようです。

6．Browser Title

ブラウザのタブに表示されるタイトル先頭に、指定した文字を追加できます。
例えば、「DEV」と設定すると、ブラウザのタブに表示されるタイトルが次のように表示されます。

7．Excluded WCM modes

特定のWCMモードにおいて、インジケーターを非表示にする設定です。
WCMモードについてはこのページをご参照ください。
例えば、「PREVIEW」と指定するとプレビュー画面においてインジケーターが表示されなくなります。
「DISABLED」モードはデフォルトでインジケーターを非表示となります。

8．Allowed URI extensions

指定した拡張子を持つURLに対してのみ、インジケーターを表示するよう制御できます。
この項目は設定しなくても、デフォルトで「html」, 「htm」, 「jsp」に対してのみインジケーターが表示されます。
利用例としては、「json」を書くことでページをjson出力した場合でもインジケーターを表示できます。