ページコンポーネント

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

使用方法

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

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

バージョンと互換性

このドキュメントでは、ページコンポーネントの現在のバージョン（2022年2月にコアコンポーネントのリリース 2.18.0 で導入された v3）について説明します。

コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。

コンポーネントのバージョン AEM 6.4 AEM 6.5 AEM as a Cloud Service
v3 - 互換性あり 互換性あり
v2 互換性あり 互換性あり 互換性あり
v1 互換性あり 互換性あり -

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。

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

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

技術的詳細

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

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

編集ダイアログ

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

デザインダイアログ

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

ページポリシー

メモ

以前のバージョンの AEM では、ページポリシー​は​ページデザイン​と呼ばれていました。

「プロパティ」タブ

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

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

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

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

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

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

  • 代替言語のリンクをレンダリング - 有効にすると、同じサイトにある代替言語バージョンのページへのリンクが、ページの先頭に追加されます。

ページコンポーネントデザインのダイアログ

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

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

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

注意

ページ先頭のクライアントライブラリを個別に定義する機能は、コアコンポーネントリリース 2.2.0 で導入されました。

「スタイル」タブ

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

Adobe Client Data Layer

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

このページ