お久しぶりです。大和株式会社の長森です。
今回はわかりそうでわかりにくいContext aware configuration (CA-config)について説明していきます。
Context aware configuration (CA-config)とは
Context aware configurationとは、コンテンツリソースまたはリソースツリーに応じて、動的な設定を行う機能です。
、、と言われても少しわかりにくいと思うので、例をご紹介します。
下の図は、とある会社がBrandA、BrandB、BrandCの各サイトを国別、言語別に構築した例です。
ひとつのAEMで複数サイト-多国-多言語を構成する場合に、よく見る造りですね。
このような場合、同じコンポーネントを使いたいが、サイト別や国別、言語別で異なる値(文言、アセット)を設定したい!という場面があると思います。
具体的には、以下のようなケースです。
CA-configの使用例
- 国や地域に応じて、外部サイトのリンクを設定したい
- ブランド毎に違うロゴ/ファビコンを表示したい
- サイト別に違う公開ワークフローを動かしたい
CA-configを用いると、固有の値(特定のリンク、ロゴの画像パス、、、)をサイト別、国別、言語別に設定することが出来ます。
そのため、同一のコンポーネントを用いて、サイト、国、言語で異なる情報を表示することが可能になります。
これが、コンテンツリソースまたはリソースツリー(ページ構成)に応じて、動的な設定を行うということです。
CA-configの具体的な実装方法
今回は、CA-configの値を表示する、Page-titleコンポーネントを実装してみます。
◆実装
1. Javaクラスの作成
まずはじめに、CA-configのJavaクラスを作成します。
PageTitleConfigというJavaクラスを作成し、ConfigのプロパティにはString型のpageTitleTextを作ります。
2. HTLにて、CA-configの値を取得
あらかじめ作成したPageTitleコンポーネントHTLで、CA-configの値を表示するよう設定を加えます。
画像内赤線①でCA-configの値を表示する設定をしています。
以下を使用することで、CA-configの値をHTLで直接取得することが可能です。
${caconfig['CA-configのクラス名'].プロパティ名}
例では、PageTitleConfigというCA-configのpageTitleTextプロパティの値を取得し、変数"text"に入れて、②で表示しています。
これだけで、CA-configの実装自体は完了です!
一見難しそうに見えますが、実際に作ってみると意外と簡単です。
ではここからは、どのように各ページに異なる値を設定していくのかについてお話していきます。
3. サイト構造にあわせてCA-configを設定
「1. Javaクラスの作成」で作成したCA-configを利用して、各ページのCA-configの値を設定します。
今回はページ冒頭で紹介したリソースツリーの通りにページとCA-configを作成していきます。
(※ページとCA-configの階層構造は必ずしも同じである必要はありません。)
赤字で書かれている文字列が各ページに設定する値です。
① Confの配下に各CA-configの値を設定するノードを作成します。
環境によりますが、基本的には、conf配下のフォルダ/settingの下に/ca-configを作成し、対象ページがあるcontent/配下と同じ階層のノードを作成します。
例では、conf/example/settingsの配下に"ca-config"というSling folderを作成し、配下にページのツリーと同様の階層をSling Folderで作成しています。
②CA-configを設定したいパスの配下に jcr:primaryType="nt:unstructured" の「sling:configs」ノードを作成します。
③jcr:primaryType="cq:Page"でCA-configのノードを作成します。
ノード名は 「1. Javaクラスの作成」で作成したCA-configのJavaのクラス名にします。
上記で作成したページのjcr:contentノードに、CA-configのプロパティであるpageTitleTextを追加し、値にこのページで設定したいCA-configの値をいれます。
4. ページ側で参照するCA-configを指定
/content配下にある値を設定したいページのパスのjcr:contentノードに「sling:configRef」プロパティを追加します。
その値に、このページで使いたいCA-configの値が設定されている対象のsling:configs、またはsling:configsの親を指定します。(上記 sling:configs は「3. サイト構造にあわせてCA-configを設定」で作成したノード)
さて、ここまでで値の設定も完了です!
では結果を見てみましょう。
◆結果
各ページにPage-titleコンポーネントを置いたときに各ページの表示は以下のようになりました。
◆Brand A
【brandA】CA-config未設定
【brandA/jp】CA-configの値「BrandA Japan」
【brandA/jp/ja】CA-configの値「ブランド A ジャパン」
【brandA/us】CA-configの値「BrandA USA」
【brandA/us/en】CA-configの値「Brand A USA English」
◆Brand B
【brandB】CA-configの値「BrandB」
【brandB/jp】ページの「sling:configRef」プロパティが未設定の場合
※「sling:configRef」プロパティが未設定の場合は、ページの親階層のパスを遡って値を取得します。
その為、ここでは【brandB】ページの「BrandB」が表示されています。
(jp配下のページも同結果)
【brandB/us】ページの「sling:configRef」プロパティにパスが設定されているが、そのパスにconfigが存在しない場合
※「sling:configRef」プロパティで設定されているパスの先にconfigが存在しない場合は、config側の親階層のパスを遡って設定値を取得します。
その為、ここでは【brandB】ページの「BrandB」が表示されています。
(us配下のページも同結果)
◆Brand C
【brandC】CA-configの値「BrandC」
【brandC/jp/ja/press】CA-configの値「ブランドC ニュース」
クイズ
【brandC/jp/ja/company】CA-config未設定
、、、ここでの表示結果はどのようになるかお分かりですか??
答えはページの一番最後に書きます!
まとめ
このように、各リソースツリーに異なる設定を持たせることが出来るのがCA-configです。
今回はわかりやすく値をコンポーネントで直接表示していますが、使い方は様々です。
CA-configをマスターすれば、いろんな場面で活用できると思うので、是非参考にしていただけたらと思います!
CA-configノードの作成に便利な拡張機能
wcm.io About Configuration Editor
AEMのオーサーがページにマッピングされたconfigの確認、修正をUI上で行うことができる、便利な拡張機能です。
About Configuration Editor | wcm.io
参考文献
・https://experienceleague.adobe.com/ja/docs/experience-manager-core-components/using/developing/context-aware-configs
・https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-blogs/context-aware-configuration-in-aem/ba-p/620639
答え合わせ
【brandC/jp/ja/company】での表示結果は、「BrandC」が正解です!
(companyページにはCA-configの設定がなく、設定されている一番近い親階層のページ(BrandC)のsling:configRefで指定されたCA-configのタイトル値を取得する為)