現在表示中:

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

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

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

注意:

編集可能テンプレートも使用できます。

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

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

名前
タイプ
説明
.
 cq:Template 現在のテンプレート。テンプレートのノードタイプは cq:Template です。
 allowedChildren   String[] このテンプレートの子となることが許可されているテンプレートのパス。
 allowedParents  String[] このテンプレートの親となることが許可されているテンプレートのパス。
 allowedPaths  String[] このテンプレートをベースとすることが許可されているページのパス。
 jcr:created  Date テンプレートの作成日。
 jcr:description  String テンプレートの説明。
 jcr:title  String テンプレートのタイトル。
 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 が 1 つずつ含まれています。その特徴は次のとおりです。

  • タイプが cq:PageContent である。

  • 定義済みのコンテンツ定義を保持する構造化ノードタイプである。

  • sling:resourceType プロパティを持ちます。このプロパティは、コンテンツのレンダリングに使用される sling スクリプトを保持するコンポーネントを参照します。

デフォルトテンプレート

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    注意:

    使用可能なテンプレートのリストは、新しいページの場所と、各テンプレートで指定されている配置制限によって異なります。使用可能なテンプレートを参照してください。

  2. 新しいテンプレートノードの jcr:title を、新しい役割を反映するように変更します。適宜、jcr:description も更新できます。ページで使用可能なテンプレートは、適宜変更してください。

    注意:

    Web サイトコンソールから「Web サイト」のすぐ下にページを作成するときにページを作成ダイアログにテンプレートを表示する場合は、テンプレートノードの allowedPaths プロパティを /content(/.*)? に設定します。

    chlimage_1
  3. テンプレートの基礎となっているコンポーネント(テンプレート内の jcr:content ノードの sling:resourceType プロパティを参照)をコピーして、新しいインスタンスを作成します。

    コンポーネントは、通常、/apps/<website-name>/components/<component-name> に格納されています。

  4. 新しいコンポーネントの jcr:titlejcr:description を更新します。

  5. テンプレート選択リストに新しいサムネール画像を表示する場合は、thumbnail.png を置き換えます(サイズは 128 x 98 px)。

  6. テンプレートの jcr:content ノードの sling:resourceType を、新しいコンポーネントを参照するように更新します。

  7. テンプレートとその基になるコンポーネントのいずれかまたは両方に関して、機能やデザインをさらに変更します。

    注意:

    /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 名前空間を含める必要があります。

詳しくは、クライアント側ライブラリの使用を参照してください。

注意:

エディタークライアントライブラリは、コンテンツページに cq.shared 名前空間が存在することを前提としています。名前空間が存在しない場合は、JavaScript エラー「Uncaught TypeError: Cannot read property 'shared' of undefined」が発生します。

すべてのサンプルコンテンツページには cq.shared が含まれているので、それらをベースとするコンテンツには自動的に cq.shared が含められます。ただし、サンプルコンテンツをベースとせず、ゼロから独自のコンテンツページを作成する場合は、cq.shared 名前空間を含める必要があります。

詳しくは、クライアント側ライブラリの使用を参照してください。

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

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

  1. CRXDE Lite で、ページに使用するテンプレート(Newsletter テンプレートなど)に移動します。

  2. allowedPaths プロパティなど、使用可能なテンプレートで利用されるプロパティを変更します。例えば、allowedPaths/content/geometrixx-outdoors/[^/]+(/.*)? は、このテンプレートが /content/geometrixx-outdoors 以下の任意のパスで許可されることを意味します。

    chlimage_1

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー