ページテンプレート - 静的

テンプレートはページを作成するための雛形として使用され、選択した範囲内で使用できるコンポーネントを定義します。テンプレートは、そこから作成されるページと同じ構造を持つノードの階層ですが、実際のコンテンツは含みません。

テンプレートごとに、使用可能なコンポーネントが提示されます。

テンプレートはコンポーネントで構成されています。
コンポーネントによって使用され、アクセスが許可されるウィジェットを使用して、コンテンツがレンダリングされます。

メモ

編集可能なテンプレートも使用できますが、これは最も柔軟性が高く、最新の機能を実現するために推奨されるタイプのテンプレートです。

テンプレートのプロパティおよび子ノード

テンプレートは、タイプが cq:Template のノードであり、以下のプロパティおよび子ノードが含まれます。

名前	種類	説明
.	cq:Template	現在のテンプレートです。テンプレートのノードタイプは cq:Template です。
allowedChildren	String[]	このテンプレートの子となることが許可されているテンプレートのパス。
allowedParents	String[]	このテンプレートの親となることが許可されているテンプレートのパス。
allowedPaths	String[]	このテンプレートをベースとすることが許可されているページのパス。
jcr:created	日付	テンプレートの作成日。
jcr:description	文字列	テンプレートの説明。
jcr:title	文字列	テンプレートのタイトル。
ranking	Long	テンプレートのランクです。ユーザーインターフェイスにテンプレートを表示する際に使用します。
jcr:content	cq:PageContent	テンプレートのコンテンツを含むノード。
thumbnail.png	nt:file	テンプレートのサムネール。
icon.png	nt:file	テンプレートのアイコン。

テンプレートはページの基礎です。

ページを作成するには、テンプレート（ノードツリー /apps/<myapp>/template/<mytemplate>）をサイトツリーの対応する位置にコピーする必要があります。「Web サイト」タブを使用してページを作成する場合も、この処理がおこなわれています。

このコピー処理により、ページには、初期コンテンツ（通常はトップレベルコンテンツのみ）と sling:resourceType プロパティ、ページのレンダリングに使用するページコンポーネントのパス（子ノード jcr:content に含まれるすべてのもの）が与えられます。

テンプレートの構造

以下の 2 つの側面について考慮する必要があります。

テンプレート自体の構造
テンプレート使用時に作成されるコンテンツの構造

テンプレートの構造

テンプレートは cq:Template タイプのノードの下に作成されます。

screen_shot_2012-02-13at63646pm

様々なプロパティを設定できます。具体例は以下のとおりです。

jcr:title - テンプレートのタイトル。ページ作成時にダイアログに表示されます。
jcr:description - テンプレートの説明。ページ作成時にダイアログに表示されます。

このノードには jcr:content（cq:PageContent）ノードが含まれており、結果ページのコンテンツノードの基礎として使用できます。これが、sling:resourceType を使用して、新しいページの実際のコンテンツをレンダリングする際に使用するコンポーネントを参照します。

screen_shot_2012-02-13at64010pm

このコンポーネントは、新しいページを作成する際に、コンテンツの構造およびデザインを定義するために使用します。

screen_shot_2012-02-13at64137pm

テンプレートによって作成されるコンテンツ

テンプレートは、cq:Page タイプのページを作成するのに使用します（前述のように、ページは特別なタイプのコンポーネントです）。各 AEM ページには構造化ノード jcr:content があります。この特徴は次のとおりです。

タイプが cq:PageContent である。
定義済みのコンテンツ定義を保持する構造化ノードタイプである。
コンテンツのレンダリングに使用する Sling スクリプトを保持するコンポーネントを参照するための sling:resourceType プロパティを持つ。

デフォルトテンプレート

AEM にはそのまま使用できるデフォルトのテンプレートが多数付属しています。テンプレートをそのまま使用したほうがよい場合もあります。その場合は、実際の Web サイトでテンプレートが使用可能であることを確認する必要があります。

例えば、AEM には、コンテンツページやホームページを含む、いくつかのテンプレートが付属しています。

タイトル	コンポーネント	場所	目的
ホームページ	homepage	geometrixx	Geometrixx ホームページテンプレート。
コンテンツページ	contentpage	geometrixx	Geometrixx コンテンツページテンプレート。

デフォルトテンプレートの表示

リポジトリ内のすべてのテンプレートのリストを確認するには、以下の手順を実行します。

CRXDE Lite で、ツールメニューを開いて、「クエリ」をクリックします。
「クエリ」タブで、
「タイプ」で、「XPath」を選択します。
内 クエリ 入力フィールドに次の文字列を入力します。//element(*, cq:Template)
「実行」をクリックします。結果ボックスにリストが表示されます。

多くの場合、既存のテンプレートを使用して、各自の用途に合わせて新しいテンプレートを開発します。詳しくは、ページテンプレートの開発を参照してください。

既存のテンプレートを各自の web サイト用に有効にし、web サイトコンソールから「Web サイト」のすぐ下にページを作成するときにページを作成ダイアログにそのテンプレートを表示する場合は、テンプレートノードの allowedPaths プロパティを次のように設定します。/content(/.&?lang=ja#42;)?

テンプレートデザインの適用方法

UI でスタイルがデザインモードを使用して定義されている場合、デザインは、スタイルが定義されているコンテンツノードの正確なパスに保持されます。

注意

Adobeでは、デザインモードを介してのみデザインを適用することをお勧めします。

例えば、CRX DE でデザインを変更することはベストプラクティスではなく、そのようなデザインの適用は、意図したビヘイビアーとは異なることがあります。

デザインがデザインモードを使用してのみ適用される場合、次のセクションは、デザインパスの解像度、デシジョンツリー、および例は適用されません。

デザインパスの解像度

静的テンプレートに基づいてコンテンツをレンダリングする場合、AEM はコンテンツ階層のトラバーサルに基づいて、最も関連性の高いデザインとスタイルをコンテンツに適用しようとします。

AEM は次の順序で、コンテンツノードに最も関連性の高いスタイルを決定します。

（デザインモードでデザインが定義されている場合と同様に）コンテンツノードのフルパスと正確なパスのデザインがある場合には、そのデザインを使用します。
親のコンテンツノードにデザインがある場合は、そのデザインを使用します。
コンテンツノードのパス上に任意のノードのデザインがある場合は、そのデザインを使用します。

最後の 2 つのケースで、適用可能なデザインが複数ある場合は、コンテンツノードに最も近いものを使用します。

デシジョンツリー

これはデザインパスの解像度を図で表現したものです。

design_path_resolution

例

デザインを任意のノードに適用できる場合、シンプルなコンテンツ構造を次のように考えてみます。

/root/branch/leaf

次の表に、AEM がデザインを選択する方法を示します。

デザインの検索	存在するデザイン	選択したデザイン	コメント
`leaf`	`root` `branch` `leaf`	`leaf`	最も正確に一致するものが常に取得されます。
`leaf`	`root` `branch`	`branch`	ツリー下部の最も近いマッチにフォールバックします。
`leaf`	`root`	`root`	他のすべてが失敗した場合は、残りのものを取得します。
`branch`	`branch`	`branch`
`branch`	`branch` `leaf`	`branch`
`branch`	`root` `branch`	`branch`
`branch`	`root` `leaf`	`root`	完全に一致しない場合は、ツリーの 1 つ下のものを選択します。これは常に適用できるが、ツリーの上の方は具体的すぎる可能性があると仮定します。

ページテンプレートの開発

AEM ページのテンプレートは、新しいページを作成する際に使用する単なるモデルです。初期コンテンツは必要に応じて増減できます。テンプレートの役割は、編集やレンダリングが可能なように必要なプロパティ（主に sling:resourceType）が設定された、正しい初期ノード構造を作成することです。

新しいテンプレートの作成（既存のテンプレートを使用）

言うまでもなく、新しいテンプレートは完全にゼロから作成することもできますが、多くの場合は、既存のテンプレートをコピーして更新したほうが、時間と労力を節約できます。例えば、Geometrixx 内のテンプレートを使用して作業を開始できます。

既存のテンプレートに基づいた新しいテンプレートの作成手順

既存のテンプレート（作成したいテンプレートに定義が最も近いものが望ましい）を、新しいノードにコピーします。

テンプレートは、通常、/apps/<website-name>/templates/<template-name> に格納されています。

メモ

使用可能なテンプレートのリストは、新しいページの場所と、各テンプレートで指定されている配置制限によって異なります。使用可能なテンプレートを参照してください。
新しいテンプレートノードの jcr:title を、新しい役割を反映するように変更します。適宜、jcr:description も更新できます。ページで使用可能なテンプレートは、適宜変更してください。

メモ

Web サイト コンソールから Web サイト のすぐ下にページを作成するときに ページを作成 ダイアログにテンプレートを表示する場合は、 allowedPathsテンプレートノードのプロパティを、/content(/.*)?に設定します。
テンプレートの基礎となっているコンポーネント（テンプレート内の jcr:content ノードの sling:resourceType プロパティを参照）をコピーして、新しいインスタンスを作成します。

コンポーネントは、通常、/apps/<website-name>/components/<component-name> に格納されています。
新しいコンポーネントの jcr:title と jcr:description を更新します。
テンプレート選択リストに新しいサムネール画像を表示する場合は、thumbnail.png を置き換えます（サイズは 128 x 98 px）。
テンプレートの jcr:content ノードの sling:resourceType を、新しいコンポーネントを参照するように更新します。
テンプレートとその基になるコンポーネントのいずれかまたは両方に関して、機能やデザインをさらに変更します。

メモ

/apps/<website>/templates/<template-name> ノードに対する変更は、テンプレートインスタンスに影響します（選択リストの場合と同様）。
/apps/<website>/components/<component-name> ノードに対する変更は、テンプレート使用時に作成されるコンテンツページに影響します。

これで、新しいテンプレートを使用して Web サイト内にページを作成できます。

メモ

エディタークライアントライブラリは、コンテンツページに cq.shared 名前空間が存在することを前提としています。名前空間が存在しない場合は、JavaScript エラー「Uncaught TypeError: Cannot read property 'shared' of undefined」が発生します。
すべてのサンプルコンテンツページには cq.shared が含まれているので、それらをベースとするコンテンツには自動的に cq.shared が含められます。ただし、サンプルコンテンツをベースとせず、ゼロから独自のコンテンツページを作成する場合は、cq.shared 名前空間を含める必要があります。
詳しくは、クライアントサイドライブラリの使用を参照してください。

既存のテンプレートを使用可能にする

この例では、特定のコンテンツパスにテンプレートを使用できるようにする方法を示しています。ページ作成者が新しいページの作成時に使用できるテンプレートは、使用可能なテンプレートで定義されたロジックによって決まります。

CRXDE Lite で、ページに使用するテンプレート（ニュースレターテンプレートなど）に移動します。
allowedPaths プロパティおよびテンプレートの可用性に使用する他のプロパティを変更します。例えば allowedPaths: /content/geometrixx-outdoors/[^/]+(/.*)? は、このテンプレートが /content/geometrixx-outdoors 以下の任意のパスで許可されることを意味します。