現在表示中:

編集可能テンプレートが導入された目的は次のとおりです。

  • 専門的な作成者がテンプレートを作成および編集できるようにすること。
    • このような専門的な作成者は、テンプレート作成者と呼ばれます。
    • テンプレート作成者は、template-authors グループのメンバーである必要があります。
  • テンプレートとそこから作成されたすべてのページとの間に動的接続が維持されるようにすること。これにより、テンプレートに加えた変更が各ページに反映されるようになります。
  • ページコンポーネントの汎用性を高め、核となるページコンポーネントをカスタマイズなしで使用できるようにすること。

編集可能テンプレートを使用すると、ページの構成要素がコンポーネント内で分離されます。UI で必要なコンポーネントの組み合わせを設定できるので、ページのバリエーションごとに新しいページコンポーネントを開発する必要はなくなります。

注意:

静的テンプレートも使用できます。

このドキュメントでは、以下について説明します。

  • 編集可能テンプレートの作成の概要
  • 編集可能テンプレートの作成に必要な管理者/開発者のタスク
  • 編集可能テンプレートの技術基盤

このドキュメントでは、テンプレートの作成と編集について既に理解していることを前提としています。オーサリングに関するドキュメントページテンプレートの作成を参照してください。ここでは、テンプレート作成者に公開されている編集可能テンプレートの機能について詳しく説明されています。

注意:

新しいプロジェクトで編集可能なページテンプレートを設定する際は、次のチュートリアルも参考になる場合があります。
AEM Sites 使用の手引きパート 2 - 基本ページとテンプレートの作成

新しいテンプレートの作成

編集可能テンプレートの作成は、主にテンプレート作成者が、テンプレートコンソールおよびテンプレートエディターを使用しておこないます。ここでは、そのプロセスの概要を示し、技術的なレベルでどのような処理がおこなわれるかを説明します。

AEM プロジェクトで編集可能テンプレートを使用する方法について詳しくは、Lazybones を使用した AEM プロジェクトの作成を参照してください。

新しい編集可能テンプレートを作成する場合は、次の手順を実行します。

  1. テンプレート用のフォルダーを作成します。これは必須ではありませんが、推奨されるベストプラクティスです。

  2. テンプレートタイプを選択します。テンプレート定義を作成するために、このタイプがコピーされます。

    注意:

    様々なテンプレートタイプが標準で提供されています。必要に応じて、独自のサイト固有のテンプレートタイプを作成することもできます。

  3. 新しいテンプレートの構造、コンテンツポリシー、初期コンテンツおよびレイアウトを設定します。

    構造

    • 構造では、テンプレートのコンポーネントとコンテンツを定義できます。
    • テンプレート構造で定義されたコンポーネントは、作成されるページで移動することも、作成されるすべてのページから削除することもできません。
      • We.Retail サンプルコンテンツ外のカスタムフォルダーにテンプレートを作成する場合は、基盤コンポーネントを選択するか、コアコンポーネントを使用することができます。
    • ページ作成者がコンポーネントを追加または削除するには、テンプレートに段落システムを追加する必要があります。
    • コンポーネントのロックを解除し、再度ロックすることで、初期コンテンツを定義できます。

    テンプレート作成者が構造を定義する方法について詳しくは、ページテンプレートの作成を参照してください。

    構造の技術的な詳細については、このドキュメントの構造を参照してください。

    ポリシー

    • コンテンツポリシーでは、コンポーネントのデザインプロパティを定義します。
      • 例えば、使用できるコンポーネントや最小/最大サイズを定義できます。
    • これらのポリシーは、テンプレートと、そのテンプレートを使用して作成されるページに適用されます。

    テンプレート作成者がポリシーを定義する方法について詳しくは、ページテンプレートの作成を参照してください。

    ポリシーの技術的な詳細については、このドキュメントのコンテンツポリシーを参照してください。

    初期コンテンツ

    • 初期コンテンツでは、テンプレートに基づいてページが最初に作成されたときに表示されるコンテンツを定義します。
    • その後、ページ作成者が初期コンテンツを編集できます。

    テンプレート作成者が構造を定義する方法について詳しくは、ページテンプレートの作成を参照してください。

    初期コンテンツの技術的な詳細については、このドキュメントの初期コンテンツを参照してください。

    レイアウト

    • デバイスの形式に合わせてテンプレートのレイアウトを定義できます。
    • テンプレートがページオーサリングと同じように動作するには、レスポンシブレイアウトを使用します。

    テンプレート作成者がテンプレートレイアウトを定義する方法について詳しくは、ページテンプレートの作成を参照してください。

    テンプレートレイアウトの技術的な詳細については、このドキュメントのレイアウトを参照してください。

  4. テンプレートを有効化し、特定のコンテンツツリーに対して許可します。

    • テンプレートを有効にするか無効して、ページ作成者による使用可否を決めることができます。
    • テンプレートは、特定のページブランチに対して使用可能または使用不可にすることができます。

    テンプレート作成者がテンプレートを有効にする方法について詳しくは、ページテンプレートの作成を参照してください。

    テンプレートの有効化の技術的な詳細については、このドキュメントの使用するテンプレートの有効化と許可を参照してください。

  5. テンプレートを使用してコンテンツページを作成します。

    • テンプレートを使用して新しいページを作成した場合、静的テンプレートと編集可能テンプレートの見た目に違いはなく、どちらが使用されたかはわかりません。
    • ページの作成者にとって、この処理は透過的です。

    ページ作成者がテンプレートを使用してページを作成する方法について詳しくは、ページの作成と整理を参照してください。

    編集可能テンプレートを使用したページ作成の技術的な詳細については、このドキュメントの作成されるコンテンツページを参照してください。

