Show Menu
TOPICS×

コアコンポーネントの使用

独自のプロジェクトに コアコンポーネント を導入するには、次の 4 つの手順に従います。以下では、それぞれの手順について詳しく説明します。
また、プロジェクト設定、コアコンポーネント、編集可能テンプレート、クライアントライブラリおよびコンポーネント開発にゼロから取り組む方法についての広範な手順については、複数パートから成る次のチュートリアルを参照してください。 AEM Sites の概要 - WKND チュートリアル

ダウンロードとインストール

コアコンポーネントの背後にある基本的な考え方は柔軟性です。新しいバージョンのコアコンポーネントを頻繁にリリースすることで、アドビは新しい機能をより柔軟に配信できるようになります。一方、開発者は、プロジェクトに統合するコンポーネントとそれらの更新頻度を柔軟に設定できます。
このため、実稼働モード(サンプルコンテンツなし)で開始する場合、コアコンポーネントはクイックスタートには含まれません。Therefore, your first step is to download the latest released content package from GitHub and to install it on your AEM environments.
There are several ways to automate this, but the simplest way to quickly install a content package on an instance is by using the Package Manager; see Install Packages . Also, once you'll have a publish instance running as well, you'll need to replicate that package to the publisher; see Replicating Packages .

プロキシコンポーネントの作成

プロキシコンポーネントパターン で説明している理由により、コアコンポーネントをコンテンツから直接参照することは禁止されています。直接参照を避けるために、すべてのコアコンポーネントは非表示コンポーネントグループ(
.core-wcm
または
.core-wcm-form
)に属しているので、エディターには直接表示されません。
代わりに、サイト固有のコンポーネントを作成する必要があります。そのコンポーネントで、ページ作成者に表示する適切なコンポーネントの名前とグループを定義し、それぞれのスーパータイプとしてコアコンポーネントを参照します。これらのサイト固有のコンポーネントは、「プロキシコンポーネント」と呼ばれることもあります。これらのコンポーネントは、コンテンツが不要で、主に、サイトに使用するコンポーネントのバージョンを定義する役目を果たすからです。ただし、 コアコンポーネント をカスタマイズする場合、これらのプロキシコンポーネントはマークアップとロジックのカスタマイズに不可欠です。
そのため、サイトに使用する必要があるコアコンポーネントごとに、以下が必要になります。
  1. 対応するプロキシコンポーネントをサイトの components フォルダー内に作成します。
    -
    /apps/my-site/components
    内に
    cq:Component
    タイプのタイトルノードを作成します
  2. 対応するコアコンポーネントバージョンをスーパータイプで参照します。
    - 次のプロパティを追加します。
    sling:resourceSuperType="core/wcm/components/title/v1/title"
  3. コンポーネントのグループ、タイトルのほか、オプションで説明を定義します。これらの値はプロジェクト固有で、作成者に対するコンポーネントの表示を指定します。
    - 次のプロパティを追加します。
    componentGroup="My Site" jcr:title="Title" jcr:description="Section Heading"
For instance, look at the title component of the We.Retail reference site , which is a good example of a proxy component that is built that way.

コアスタイルの読み込み

  1. If not done yet, create a Client Library that contains all of the CSS and JS files that are needed for your site.
  2. サイトのクライアントライブラリで、必要なコアコンポーネントへの依存関係を追加します。これをおこなうには、
    embed
    プロパティを追加します。
    例えば、すべての v1 コアコンポーネントのクライアントライブラリを組み込むには、追加するプロパティは次のようになります。
    embed="[ core.wcm.components.image.v1, core.wcm.components.list.v1, core.wcm.components.breadcrumb.v1, core.wcm.components.form.container.v1, core.wcm.components.form.text.v1 ]"
次の手順に進む前に、プロキシコンポーネントとクライアントライブラリが AEM 環境にデプロイされていることを確認してください。

コンポーネントの有効化

テンプレートエディターでは、次の手順 を実行します
  1. テンプレートエディターで、レイアウトコンテナを選択し、そのポリシーを開きます。
  2. 「許可されるコンポーネント」のリストで、作成済みのプロキシコンポーネントを選択します。これは、プロキシコンポーネントに割り当てられているコンポーネントグループの下に表示されます。操作が完了したら、変更を適用します。
  3. オプションとして、デザインダイアログを持つコンポーネントの場合は、事前に設定できます。
これで作業は完了です。編集したテンプレートから作成したページで、新しく作成したコンポーネントを使用できるようになります。
関連項目: