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

コミュニティコンポーネントガイドは、ソーシャルコンポーネントフレームワーク（SCF）のインタラクティブ開発ツールです。使用可能な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 を参照してください。

偽装

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

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

カスタマイズ

有効にすると、各 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 はそれらのコンポーネントのいずれか 1 つの下に一覧表示されることがあります。

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

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

「データ」タブ

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

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

Business.Adobe.com リソース

Automated Onboarding Auto Form Fill Embedded Charts Content As A Service Version History Digital Asset Management