現在表示中:

コミュニティコンポーネントガイドは、ソーシャルコンポーネントフレームワーク(SCF)のインタラクティブ開発ツールです。このガイドには、使用可能な AEM Communities コンポーネントまたは複数のコンポーネントから成る複雑な機能のリストが示されています。

このガイドを利用すると、各コンポーネントに関する基本情報を確認するとともに、SCF コンポーネント/機能の動作やその構成/カスタマイズ方法を試してみることができます。

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

はじめに

このガイドは、オーサーインスタンス(localhost:4502)とパブリッシュインスタンス(localhost:4503)の開発用インストール環境での使用を意図しています。

コミュニティコンポーネントサイトには以下からアクセスします。

コミュニティコンポーネントとのインタラクションは次の状況によって変わります。

  • サーバー(オーサーまたはパブリッシュ)
  • サイト訪問者がサインインしているかどうか
  • サインインしている場合は、そのメンバーに割り当てられている権限
  • デフォルト SRP である JSRP が使用されているかどうか

オーサーインスタンスで編集モードに切り替えるには、サーバー名の後の最初のパスセグメントとして editor.html または cf# のいずれかを挿入します。

注意:

オーサーインスタンスでタッチ操作向け UI を編集モードで使用する場合、ページ上のリンクはアクティブになりません。

コンポーネントページに移動するには、最初にプレビューモードを選択してリンクをアクティブにします。

コンポーネントページをブラウザーに表示した状態で、編集モードに戻し、コンポーネントの編集ダイアログを開きます。

オーサリングに関する一般情報については、ページのオーサリングのクイックガイドを参照してください。

タッチ操作向け UI に精通していない場合は、基本操作に関するドキュメントを参照してください。

ホームページ

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

オーサーインスタンスでコンポーネントガイドを編集モードで表示した場合:

コンポーネントページ

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

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

  1. タイトル:選択したコンポーネントの名前
  2. クライアント側ライブラリ:必要な 1 つ以上のカテゴリのリスト
  3. インクルード可能:コンポーネントが動的にインクルードされる場合は、オーサー編集モードで状態を切り替えることができます。
    • 追加した場合、「This component is included via its par node」というテキストが表示されます。
    • インクルードした場合、「This component is included dynamically」というテキストが表示されます。
    • インクルード不可の場合、テキストは表示されません。
  4. サンプルコンポーネントまたは機能:コンポーネントまたは機能のアクティブインスタンスです。コンポーネントについては、タブセクションに表示されるテンプレート、CSS、およびデータの変更に伴って変わることがあります。

注意:

ブラウザーウィンドウが狭すぎる場合、左側のコンポーネントリストで選択したコンポーネントは、リストの横ではなく下に表示されます。

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

オーサーインスタンスでガイドを使用する場合、コンポーネントの設定時にダイアログが開くことがあります。開発者向けの情報については、ドキュメントのコンポーネントと機能の基本事項の節で提供されているのに対し、ダイアログ設定については、作成者向けのコミュニティコンポーネントの節で説明されています。

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

テンプレート」タブで、次の操作を行います。

  • sling:include を使用して子コンポーネントを組み込む

    チェックボックスをオフにした場合、リポジトリ内の既存のリソース(par ノードの子である jcr ノード)が使用されます。
    • この場合、「This component is included via its par node」というテキストが表示されます。

    チェックボックスをオンにした場合、sling を使用して、子ノードの resourceType のコンポーネント(存在しないリソース)が動的にインクルードされます。
    • この場合、「This component is included dynamically」というテキストが表示されます。

    デフォルトではオフになっています。

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

パブリッシュインスタンスでガイドを使用する場合、コンポーネントと機能をサイト訪問者(サインインしていない場合)またはさまざまな権限を持つメンバー(サインインしている場合)として操作することになります。

注意:

SRP がデフォルトの JSRP のままになっている場合、パブリッシュインスタンスで生成された UGC はパブリッシュインスタンスでのみ表示され、オーサーインスタンスのモデレートコンソールからは表示できないことに留意してください。

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

コンポーネントごとに一覧表示されるクライアント側ライブラリ(clientlib)は、該当するコンポーネントをページに配置するときに参照する必要があるライブラリです。clientlib は、ブラウザーでコンポーネントをレンダリングするときに使用される JavaScript および CSS のダウンロードを管理および最適化するための手段となります。

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

偽装

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

パブリッシュインスタンスではこのような偽装操作は不要です。「ログイン」/「ログアウト」リンクを使用するだけで、デモユーザーなどのさまざまなユーザーを偽装できます。

カスタマイズ

各 SCF コンポーネントに対してカスタマイズを有効化すると、コンポーネントのテンプレート、CSS、およびデータを一時的に変更して、候補となるカスタマイズのプロトタイピングを行うことができます。

カスタマイズの有効化

注意:

このツールは読み取り専用です。テンプレート、CSS、またはデータを編集しても、その内容はリポジトリに保存されません。

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

オーサーインスタンスまたはパブリッシュインスタンスのいずれかに管理者権限でサインインし、例としてコメントコンポーネントを使用します。

  1. CRXDE Lite を参照します。
    例:http://localhost:4503/crx/de
  2. コンポーネントの jcr:content ノードを選択します。
    例:/content/community-components/en/comments/jcr:content
  3. プロパティを追加します。
    • 名前  scg:showIde
    • タイプ   文字列
    • 値  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 エンドポイントデータが表示されます。このデータは編集可能であり、サンプルコンポーネントインスタンスに適用されます。 

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー