ページコンポーネント （v2）

ページコンポーネントは、テンプレートエディターと連動するように設計された拡張可能なページコンポーネントです。このコンポーネントを使用すれば、テンプレートエディターでページのヘッダー／フッターおよび構造要素を組み立てることができます。

使用方法

ページコンポーネントは、コアコンポーネントと編集可能なテンプレートを使用して設計されるあらゆるページの基礎となるものです。ページコンポーネントを使用すれば、ページのヘッダー、フッター、構造を、他のコアコンポーネントを使用する際のテンプレートとして定義できます。

デザインダイアログを使用すれば、カスタムのクライアント側ライブラリをページ用に定義できます。コンポーネントから編集ダイアログに直接アクセスできる他のコンポーネントとは異なり、ページコンポーネントはページそのものなので、ページコンポーネントの編集ダイアログはページプロパティウィンドウになります。

バージョンと互換性

このドキュメントでは、2018年1月にコアコンポーネントのリリース 2.0.0 で導入されたページコンポーネント v2 について説明します。

プログレッシブ ｗeb アプリのサポート

コアコンポーネントのリリース 2.15.0 では、AEM as a Cloud Service の組み込みプログレッシブ Web アプリ（PWA）機能をサポートするようになりました。サイトレベルでの簡単な設定で、AEM エクスペリエンスを PWA に変えることができます。

技術的詳細

ページコンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。

コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。

編集ダイアログ

ページコンポーネントはページ全体を表しているので、通常は編集ダイアログで設定する内容が、ページのプロパティウィンドウにあります。

デザインダイアログ

ページコンポーネントはページ全体を表しているので、ページテンプレートを編集する際は、ページ情報／ページポリシー​でデザインダイアログにアクセスします。

「プロパティ」タブ

ページデザインウィンドウを使用すれば、読み込むクライアントライブラリとページの Web リソースライブラリを定義できます。

• クライアントライブラリ - 読み込むクライアントライブラリカテゴリを定義します。JavaScript が本文の末尾に追加され、CSS がページの先頭に追加されます。

• クライアントライブラリ JavaScript ページ先頭 - ページの先頭に読み込む JavaScript クライアントライブラリカテゴリを定義します。

  • ここで定義したカテゴリが「クライアントライブラリ」フィールドにも存在する場合は、JavaScript が本文の末尾ではなくページの先頭に読み込まれます。
  • カテゴリが「クライアントライブラリ」フィールドにも存在する場合を除き、CSS は読み込まれません。

• Web リソースクライアントライブラリ - favicon などの Web リソースを提供するために使用されるクライアントライブラリカテゴリです。

• メインコンテンツ要素セレクターにスキップ - ページのメインコンテンツに直接スキップするアクセシビリティ機能として使用されます。

「クライアントライブラリ」と「クライアントライブラリ JavaScript ページ先頭」の両方のフィールドにライブラリを次のように設定できます。

• 新しいフィールドを追加するには、フィールドの下にある「追加」ボタンをクリックまたはタップします。
• フィールドを削除するには、削除するフィードの横にあるごみ箱アイコンをクリックまたはタップします。
• 読み込み順序を変更するには、移動するフィールドの横にあるハンドルをクリックまたはタップしてドラッグします。

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

「スタイル」タブ

ページコンポーネントでは、AEM スタイルシステムをサポートしています。

Adobe Client Data Layer

ページコンポーネントは、Adobe Client Data Layer をサポートしています。