注意:

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

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

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

警告:

国際化する必要がある情報は、テンプレートに含めないでください。

テンプレートフォルダー

以下のフォルダーを使用してテンプレートを整理できます。

  • global
  • サイト固有
    テンプレートを整理するためのサイト固有のフォルダーは、管理者権限を保持しているアカウントによって作成されます。

注意:

フォルダーはネストできますが、テンプレートコンソールで表示すると、フラット構造として表されます。

標準の AEM インスタンスでは、テンプレートコンソールに既にグローバルフォルダーが存在します。この中にデフォルトのテンプレートが格納されており、現在のフォルダーにポリシーやテンプレートタイプがない場合にはフォールバックとして機能します。このフォルダーにデフォルトのテンプレートを追加することも、新しいフォルダーを作成すること(推奨)もできます。

注意:

カスタマイズしたテンプレートを格納する新しいフォルダーを作成し、グローバルフォルダーは使用しないことをお勧めします。

警告:

フォルダーは、管理者権限を持つユーザーが作成する必要があります。

テンプレートのタイプやポリシーは、次の優先順位に従ってすべてのフォルダーに継承されます。

  1. 現在のフォルダー。
  2. 現在のフォルダーの親。
  3. /conf/global
  4. /apps
  5. /libs

許可されたすべてのエントリのリストが表示されます。オーバーラップする設定がある場合(パスラベル)、現在のフォルダーに最も近いインスタンスのみがユーザーに表示されます。

新しいフォルダーを作成するには、次のいずれかの方法を使用できます。

  • プログラムで自動的に、または CRXDE Lite を使用して作成する
  • 設定ブラウザーの使用

CRXDE Lite の使用

  1. インスタンスの新しいフォルダー(/conf の下)は、プログラムで自動的にまたは CRXDE Lite を使用して作成できます。

    次の構造を使用する必要があります。

    /conf
        <your-folder-name> [sling:Folder]
            settings [sling:Folder]
                wcm [cq:Page]
                    templates [cq:Page]
                    policies [cq:Page]
  2. その後、フォルダーのルートノードに次のプロパティを定義できます。

        <お使いのフォルダー名> [sling:Folder]

    名前:jcr:title

    • タイプ:String
    • 値:テンプレートコンソールに表示される(フォルダーの)タイトル
  3. 作成者が新しいフォルダーにテンプレートを作成できるようにするには、標準のオーサリング権限(例:content-authors)に加え、グループを割り当てて必要なアクセス権限(ACL)を定義する必要があります。

    割り当てる必要があるデフォルトのグループは、template-authors グループです。詳しくは、次の節ACL とグループを参照してください。

    アクセス権限の管理および割り当てについて詳しくは、アクセス権限の管理を参照してください。

