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

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

このガイドでは、各コンポーネントの基本情報に加えて、SCF コンポーネントや機能の動作の仕組み、およびその設定やカスタマイズの方法を実験できます。

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

はじめに getting-started

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

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

Communities コンポーネントとのインタラクションは、以下によって異なります。

オーサー環境で編集モードに入るには、次のいずれかを挿入します editor.html または cf# サーバー名の後の最初のパスセグメントとして：

ホームページ home-page

このガイドでは、ページの左側に、プレビューおよびプロトタイプ作成に使用できる SCF コンポーネントの一覧を示します。

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

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

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

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

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

オーサーインスタンスでガイドを使用する際に、ダイアログを開いてコンポーネントを設定することができます。 開発者向けの情報については、を参照してください。 コンポーネントと機能の基本事項 ダイアログ設定については以下で説明しますが、ドキュメントのの節 Communities コンポーネント 作成者向けの節です。

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

の下 テンプレート タブ：

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

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

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

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

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

実行 impersonation

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

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

カスタマイズ customization

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

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

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

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

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

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

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

ローカル編集でコンパイルを実行すると、樋に点が配置され、テキストが赤くマークされるため、エラーが強調表示されます。

「CSS」タブ css-tab

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

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

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

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

「データ」タブ data-tab

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

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