コミュニティコンポーネントガイド 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のインタラクション publish-interactions

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

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

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

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

実行 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 エンドポイントデータを表示します。 このデータは編集可能で、サンプルコンポーネントインスタンスに適用されます。

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