コミュニティコンポーネントガイド

コミュニティコンポーネントガイドは、ソーシャルコンポーネントフレームワーク(SCF)のインタラクティブ開発ツールです。これは、使用可能なAEM Communitiesコンポーネントのリストや、複数のコンポーネントで構築されたより複雑な機能を提供します。

このガイドを利用すると、各コンポーネントに関する基本情報を確認するとともに、SCF コンポーネント/機能の動作やその構成/カスタマイズ方法を試してみることができます。

各コンポーネントに関連する開発の基本事項については、コンポーネントと機能の基本事項を参照してください。

はじめに

このガイドは、オーサーインスタンス(localhost:4502)とパブリッシュインスタンス(localhost:4503)の開発用インストール環境での使用を意図しています。

コミュニティコンポーネントサイトには以下からアクセスします。

コミュニティコンポーネントとのインタラクションは次の状況によって変わります。

  • サーバー(作成者または発行)
  • サイト訪問者がサインインしているかどうか
  • サインインした場合、メンバーに割り当てられる権限
  • デフォルトのSRP JSRPが使用中かどうか

作成者が編集モードに入るには、editor.htmlまたはcf#を最初のパスセグメントとしてサーバー名の後に挿入します。

メモ

オーサーインスタンスの編集モードでは、ページ上のリンクはアクティブではありません。

コンポーネントページに移動するには、最初にプレビューモードを選択してリンクをアクティブにします。

コンポーネントページをブラウザーに表示した状態で、編集モードに戻し、コンポーネントの編集ダイアログを開きます。

一般的なオーサリング情報については、オーサリングページのクイックガイドを表示してください。

AEM に精通していない場合は、基本操作に関するドキュメントを参照してください。

ホームページ

このガイドでは、プレビューおよびプロトタイピングに対応した SCF コンポーネントのリストがページの左側に沿って表示されます。

オーサーインスタンスでコンポーネントガイドを編集モードで表示した場合:

chlimage_1-404

コンポーネントページ

ページの左側のリストからコンポーネントを選択します。

chlimage_1-405

ガイドの本文には次の情報が表示されます。

  1. タイトル:選択したコンポーネントの名前

  2. クライアント側ライブラリ:1つ以上の必須カテゴリのリスト

  3. 含める:コンポーネントを動的に含めることができる場合は、作成者編集モードで状態を切り替えることができます。

    • 追加した場合、表示されるテキストは次のとおりです。「このコンポーネントは、その各ノードを介して含まれます。」
    • 含める場合、表示されるテキストは次のとおりです。「このコンポーネントは動的に含まれます。」
    • 含めることができない場合、テキストは表示されません
  4. サンプルコンポーネントまたは機能:コンポーネントまたは機能のアクティブインスタンスです。コンポーネントの場合は、タブセクションに表示されるテンプレート、CSS、データに対する変更を行って変更できます。

メモ

ブラウザーウィンドウが狭すぎる場合、左側のコンポーネントリストで選択したコンポーネントは、リストの横ではなく下に表示されます。

オーサーインタラクション

オーサーインスタンスでガイドを使用する場合、コンポーネントの設定時にダイアログが開くことがあります。開発者向けの情報は、ドキュメントのコンポーネントと機能の初期設定セクションに記載されています。ダイアログの設定については、作成者向けのコミュニティのコンポーネントセクションに記載されています。

コミュニティコンポーネントガイドでは、一部のコンポーネントダイアログ設定がインクルード可能切り替え状態でオーバーレイされています。既存のリソースと動的に含まれるリソースの使用を切り替えるには、編集モードで、コンポーネントと含めるテキストの両方を選択し、重複を押しながらクリックして編集ダイアログを開きます。

chlimage_1-406

テンプレート」タブで、次の操作をおこないます。

chlimage_1-407

  • sling:include を使用して子コンポーネントを組み込む

    チェックが解除されている場合、コンポーネントガイドはリポジトリ内の既存のリソース(各ノードの子であるjcrノード)を使用します。

    • 表示されるテキスト:「このコンポーネントは、その各ノードを介して含まれます。」

    チェックボックスをオンにした場合、sling を使用して、子ノードの resourceType のコンポーネント(存在しないリソース)が動的にインクルードされます。

    • 表示されるテキスト:「このコンポーネントは動的に含まれます。」

    初期設定はオフです。