設定ブラウザーの使用

  1. グローバルナビゲーションツール設定ブラウザーに移動します。

    グローバルフォルダーなどの既存のフォルダーは左側に一覧表示されます。

     

  2. 作成」をクリックします。

  3. 設定を作成ダイアログで、以下のフィールドを設定する必要があります。

    • タイトル:設定フォルダーのタイトルを指定します。
    • 編集可能なテンプレート:このフォルダー内で編集可能テンプレートを許可する場合にチェックします。
  4. 作成」をクリックします。

注意:

グローバルフォルダーにテンプレートを作成する場合は、設定ブラウザーでグローバルフォルダーを編集し、「編集可能なテンプレート」オプションをオンにします。ただし、これは推奨されるベストプラクティスではありません。

ACL とグループ

(CRXDE または設定ブラウザーを使用して)テンプレートフォルダーが作成されたら、セキュリティを確保するために、テンプレートフォルダーの適切なグループに ACL を定義する必要があります。

例として、We.Retail 参照実装のテンプレートフォルダーを使用できます。

template-authors グループ

template-authors グループは、テンプレートへのアクセスを管理するために使用されるグループで、AEM に標準で付属していますが空です。ユーザーは、プロジェクト/サイトのグループに追加する必要があります。

警告:

template-authors グループは、新しいテンプレートを作成する必要があるユーザー専用です。

テンプレートの編集は非常に強力なので、正しくおこなわないと既存のテンプレートが壊れる場合があります。そのため、この役割には注意深く、ふさわしいユーザーだけを含めてください。

次の表に、テンプレートの編集に必要な権限の詳細を示します。

パス 役割/グループ 権限
説明
/conf/<your-folder>/settings/wcm/templates テンプレート作成者
読み取り、書き込み、複製 テンプレート作成者は、サイト固有の/conf 空間でテンプレートの作成、読み取り、更新、削除および複製をおこないます。
匿名 Web ユーザー 読み取り 匿名 Web ユーザーは、ページのレンダリング時にテンプレートを読み取る必要があります。
コンテンツ作成者 複製 コンテンツ作成者は、ページのアクティベート時にページのテンプレートをアクティベートする必要があります。
/conf/<your-folder>/settings/wcm/policies テンプレート作成者 読み取り、書き込み、複製 テンプレート作成者は、サイト固有の /conf 空間でテンプレートの作成、読み取り、更新、削除および複製をおこないます。
匿名 Web ユーザー 読み取り 匿名 Web ユーザーは、ページのレンダリング時にポリシーを読み取る必要があります。
コンテンツ作成者 複製 コンテンツ作成者は、ページのアクティベート時にページのテンプレートのポリシーをアクティベートする必要があります。
/conf/<site>/settings/template-types テンプレート作成者 読み取り テンプレート作成者は、事前定義済みのテンプレートタイプのいずれかに基づいて新しいテンプレートを作成します。
匿名 Web ユーザー なし 匿名 Web ユーザーは、テンプレートタイプにアクセスできません。

デフォルトの template-authors グループは、プロジェクト設定のみに対応しています。この場合、template-authors のすべてのメンバーは、すべてのテンプレートへのアクセスとそれらの作成が許可されています。より複雑な設定では、テンプレートに個別にアクセスするためにテンプレート作成者グループが複数必要になるので、さらに多くのカスタムテンプレート作成者グループを作成する必要があります。ただし、テンプレート作成者グループの権限は変わりません。

/conf/global の下の従来のテンプレート

テンプレートは /conf/global に格納されなくなりましたが、従来のインストールでは、まだこの場所にテンプレートが存在する場合があります。このような従来の場合のみ、次の /conf/global パスを明示的に設定する必要があります。

