Show Menu
トピック×

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

コミュニティコンポーネントガイドは、 ソーシャルコンポーネントフレームワーク(SCF) のインタラクティブ開発ツールです。利用可能なAEM Communitiesのコンポーネントや、複数のコンポーネントで構築されたより複雑な機能のリストを提供します。
このガイドを利用すると、各コンポーネントに関する基本情報を確認するとともに、SCF コンポーネント/機能の動作やその構成/カスタマイズ方法を試してみることができます。
各コンポーネントに関連する開発の基本事項については、 コンポーネントと機能の基本事項 を参照してください。

概要

このガイドは、オーサーインスタンス(localhost:4502)とパブリッシュインスタンス(localhost:4503)の開発用インストール環境での使用を意図しています。
コミュニティコンポーネントサイトには以下からアクセスします。
コミュニティコンポーネントとのインタラクションは次の状況によって変わります。
  • サーバー(作成者または発行)
  • サイト訪問者がサインインしているかどうか
  • ログインした場合、メンバーに割り当てられた権限
  • Whether or not the default SRP, JSRP , is in use
On author, to enter edit mode, insert either editor.html or cf# as the first path segment after the server name:
オーサーインスタンスの編集モードでは、ページ上のリンクはアクティブではありません。
コンポーネントページに移動するには、最初にプレビューモードを選択してリンクをアクティブにします。
コンポーネントページをブラウザーに表示した状態で、編集モードに戻し、コンポーネントの編集ダイアログを開きます。
For general authoring information, view the quick guide to authoring pages .
AEM に精通していない場合は、 基本操作 に関するドキュメントを参照してください。

ホームページ

このガイドでは、プレビューおよびプロトタイピングに対応した SCF コンポーネントのリストがページの左側に沿って表示されます。
オーサーインスタンスでコンポーネントガイドを編集モードで表示した場合:

コンポーネントページ

ページの左側のリストからコンポーネントを選択します。
ガイドの本文には次の情報が表示されます。
  1. タイトル:選択したコンポーネントの名前
  2. クライアント側ライブラリ :1つ以上の必須カテゴリのリスト
  3. 含める :コンポーネントが動的に含まれる場合は、オーサー編集モードで状態を切り替えることができます。
    • 追加した場合、表示されるテキストは次のとおりです。「このコンポーネントは、その各ノードを介して含まれます。」
    • 含まれる場合、表示されるテキストは次のとおりです。「このコンポーネントは動的に含まれます。」
    • 含めない場合、テキストは表示されません
  4. サンプルコンポーネントまたは機能:コンポーネントまたは機能のアクティブインスタンスです。コンポーネントの場合は、タブセクションで提供されるテンプレート、CSS、データに対する変更によって変更できます。
ブラウザーウィンドウが狭すぎる場合、左側のコンポーネントリストで選択したコンポーネントは、リストの横ではなく下に表示されます。

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

オーサーインスタンスでガイドを使用する場合、コンポーネントの設定時にダイアログが開くことがあります。Information for developers is provided in the Component and Feature Essentials section of the documentation, while the dialog settings are described in Communities Components section for authors.
コミュニティコンポーネントガイドでは、一部のコンポーネントダイアログ設定が インクルード可能 切り替え状態でオーバーレイされています。既存のリソースの使用と動的に含まれるリソースの使用を切り替えるには、編集モードでコンポーネントと含めるテキストの両方を選択し、ダブルクリックして編集ダイアログを開きます。
テンプレート 」タブで、次の操作をおこないます。
  • sling:include を使用して子コンポーネントを組み込む
    チェックを外すと、コンポーネントガイドはリポジトリ内の既存のリソース(各ノードの子であるjcrノード)を使用します。
    • 表示されるテキスト:「このコンポーネントは、その各ノードを介して含まれます。」
    チェックボックスをオンにした場合、sling を使用して、子ノードの resourceType のコンポーネント(存在しないリソース)が動的にインクルードされます。
    • 表示されるテキスト:「このコンポーネントは動的に含まれます。」
    初期設定はオフです。

パブリッシュインタラクション

パブリッシュインスタンスでガイドを使用する場合、コンポーネントと機能をサイト訪問者(サインインしていない場合)またはさまざまな権限を持つメンバー(サインインしている場合)として操作することになります。
SRP がデフォルトの JSRP のままになっている場合、パブリッシュインスタンスで生成された UGC はパブリッシュインスタンスでのみ表示され、オーサーインスタンスの モデレート コンソールからは表示できない​**​ことに留意してください。

クライアント側ライブラリ

コンポーネントごとに一覧表示されるクライアント側ライブラリ(clientlib)は、該当するコンポーネントをページに配置するときに参照する必要がある​**​ライブラリです。clientlibsは、ブラウザーでコンポーネントをレンダリングするために使用するJavaScriptとCSSのダウンロードを管理し、最適化する手段を提供します。
詳しくは、 コミュニティコンポーネントの clientlib を参照してください。

偽装

管理者または開発者としてサインインすることが多いオーサーインスタンスで、別のユーザーとしてログインしてコンポーネントを操作するには、「 偽装 」ボタンの左側にあるテキストボックスにユーザー名を入力するか、プルダウンリストから選択してボタンをクリックします。「復帰」をクリックしてサインアウトし、仮装を終了します。
パブリッシュインスタンスではこのような偽装操作は不要です。Simply use the Login/Logout link to impersonate various users, such as the demo users .

カスタマイズ

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

カスタマイズの有効化

このツールは読み取り専用です 。テンプレート、CSSまたはデータに対して行われた編集はリポジトリに保存されません。
To quickly experiment with customizations, the scg:showIde property must be added to the component page's content JCR node and set to true.
オーサーインスタンスまたはパブリッシュインスタンスのいずれかに管理者権限でサインインし、例としてコメントコンポーネントを使用します。
  1. Browse to CRXDE Lite
  2. コンポーネントのノードを選 jcr:content
    例: /content/community-components/en/comments/jcr:content
  3. プロパティの追加
    • 名前 scg:showIde
    • タイプ String
    • true
  4. すべて保存 」を選択します。
  5. ガイドのコメントページをリロードします。
  6. テンプレート、CSS、データの3つのタブが表示されるようになりました。

「テンプレート」タブ

「テンプレート」タブを選択すると、コンポーネントに関連付けられているテンプレートが表示されます。
テンプレートエディターを使用すると、リポジトリ内のコンポーネントに影響を及ぼすことなく、ローカル編集をコンパイルし、ページ上のサンプルコンポーネントインスタンスに適用することができます。
ローカル編集のコンパイル時にエラーが発生した場合は、ガッター部分にドットを配置し、テキストの色を赤にすることによってエラーが強調表示されます。

「CSS」タブ

「CSS」タブを選択すると、コンポーネントに関連付けられている CSS が表示されます。
コンポーネントが他の複数のコンポーネントから構成される場合、一部の CSS はそれらのコンポーネントのいずれか 1 つの下に一覧表示されることがあります。
CSS エディターを使用すると、CSS を変更し、ページ上のサンプルコンポーネントインスタンスに適用することができます。
ガッター部分でルールの横をクリックしてルールを選択すると、そのルールを使用する DOM の各部が強調表示されます。

「データ」タブ

「データ」タブを選択すると、.social.json エンドポイントデータが表示されます。このデータは編集可能であり、サンプルコンポーネントインスタンスに適用されます。
構文エラーはガッター部分にマークされ、エディターでも強調表示されます。