パブリッシュインタラクション

パブリッシュインスタンスでガイドを使用する場合、コンポーネントと機能をサイト訪問者(サインインしていない場合)またはさまざまな権限を持つメンバー(サインインしている場合)として操作することになります。

メモ

SRPがデフォルトでJSRPに設定されたままの場合、発行インスタンスに入力されたUGCは発行時にのみ表示され、*作成者インスタンスのモデレートコンソールからは表示されません。

クライアントサイドライブラリ

コンポーネントごとに一覧表示されるクライアント側ライブラリ(clientlib)は、該当するコンポーネントをページに配置するときに参照する必要がある​**​ライブラリです。clientlibは、ブラウザーでコンポーネントをレンダリングする際に使用するJavaScriptとCSSのダウンロードを管理および最適化する手段を提供します。

詳しくは、コミュニティコンポーネントの clientlib を参照してください。

偽装

管理者または開発者としてサインインすることが多いオーサーインスタンスで、別のユーザーとしてログインしてコンポーネントを操作するには、「偽装」ボタンの左側にあるテキストボックスにユーザー名を入力するか、プルダウンリストから選択してボタンをクリックします。「Revert」をクリックして、他のユーザーとしてサインアウトし、終了します。

パブリッシュインスタンスではこのような偽装操作は不要です。「ログイン/ログアウト」リンクを使用して、デモユーザーなど、様々なユーザーとして動作します。

カスタマイズ

有効にすると、各SCFコンポーネントは、コンポーネントのテンプレート、CSSおよびデータを一時的に変更することで、可能なカスタマイズのプロトタイプ化に使用できます。

カスタマイズの有効化

メモ

このツールは読み取り専用です。テンプレート、CSSまたはデータに対して行った編集はリポジトリに保存されません。

カスタマイズをすばやく試すには、scg:showIdeプロパティをコンポーネントページのコンテンツJCRノードに追加し、trueに設定する必要があります。

オーサーインスタンスまたはパブリッシュインスタンスのいずれかに管理者権限でサインインし、例としてコメントコンポーネントを使用します。

  1. CRXDE Liteを参照

    例:http://localhost:4503/crx/de

  2. コンポーネントのjcr:contentノードを選択

    例:/content/community-components/en/comments/jcr:content

  3. プロパティの追加

    • 名前 scg:showIde
    • String
    • true
  4. すべて保存」を選択します。

  5. ガイドのコメントページをリロードします。

    http://localhost:4503/content/community-components/en/comments.html

  6. テンプレート、CSS、データの3つのタブが追加されました。

chlimage_1-408 chlimage_1-409

「テンプレート」タブ

「テンプレート」タブを選択すると、コンポーネントに関連付けられているテンプレートが表示されます。

テンプレートエディターを使用すると、リポジトリ内のコンポーネントに影響を及ぼすことなく、ローカル編集をコンパイルし、ページ上のサンプルコンポーネントインスタンスに適用することができます。

ローカル編集のコンパイル時にエラーが発生した場合は、ガッター部分にドットを配置し、テキストの色を赤にすることによってエラーが強調表示されます。

「CSS」タブ

「CSS」タブを選択すると、コンポーネントに関連付けられている CSS が表示されます。

コンポーネントが他の複数のコンポーネントから構成される場合、一部の CSS はそれらのコンポーネントのいずれか 1 つの下に一覧表示されることがあります。

CSS エディターを使用すると、CSS を変更し、ページ上のサンプルコンポーネントインスタンスに適用することができます。

ガッター部分でルールの横をクリックしてルールを選択すると、そのルールを使用する DOM の各部が強調表示されます。

「データ」タブ

「データ」タブを選択すると、.social.json エンドポイントデータが表示されます。このデータは編集可能であり、サンプルコンポーネントインスタンスに適用されます。

構文エラーはガッター部分にマークされ、エディターでも強調表示されます。

このページ

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