パス 役割/グループ 権限
説明
/conf/global/settings/wcm/templates テンプレート作成者 読み取り、書き込み、複製 テンプレート作成者は、/conf/global 内でテンプレートの作成、読み取り、更新、削除および複製をおこないます。
匿名 Web ユーザー 読み取り 匿名 Web ユーザーは、ページのレンダリング時にテンプレートを読み取る必要があります。
コンテンツ作成者 複製 コンテンツ作成者は、ページのアクティベート時にページのテンプレートをアクティベートする必要があります。
/conf/global/settings/wcm/policies テンプレート作成者 読み取り、書き込み、複製 テンプレート作成者は /conf/global 内でテンプレートの作成、読み取り、更新、削除および複製をおこないます。
匿名 Web ユーザー 読み取り 匿名 Web ユーザーは、ページのレンダリング時にポリシーを読み取る必要があります。
コンテンツ作成者 複製 コンテンツ作成者は、ページのアクティベート時にページのテンプレートのポリシーをアクティベートする必要があります。
/conf/global/settings/wcm/template-types テンプレート作成者 読み取り テンプレート作成者は、事前定義済みのテンプレートタイプのいずれかに基づいて新しいテンプレートを作成します。
匿名 Web ユーザー なし 匿名 Web ユーザーは、テンプレートタイプにアクセスできません。

テンプレートタイプ

新しいテンプレートの作成時には、テンプレートタイプを指定する必要があります。

  • テンプレートタイプは、テンプレートのためのテンプレートとなるものです。テンプレート作成時に選択したテンプレートタイプの構造と初期コンテンツに基づいて、新しいテンプレートが作成されます。
    • テンプレートはテンプレートタイプをコピーして作成されます。
    • コピー後のテンプレートとテンプレートタイプとの関連付けは、情報を取得するだけの静的参照のみとなります。
  • テンプレートタイプでは、以下の項目を定義できます。
    • ページコンポーネントのリソースタイプ。
    • ルートノードのポリシー。テンプレートエディターで許可されるコンポーネントを定義します。
    • そのテンプレートタイプで、モバイルエミュレーターのレスポンシブグリッドと設定のブレークポイントを定義することをお勧めします。設定は個々のテンプレートで定義することもできるので(テンプレートタイプとモバイルデバイスグループを参照)、これはオプションです。
  • AEM には、既製のテンプレートタイプがいくつか用意されています(HTML5 ページ、アダプティブフォームページなど)。
    • その他の例は、We.Retail サンプルコンテンツの一部として提供されています。
  • テンプレートタイプは通常、開発者が定義します。

既製のテンプレートタイプは次のフォルダーに保存されています。

  • /libs/settings/wcm/template-types

警告:

/libs パスでは何も変更しないでください。 /libs のコンテンツは、インスタンスを次回アップグレードするとき(場合によってはホットフィックスまたは機能パックを適用したとき)に上書きされるからです。

サイト固有のテンプレートタイプは、以下に相当する場所に保存してください。

  • /apps/settings/wcm/template-types

カスタマイズしたテンプレートタイプの定義は、ユーザー定義フォルダー(推奨)またはグローバルフォルダーに保存してください。次に例を示します。

  • /conf/<my-folder-01>/<my-folder-02>/settings/wcm/template-types
  • /conf/<my-folder>/settings/wcm/template-types
  • /conf/global/settings/wcm/template-types

警告:

テンプレートタイプは、正しいフォルダー構造(/settings/wcm/...)を遵守する必要があります。そうしないと、テンプレートタイプが見つからなくなります。

テンプレートタイプとモバイルデバイスグループ

編集可能テンプレートで使用されるデバイスグループ(プロパティ cq:deviceGroups の相対パスとして設定)によって、ページオーサリングのレイアウトモードのエミュレーターとして利用できるモバイルデバイスが決まります。この値は次の 2 つの場所で設定できます。

  • 編集可能テンプレートのタイプ
  • 編集可能テンプレート

新しい編集可能テンプレートを作成すると、この値がテンプレートタイプから個々のテンプレートにコピーされます。値がタイプで設定されていない場合は、テンプレートで設定できます。テンプレートの作成後に、タイプからテンプレートに継承されることはありません。

警告:

