AEM Developerの皆さま、こんにちは。大和株式会社の小林です。
アドベントカレンダー10日目の今日は、編集可能テンプレートに配置するコンポーネントのStructure(構造)モードとInitial Content(初期コンテンツ)モードの使い分けについてお話しします。
9日目の記事→ダイアログの選択肢をJSで生成する【Classic UI】
AEMに編集可能テンプレートが登場してから5年近くが経過し、以前の静的テンプレートよりも、すっかりメジャーな存在になりました。
しかし、いざテンプレートエディターを使ってテンプレートを組み立ててみると「あれ、このコンポーネントはStructureかInitial Contentかどっちのモードで配置したら良いの？」とか「コンポーネントのロックは解除すべき？」と迷われる方も多いのではないでしょうか。
今回は、そんな迷える皆さんにガイドラインをご提示したいと思います。
Structure(構造)モードとInitial Content(初期コンテンツ)モード
まず、それぞれのモードの基本的な役割は以下になります。
| モード | 役割と特徴 |
|---|---|
| Structure (構造) |
■ページの構造とポリシーを定義する ・ページのプレイスホルダーとなるレイアウトコンテナに配置可能なコンポーネントを指定 ・レイアウトコンテナと並列で、テンプレートに直接配置可能なコンポーネントを指定 ・ページに配置可能な各コンポーネントの振る舞いを定義 ■全てのページに反映させるコンポーネントを配置・設定する ■設定内容は、既存のページおよび新しく作られるページの両方に影響する |
| Initial Content (初期コンテンツ) |
■ページ作成後の初期状態を定義する ・ページ作成後にコンポーネントを配置する作業を、代わりにここであらかじめ実施 ■設定内容は、ページが新しく作られる際に適用され、既存のページには影響しない |
編集可能テンプレートとそのテンプレートから作ったページの関係は、Microsoft PowerPointにおけるスライドマスターと個々のスライドの関係と似ています。Structureモードで編集可能テンプレートを整える事は、PowerPointで、スライドの背景色・フッター・ロゴ表示などが全スライド共通で適用されるようスライドマスターを編集する事に対応します。
それぞれのモードで配置されたコンポーネントの挙動
Structureモード、Initial Contentモードのいずれでも、テンプレート上にコンポーネントを配置できますが、当該テンプレートから作成されたページ上における挙動に差異があります。
1. Structureモードで配置したコンポーネント
まず、Structureモードでレイアウトコンテナ[Root]に配置したコンポーネントは、個別のページでコピーや移動・削除ができないコンポーネントになります。
1-1. ロックを掛けたままのコンポーネント
Structureモードでは配置したコンポーネントのツールバーに南京錠アイコンのツールボタンが現れます。この南京錠が閉じた状態がコンポーネントにロックが掛かっている状態です。
ロックが掛かっている状態のコンポーネントは、テンプレートから作成された各ページで表示はされるが編集はできないコンポーネントになります。
各ページにおいては、ページ上でコンポーネントにマウスオンしても、コンポーネントを囲む青い線は表示されません。
逆に、テンプレートエディターのStructureモードでは、ロックが掛かっている場合に編集ができます。
1-2. ロックを解除したコンポーネント
南京錠を開けてロックを解除したコンポーネントは、個別のページで編集可能なコンポーネントになります。
各ページでコンポーネントのツールバーには編集用のレンチアイコンや鉛筆アイコンが現れますので、ページ毎に固有の設定が可能になります。
ただし、Structureモードで配置されたコンポーネントであるため、コピーや移動・削除はできません。そのため、ツールバーにそれらのアクションを行うためのボタンは表示されません。
2. Initial Contentモードで配置したコンポーネント
Initial Contentモードは、前述したように「ページ作成後にコンポーネントを配置する作業を、代わりにここであらかじめ実施」しているに過ぎませんので、コンポーネントの挙動は各ページにおいて配置するコンポーネントと同じです。個別ページでの編集およびコピー/移動/削除が可能です。
テンプレートで配置したコンポーネントの挙動をまとめると、以下の表になります。
| No. | モード | ロック | Structureモードでの編集 | 個別ページでの編集 | 個別ページでの コピー/移動/削除 |
|---|---|---|---|---|---|
| 1-1 | Structure | ロック | 可 | 不可 | 不可 |
| 1-2 | Structure | 解除 | 不可 | 可 | 不可 |
| 2 | Initial Content | N/A | N/A | 可 | 可 |
モードとロックの組合せに合わせたテンプレートへのコンポーネント配置
上記で説明したモードとロックの組合せによるコンポーネントの挙動に基づいて、それぞれに適するコンポーネントとその例をまとめると以下になります。
| No. | モード | ロック | 適するコンポーネント | コンポーネント例 |
|---|---|---|---|---|
| 1-1 | Structure | ロック | ・各ページで個別の設定をしないコンポーネント ・出力内容が全ページ同一、または、 ・階層情報等から出力内容を自動制御するもの |
ヘッダー フッター パンくず ナビゲーション |
| 1-2 | Structure | 解除 | ・各ページで表示位置は固定だが、設定内容は異なるもの （要素の位置と数が固定のもの） |
ヒーロー画像 ニュースのタイトルと記事 |
| 2 | Initial Content | N/A | ・当該テンプレートに基づくページでは標準で配置するもの ・配置する数が不定のもの ・ページによっては削除する可能性があるもの |
通常のコンポーネント |
Adobe社が推奨するコンポーネントのJCRノード階層（/apps/project/components/structure|content）と照らし合わせると、1-1のStructureモード＋ロックで利用する事が多いコンポーネントを、structureフォルダに分類することになります。
おまけ
1-1.Structureモード＋ロック状態でテンプレート上でコンポーネントを編集した後にロックを解除するとどうなると思いますか？
ロックを解除するとStructureモードでは編集内容は失われたように見えますが、実は編集内容はInitial Contentに反映されています。つまり、1-2.Structureモード＋ロック解除で配置されたコンポーネントにInitial Contentモードで初期状態を設定したのと同じ状態になります。
Structureモードでロックを解除した後にInitial Contentを確認しないと、ページ作成時に予期しないコンテンツが含まれている事になりかねませんので、ご注意ください。
最後までお読みいただき、ありがとうございました。明日は狩野さんの「AEM開発時に役立つサイトたちの紹介」です。きっと役に立つと思いますよ。ブックマークしなくちゃ！
