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

コミュニティコンポーネントガイドは、 ソーシャルコンポーネントフレームワーク (SCF). 使用可能なAdobe Experience Manager(AEM)Communities コンポーネントや、複数のコンポーネントで構築されたより複雑な機能のリストが表示されます。

このガイドでは、各コンポーネントの基本情報に加えて、SCF のコンポーネント/機能の動作と、それらの設定またはカスタマイズ方法を実験できます。

各コンポーネントに関連する開発の基本事項について詳しくは、 機能とコンポーネントの基本事項.

はじめに

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

コミュニティコンポーネントサイトには、

• https://<server>:<port>/content/community-components/en.html

コミュニティコンポーネントとのインタラクションは、次の条件によって異なります。

• サーバー（オーサーまたはパブリッシュ）。
• サイト訪問者がサインインしているかどうか。
• サインインしている場合は、メンバーに割り当てられた権限。
• デフォルトの SRP が JSRP、使用中です。

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

• 標準 UI:

  https://<server>:<port>/editor.html/content/community-components/en.html

• クラシック UI：

  https://<server>:<port>/cf#/content/community-components/en.html

ホームページ

このガイドでは、ページの左側に沿ったプレビューとプロトタイピングに使用できる SCF コンポーネントの一覧を示します。

オーサーインスタンス上で編集モードで表示されたコンポーネントガイド：

コンポーネントページ

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

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

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

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

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

   • 追加した場合、表示されるテキストは次のようになります。「このコンポーネントは、その par ノードを介して含まれます。」
   • 含まれる場合、表示されるテキストは次のようになります。「このコンポーネントは動的に組み込まれます。」
   • を含めない場合、テキストは表示されません

4. サンプルコンポーネントまたは機能：コンポーネントまたはフィーチャーのアクティブなインスタンス。 コンポーネントの場合は、「 」タブセクションで指定したテンプレート、CSS およびデータに対する変更に応じて、コンポーネントが変更されることがあります。

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

オーサーインスタンスでガイドを使用する場合は、コンポーネントのダイアログを開いて、コンポーネントの設定を体験できます。 開発者向けの情報は、 コンポーネントと機能の基本事項 の節を参照してください。ダイアログの設定については、 コミュニティコンポーネント 作成者向けの節を参照してください。

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

以下 テンプレート タブ：

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

  オフにした場合、コンポーネントガイドはリポジトリ内の既存のリソース（par ノードの子である jcr ノード）を使用します。

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

  オンにすると、コンポーネントガイドは sling を使用して、子ノードの resourceType（存在しないリソース）のコンポーネントを動的に含めます。

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

  初期設定はオフです。

インタラクションを公開

パブリッシュインスタンスでガイドを使用する場合、コンポーネントや機能をサイト訪問者（サインインしていない）として、また様々な権限を持つメンバーとしてサインイン時に体験できます。

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

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

詳しくは、 コミュニティコンポーネントの clientlib.

実行

多くの場合、1 つは管理者または開発者としてサインインしているオーサーインスタンス上で、別のユーザーとしてログインしたコンポーネントを体験するには、左側のテキストボックスを使用します。 偽装 ボタンをクリックして、ユーザー名を入力するか、プルダウンリストから「 」を選択してから、「 」ボタンをクリックします。 「元に戻す」をクリックしてサインアウトし、偽装を終了します。

パブリッシュインスタンスは、別のユーザーとして実行する必要はありません。 ログイン/ログアウトリンクを使用して、 デモユーザー.

カスタマイズ

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

カスタマイズの有効化

カスタマイズをすばやく試すには、 scg:showIdeプロパティをコンポーネントページの content 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 つのタブが表示されることに注意してください。

「テンプレート」タブ

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

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

ローカル編集でコンパイルを実行すると、余白に点を置き、テキストを赤にしてエラーをハイライト表示します。

「CSS」タブ

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

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

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

余白内のルールの横にあるをクリックして、そのルールを使用する DOM の部分をハイライト表示するルールを選択できます。

「データ」タブ

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

構文エラーは、余白にマークされ、エディターでハイライト表示される場合があります。

Business.Adobe.com リソース

Automated Onboarding Customer Communications Document Generation Managed Cloud Web Content Management Digital Rights Management