cq:deviceGroups の値は、/etc/mobile/groups/responsive などの絶対パスではなく、mobile/groups/responsive などの相対パスとして設定する必要があります。

注意:

静的テンプレートでは、cq:deviceGroups の値はサイトのルートに設定できます。

編集可能テンプレートでは、この値はテンプレートレベルで保管されるようになっており、ページのルートレベルではサポートされません。

テンプレートタイプの作成

他のテンプレートの基盤となるテンプレートを作成した場合、このテンプレートをテンプレートタイプとしてコピーできます。

  1. こちらのドキュメントで説明されているように編集可能テンプレートと同じようにテンプレートを作成します。これは、テンプレートタイプの基盤となります。

  2. CRXDE Lite を使用している場合は、新しく作成したテンプレートを templates ノードからテンプレートフォルダーの下の template-types ノードにコピーします。

  3. このテンプレートをテンプレートフォルダーの下の templates ノードから削除します。

  4. template-types ノードの下にあるテンプレートのコピーで、cq:template および cq:templateType jcr:content プロパティをすべて削除します。

また、GitHub で入手できる、編集可能テンプレートのサンプルを基盤として使用し、独自のテンプレートタイプを作成することもできます。

GitHub のコード

このページのコードは GitHub にあります

テンプレート定義

編集可能テンプレートの定義は、ユーザー定義フォルダー(推奨)またはグローバルフォルダーに格納されます。 次に例を示します。

  • /conf/<my-folder>/settings/wcm/templates
  • /conf/<my-folder-01>/<my-folder-02>/settings/wcm/templates
  • /conf/global/settings/wcm/templates

テンプレートのルートノードは、以下のスケルトン構造を持つ cq:Template タイプです。

<template-name>
  initial
    jcr:content
      root
        <component>
        ...
        <component>
  jcr:content
    @property status
  policies
    jcr:content
      root
        @property cq:policy
        <component>
          @property cq:policy
        ...
        <component>
          @property cq:policy
  structure
    jcr:content
      root
        <component>
        ...
        <component>
      cq:responsive
        breakpoints
  thumbnail.png

主な要素は以下のとおりです。

jcr:content

このノードは、テンプレートのプロパティを保持します。

  • 名前jcr:title
  • 名前status
    • 種類string
    • draftenabled または disabled

構造

作成されるページの構造を定義します。

  • 新しいページの作成時に初期コンテンツ(/initial)と統合されます。
  • 構造に加えた変更は、そのテンプレートを使用して作成されたすべてのページに反映されます。
  • rootstructure/jcr:content/root)ノードは、作成されたページで使用できるコンポーネントのリストを定義します。
    • テンプレート構造で定義されたコンポーネントは、作成されたページで移動することも、作成されたページから削除することもできません。
    • コンポーネントをロック解除すると、editable プロパティが true に設定されます。
    • 既にコンテンツを含むコンポーネントをロック解除すると、このコンテンツは initial ブランチに移動されます。
  • cq:responsive ノードは、レスポンシブレイアウトの定義を保持します。

初期コンテンツ

作成時に新しいページに表示される初期コンテンツを定義します。

  • すべての新しいページにコピーされる jcr:content ノードが含まれます。
  • 新しいページの作成時に構造(/structure)と統合されます。
  • 作成後に初期コンテンツが変更されても、既存のページはすべて更新されません。
  • root ノードは、作成されたページで使用できるコンポーネントを定義する、コンポーネントのリストを保持します。
  • コンテンツが構造モードでコンポーネントに追加され、その後、そのコンポーネントがロック解除された場合(またはコンポーネントのロック解除後にコンテンツが追加された場合)、このコンテンツは初期コンテンツとして使用されます。

レイアウト

テンプレートの編集時にレイアウトを定義できます。レイアウトは標準のレスポンシブレイアウトを使用し、必要に応じて設定することもできます。

コンテンツポリシー

