コミュニティコンポーネントの clientlib

概要

ドキュメントのこの節では、コミュニティコンポーネント用のクライアント側ライブラリ(clientlib)をページに追加する方法について説明します。

基本情報については、以下を参照してください。

clientlib が必要になる理由

コンポーネントを正しく機能させ(JavaScript)、スタイル設定する(CSS)には、clientlib が必要です。

機能にコミュニティ関数が存在する場合は、必要なclientlibを含む必要なコンポーネントや設定がすべてコミュニティサイトに表示されます。 作成者が追加のコンポーネントを使用できる場合にのみ、追加のclientlibを追加する必要があります。

必須の clientlib が欠落していると、ページにコミュニティコンポーネントを追加したときに、JavaScript エラーが発生したり、予期しない外観が生じたりする可能性があります。

例:clientlib が欠落している場合のレビューの配置

chlimage_1-244

例:clientlib が存在する場合のレビューの配置

chlimage_1-245

必須の clientlib の識別

開発者向けの基本機能情報の中で、必須の clientlib が識別されています。

また、AEM インスタンスからコミュニティコンポーネントガイドを参照すると、コンポーネントに必須の clientlib カテゴリのリストにアクセスできます。

例えば、レビューページの最上部に、必要なclientlibが表示されます。

  • cq.ckeditor
  • cq.social.hbs.reviews

chlimage_1-246

必須の clientlib の追加

コミュニティコンポーネントをページに追加する場合、コンポーネントに必須の clientlib がまだ存在しなければ、追加する必要があります。

CRXDE|Lite を使用すると、コミュニティサイトページの既存の clientlibslist を変更できます。

CRXDE Liteを使用してコミュニティサイトのclientlibを追加するには:

  • https://<server>:<port>/crx/deを参照します。

  • コンポーネントを追加するページのclientlibslistノードを見つけます

    • /content/sites/sample/en/page/jcr:content/clientlibslist
  • clientlibslistノードを選択した状態

    • 文字列[]プロパティscg:requiredClientLibsを探します

    • Valueを選択して[文字列配列]ダイアログにアクセスします

      • 必要に応じて下にスクロールします

      • +を選択して新しいクライアントライブラリを入力します

        • 繰り返してクライアントライブラリを追加
      • OK」を選択します。

    • すべて保存」を選択します。

メモ

コミュニティサイト以外のサイトでは、使用されているクライアントライブラリの有無や場所を調べる必要があります。

ここでは、AEM Communities 使用の手引きの例(site-nameengage)を引用し、レビューコンポーネントを追加する場合に clientliblist がどのように表示されるかを示しています。

chlimage_1-247

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now