ページテンプレートの作成 creating-page-templates

ページを作成する際には、新しいページを作成するためのベースとして使用されるテンプレートを選択する必要があります。テンプレートは、作成されるページの構造、初期コンテンツ、および使用できるコンポーネントを定義します。

テンプレートエディター ​により、テンプレートを作成して管理することは、開発者のみのタスクではなくなりました。ある種のパワーユーザーも、テンプレート作成者 ​と呼ばれ、関与することができます。環境の設定、クライアントライブラリの作成、使用されるコンポーネントの作成は今でも開発者が行う必要がありますが、これら基本となる部分が一度配置されると、テンプレート作成者 ​が開発プロジェクトなしにテンプレートを作成して構成できるようになります。

テンプレートコンソール ​により、テンプレート作成者は次の操作を実行できます。

テンプレートエディター ​により、テンプレート作成者は次の操作を実行できます。

このドキュメントでは、テンプレート作成者 ​がテンプレートコンソールおよびエディターを使用して、編集可能なテンプレートを作成し管理する方法について説明します。

編集可能なテンプレートが技術レベルで機能する方法について詳しくは、開発者ドキュメントのページテンプレートを参照してください。

始める前に before-you-start

作業を開始する前に、テンプレートの作成では共同作業が必要であることを考慮に入れておくことが重要です。この理由から、ロールがそれぞれのタスクに示されます。これは、実際にテンプレートを使用してページを作成する方法に影響を与えませんが、ページがテンプレートに関係する方法には影響を与えます。

ロール roles

テンプレートコンソール ​および​ テンプレートエディター ​を使用する新しいテンプレートの作成では、次の役割の間の共同作業が必要です。

一部のタスク（フォルダーの作成など）の性質により、開発環境が必要です。これには知識と経験が必要です。

このドキュメントで説明されるタスクは、それらの実行を担当するロールとともにリストされています。

テンプレートの作成と管理 creating-and-managing-templates

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

テンプレートフォルダーの作成 - 管理者 creating-a-template-folder-admin

テンプレートフォルダーは、プロジェクト固有のテンプレートを保持するためプロジェクトで作成する必要があります。これは管理者タスクであり、ドキュメントのページテンプレートで説明しています。

新しいテンプレートの作成 - テンプレート作成者 creating-a-new-template-template-author

テンプレートプロパティの定義 - テンプレート作成者 defining-template-properties-template-author

テンプレートには、次のプロパティを指定できます。

プロパティを表示または編集するには：

テンプレートサムネールの画像 template-thumbnail-image

テンプレートサムネールを定義するには：

テンプレートの有効化と許可 - テンプレート作成者 enabling-and-allowing-a-template-template-author

ページを作成するときにテンプレートを使用するには、以下の作業が必要です。

テンプレートの有効化 - テンプレート作成者 enabling-a-template-template-author

テンプレートを有効または無効にして、ページを作成 ​ウィザードで使用できるようにする、または使用できないようにします。

テンプレートの許可 - 作成者 allowing-a-template-author

テンプレートは、特定のページブランチに対して使用可能または使用不可にすることができます。

テンプレートの公開 - テンプレート作成者 publishing-a-template-template-author

ページがレンダリングされる際にテンプレートが参照されるので、テンプレートをパブリッシュ環境で使用できるようにするには、完全に設定されたテンプレートを公開する必要があります。

テンプレートの編集 - テンプレート作成者 editing-templates-template-authors

テンプレートを作成または編集するときに、様々な項目を定義できます。テンプレートの編集は、ページのオーサリングに似ています。

ツールバーの​ モード ​セレクターを使用すると、テンプレートの適切な要素を選択して編集できます。

ページ情報 ​メニューの「ページポリシー」オプションを使用すると、必要なページポリシーを選択できます。

テンプレート属性 template-attributes

テンプレートの以下の属性を編集できます。

構造 template-structure

ページ作成者は、構造に追加されたコンポーネントを結果ページから移動および削除できません。ページ作成者がコンポーネントを結果ページに移動またはコンポーネントを削除するには、テンプレートに段落システムを追加する必要があります。

コンポーネントがロックされているとコンテンツは追加できますが、ページ作成者はこれを編集できません。コンポーネントのロックを解除して、初期コンテンツを定義できます。

初期コンテンツ template-initial-content

コンポーネントのロックが解除されていると、結果ページにコピーされる、テンプレートから作成された初期コンテンツを定義できます。これらのロックが解除されたコンポーネントは結果ページで編集できます。

レイアウト template-layout

レイアウトでは、必要なデバイスの形式に合わせたテンプレートのレイアウトを事前定義できます。テンプレートオーサリングの​ レイアウト ​モードには、ページオーサリングの​レイアウト ​モードと同じ機能があります。

ページポリシー template-page-policies

ページポリシーは、定義済みのページポリシーをページに接続できます。これらのページポリシーは、様々なデザイン設定を定義します。

スタイル template-styles

スタイルシステムを使用すると、テンプレート作成者がコンポーネントのコンテンツポリシーのスタイルクラスを定義し、コンテンツ作成者がページでのコンポーネントの編集時にそのスタイルクラスを選択できます。これらのスタイルは、1 つのコンポーネントの別の視覚的バリエーションとして使用することができるので、コンポーネントがより柔軟で扱いやすいものになります。

詳しくは、スタイルシステムのドキュメントを参照してください。

テンプレートの編集 - 構造 - テンプレート作成者 editing-a-template-structure-template-author

構造 ​モードで、テンプレートのコンポーネントおよびコンテンツを定義し、テンプレートおよびそのコンポーネントのポリシーを定義できます。

テンプレートエディターの​ 構造 ​モードで実行できる機能や、ユーザーをサポートする機能は多数あります。

コンポーネントの追加 add-components

テンプレートにコンポーネントを追加する方法はいくつか用意されています。

追加すると、各コンポーネントは以下の要素でマーキングされます。

コンポーネントのアクション component-actions

コンポーネントがテンプレートに追加されると、コンポーネントでアクションが実行されます。個々のインスタンスにはそれぞれ、使用可能なアクションにアクセスできるツールバーが用意されています。ツールバーはコンポーネントの種類によって異なります。

また、実行されるアクションに依存します。例えば、コンポーネントのポリシーが関連付けられていると、デザイン設定アイコンが使用できるようになります。

編集と設定 edit-and-configure

これら 2 つのアクションにより、コンポーネントにコンテンツを追加できます。

構造を示す境界線 border-to-indicate-structure

構造 ​モードで、オレンジ色の境界線は現在選択されているコンポーネントを示します。また、点線は親コンポーネントを示します。

ポリシーとプロパティ（一般） policy-and-properties-general

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

コンポーネントのコンテンツポリシーを作成するか、既存のポリシーを選択します。

これにより、デザイン詳細を定義できます。

設定ウィンドウは 2 つに分割されます。

使用できるプロパティは、選択したコンポーネントによって異なります。例えば、テキストコンポーネントのプロパティでは、コピー＆ペーストのオプション、フォーマットのオプション、段落スタイルなどが定義されます。

ポリシー policy

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

ポリシー ​の下で、既存のポリシーを選択して、ドロップダウンからコンポーネントに適用できます。

新しいポリシーは、ポリシーの選択 ​ドロップダウンの横にある追加ボタンを選択して追加できます。「ポリシーのタイトル」フィールドで新しいタイトルを指定します。

ポリシーの選択 ​ドロップダウンで選択された既存のポリシーは、ドロップダウンリストの横にあるコピーボタンを使用して、新規ポリシーにコピーできます。「ポリシーのタイトル」フィールドで新しいタイトルを指定します。デフォルトで、コピーされたポリシーは「X のコピー」というタイトルになります。ここで X はコピーされたポリシーのタイトルです。

ポリシーの説明は、「ポリシーの説明」フィールドにオプションで入力できます。

「他のテンプレートも選択したポリシーを使用しています」セクションでは、「ポリシーの選択」ドロップダウンリストで選択したポリシーを、他のどのテンプレートが使用しているかを簡単に確認できます。

プロパティ properties

プロパティ ​の見出しの下で、コンポーネントの設定を定義できます。見出しには次の 2 つのタブがあります。

メイン main

メイン ​タブでは、コンポーネントの最も重要な設定が定義されます。

例えば、画像コンポーネントでは、許容される幅は、レイジーローディングを有効にするとともに定義できます。

設定で複数の設定が許される場合は、「追加」ボタンを選択して、他の設定を追加します。

設定を削除するには、設定の右にある​ 削除 ​ボタンを選択します。

設定を削除するには、削除 ​ボタンを選択します。

機能 features

「機能」タブを使用すると、コンポーネントの追加の機能を有効または無効にできます。

例えば、画像コンポーネントでは、切り抜き比率、許容される画像の方向、アップロードを許可するかどうかを定義できます。

ポリシーおよびプロパティ（レイアウトコンテナ） policy-and-properties-layout-container

レイアウトコンテナのポリシーおよびプロパティ設定は、一般使用の場合と似ていますが、いくつか違いがあります。

ウィンドウの一般使用の場合と同じく、設定ウィンドウは 2 つに分割されます。

ポリシー policy-layout

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

ポリシー ​の下で、既存のポリシーを選択して、ドロップダウンからコンポーネントに適用できます。これは、ウィンドウの一般使用の場合と同じく機能します。

プロパティ properties-layout

プロパティ ​見出しの下で、レイアウトコンテナのために使用できるコンポーネントを選択して、それらの設定を定義することができます。見出しには次の 3 つのタブがあります。

許可されたコンポーネント allowed-components

許可されたコンポーネント ​タブで、レイアウトコンテナのために使用できるコンポーネントを判断できます。

デフォルトのコンポーネント default-components

「デフォルトのコンポーネント」タブで、メディアタイプに自動的に関連付けられるコンポーネントを定義して、作成者がアセットをアセットブラウザーからドラッグするときに、AEM がそれに関連付けられるコンポーネントを理解できるようにします。ドロップゾーンのあるコンポーネントだけが、こうした設定のために使用できます。

「マッピングを追加」を選択して、完全に新しいコンポーネントおよび MIME タイプマッピングを追加します。

リストの中のコンポーネントを選択し、「タイプの追加」を選択して、既にマッピングされているコンポーネントに追加の MIME タイプを追加します。「削除」アイコンをクリックして、MIME タイプを削除します。

レスポンシブ設定 responsive-settings

レスポンシブ設定 ​タブで、レイアウトコンテナの結果グリッドの列数を設定できます。

コンポーネントのロック解除とロック unlock-and-lock-components

コンポーネントをロックまたはロック解除することで、コンテンツを​ 初期コンテンツ ​モードで変更できるかどうかを定義します。

コンポーネントのロックが解除されているときは、次のようになります。

これには、ロック解除コンテナコンポーネントも含まれるので、初期コンテンツ ​モードまたは結果ページのいずれかに、さらにコンポーネントを追加できます。ロック解除前にコンテナにコンポーネント／コンテンツを既に追加している場合は、これらは今後​ 構造 ​モードでは表示されなくなりますが、初期コンテンツ ​モードでは表示されます。構造モード ​では、コンテナコンポーネント自体だけがその​ 許容コンポーネント ​のリストとともに表示されます。

スペースを節約するため、レイアウトコンテナは、許可されたコンポーネントのリストが収まるように拡大されません。代わりにコンテナがスクロールできるリストになります。

設定できるコンポーネントは、「ポリシー」アイコン付きで表示され、それをタップまたはクリックすると、そのコンポーネントのポリシーおよびプロパティを編集できます。

既存ページとの関係性 relationship-to-existing-pages

構造が、テンプレートに基づいてページを作成した後で更新される場合、これらのページはテンプレートの変更を反映します。ツールバーに警告が表示されて、この事実が確認ダイアログとともに示されます。

テンプレートの編集 - 初期コンテンツ - 作成者 editing-a-template-initial-content-author

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

構造 ​モードで作成されたすべてのコンテンツは​ 初期コンテンツ ​に表示されますが、選択および編集できるのはロックが解除されているコンポーネントのみです。

テンプレートの編集 - レイアウト - テンプレート作成者 editing-a-template-layout-template-author

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

テンプレートの編集 - ページポリシー - テンプレート作成者／開発者 editing-a-template-page-policy-template-author-developer

必要なクライアントサイドライブラリを含むページポリシーは、ページ情報 ​メニューの「ページポリシー」オプションの下に維持されます。

ページデザイン ​ダイアログにアクセスするには

ページポリシー page-policies

テンプレートまたは結果ページのいずれかにコンテンツポリシーを適用できます。これにより、ページ上の主段落システムのコンテンツポリシーが定義されます。

ページプロパティ page-properties

ページのプロパティを使用し、「ページデザイン」ダイアログを使用して、必要なクライアントサイドライブラリを定義できます。これらのクライアントサイドライブラリには、テンプレートおよびそのテンプレートで作成されたページとともにロードされるスタイルシートおよび JavaScript が含まれます。

テンプレートの編集 - 最初のページのプロパティ - 作成者 editing-a-template-initial-page-properties-author

「最初のページのプロパティ」オプションを使用して、結果ページの作成時に使用される最初のページプロパティを定義できます。

ベストプラクティス best-practices

テンプレートを作成するときには、次の点を考慮してください。