コンテンツ(またはデザイン)ポリシーでは、コンポーネントのデザインプロパティを定義します。例えば、使用できるコンポーネントや最小/最大サイズを定義できます。これらのポリシーは、テンプレートと、そのテンプレートを使用して作成されるページに適用されます。テンプレートエディターでコンテンツポリシーを作成して選択できます。

  • root ノード /conf/<your-folder>/settings/wcm/templates/<your-template>/policies/jcr:content/root cq:policy プロパティ
    ページの段落システムのコンテンツポリシーへの相対参照を提供します。

  • root の下のコンポーネントを明示的に示すノードの cq:policy プロパティは、個々のコンポーネントのポリシーへのリンクを提供します。
  • 実際のポリシー定義は、次の場所に保存されます。
    /conf/<your-folder>/settings/wcm/policies/wcm/foundation/components

注意:

ポリシー定義のパスは、コンポーネントのパスによって異なります。cq:policy は、設定自体への相対参照を保持します。

注意:

編集可能テンプレートから作成されたページの場合は、ページエディターでデザインモードが提供されません。

編集可能テンプレートの policies ツリーは、次の場所にある静的テンプレートのデザインモード設定と同じ階層を持ちます。

    /etc/designs/<my-site>/jcr:content/<component-name>

静的テンプレートのデザインモード設定は、ページコンポーネントごとに定義されたものです。

ページポリシー

ページポリシーを使用して、テンプレートまたは作成されるページで、ページ(メインの parsys)のコンテンツポリシーを定義できます。

使用するテンプレートの有効化と許可

  1. テンプレートの有効化

    テンプレートは、次のどちらかの方法で有効化してからでなければ使用できません。

    • テンプレートコンソールからテンプレートを有効化する。
    • jcr:content ノードの status プロパティを設定する。
      • 例:
        /conf/<your-folder>/settings/wcm/templates/<your-template>/jcr:content
      • プロパティの定義
        • 名前:status
        • タイプ:String
        • 値:enabled
  2. 許可されたテンプレート

    例えば、次の値を使用します。

    /conf/<your-folder>/settings/wcm/templates/.*

作成されるコンテンツページ

編集可能テンプレートから作成されるページには、次の特徴があります。

  • テンプレートの structureinitial を統合したサブツリーを使用して作成されます。
  • テンプレートおよびテンプレートタイプで保持される情報への参照を持ちます。これは、以下のプロパティを持つ jcr:content ノードで実現します。
    • cq:template
      実際のテンプレートへの動的参照を提供します。テンプレートへの変更を実際のページに反映させることができます。
    • cq:templateType
      テンプレートタイプへの参照を提供します。
chlimage_1

上の図は、テンプレート、コンテンツおよびコンポーネントの相関関係を示したものです。

  • コントローラー - /content/<my-site>/<my-page>
    テンプレートを参照して作成されるページです。コンテンツがプロセス全体を制御します。定義に従って、適切なテンプレートとコンポーネントにアクセスします。
  • 設定 - /conf/<my-folder>/settings/wcm/templates/<my-template>
    ページ設定を定義するテンプレートおよび関連するコンテンツポリシーです。
  • モデル - OSGi バンドル
    OSGi バンドルが機能を実装します。
  • 表示 - /apps/<my-site>/components
    オーサー環境とパブリッシュ環境の両方で、コンテンツがコンポーネントによってレンダリングされます。

ページのレンダリング時

  • テンプレート:

    • jcr:content ノードの cq:template プロパティが、そのページに対応するテンプレートにアクセスするために参照されます。
  • コンポーネント:

    • ページコンポーネントは、テンプレートの structure/jcr:content ツリーとページの jcr:content ツリーを統合します。
    • 作成者は、ページコンポーネントを使用して、「編集可能」のフラグが設定されているテンプレート構造のノード(およびいずれかの子)を編集できるだけです。
    • ページ上にコンポーネントをレンダリングする際、そのコンポーネントの相対パスが jcr:content ノードから取得されます。その後、テンプレートの policies/jcr:content ノードの下の同じパスが検索されます。
      • このノードの cq:policy プロパティは、実際のコンテンツポリシーを指します(すなわち、このプロパティは、そのコンポーネントのデザイン設定を保持しています)。
      • このため、同じコンテンツポリシー設定を再利用する複数のテンプレートを持つことができます。

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

法律上の注意   |   プライバシーポリシー