コミュニティコンポーネントガイド community-components-guide

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

各コンポーネントの基本情報に加えて、このガイドでは、SCF コンポーネントや機能の仕組みと、それらの設定方法やカスタマイズ方法について実験することができます。

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

はじめに getting-started

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

コミュニティコンポーネントサイトにアクセスするには、を参照します。

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

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

ホームページ home-page

このガイドでは、ページの左側に沿って、プレビューとプロトタイプ作成に使用できるSCF コンポーネントのリストを示します。

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

コンポーネントページ component-pages

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

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

作成者インタラクション author-interactions

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

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

「テンプレート」タブの下：

インタラクションの公開 publish-interactions

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

クライアントサイドライブラリ client-side-libraries

各コンポーネントにリストされているクライアントサイドライブラリ（clientlibs）は、コンポーネントがページに配置されたときに参照する​ 必須 ​です。 clientlibは、ブラウザーでコンポーネントをレンダリングするために使用されるJavaScriptとCSSのダウンロードを管理および最適化する手段を提供します。

詳しくは、Clientlibs for Communities Componentsを参照してください。

実行 impersonation

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

パブリッシュインスタンスは、偽装する必要はありません。 ログイン/ログアウトリンクを使用して、​ デモユーザーなど、様々なユーザーを偽装してください。

カスタマイズ customization

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

カスタマイズの有効化 enabling-customization

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

例えば、オーサーインスタンスまたはパブリッシュインスタンスで、管理者権限でログインした場合は、コメントコンポーネントを使用します。

「テンプレート」タブ templates-tab

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

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

ローカル編集でコンパイルを実行すると、間隔にドットを配置し、テキストを赤くマークすることで、エラーがハイライトされます。

CSS タブ css-tab

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

コンポーネントが複数のコンポーネントの複合である場合、一部のCSSが他のコンポーネントの1つに一覧表示される場合があります。

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

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

「データ」タブ data-tab

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

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