コンポーネントの作成 create-the-components

最終更新日： 2026年10月13日

適用対象：
Experience Manager 6.5

トピック：
Communities

作成対象：

開発者

コンポーネントを拡張する例では、2つのコンポーネントで構成されるコメントシステムを使用します。

コメント – ページ上に配置されたコンポーネントを含むコメントシステム。
コメント – 投稿されたコメントのインスタンスをキャプチャするコンポーネント。

投稿されたコメントの外観をカスタマイズする場合は、両方のコンポーネントを配置する必要があります。

NOTE

サイトページごとに1つのコメントシステムのみが許可されます。

多くのコミュニティ機能には、既に拡張コメントシステムを参照するようにresourceTypeを変更できるコメントシステムが含まれています。

コメントコンポーネントの作成 create-the-comments-component

これらの指示は、.hidden以外の グループ 値を指定するため、コンポーネントはコンポーネントブラウザー（サイドキック）から利用できるようになります。

自動作成されたJSP ファイルの削除は、代わりにデフォルトのHBS ファイルが使用されるためです。

CRXDE|Lite （http://localhost:4502/crx/de/index.jsp）を参照します
カスタムアプリケーションの場所を作成します。
- /apps ノードを選択
  - フォルダーを作成 （カスタム）
- /apps/custom ノードを選択
  - フォルダーを作成 （コンポーネント）
/apps/custom/components ノードを選択
- 作成> コンポーネント…
  - ラベル: コメント
  - タイトル: 代替コメント
  - 説明: 代替コメントスタイル
  - スーパータイプ: ソーシャル/コモンズ/コンポーネント/hbs/コメント
  - グループ: カスタム
- 次へを選択
- 次へを選択
- 次へを選択
- 「OK」を選択します。
作成されたノードを展開します：/apps/custom/components/comments
すべて保存を選択
comments.jspを右クリック
「削除」を選択します。
すべて保存を選択

create-component

子コメントコンポーネントの作成 create-the-child-comment-component

親コンポーネントのみをページに含める必要があるため、これらの指示は グループ から.hiddenに設定されます。

自動作成されたJSP ファイルの削除は、代わりにデフォルトのHBS ファイルが使用されるためです。

/apps/custom/components/comments ノードに移動します
ノードを右クリックします
- 作成 / コンポーネントを選択…
  - ラベル: コメント
  - タイトル: 代替コメント
  - 説明: 代替コメントスタイル
  - スーパータイプ: ソーシャル/コモンズ/コンポーネント/hbs/コメント/コメント
  - グループ：*.hidden*
- 次へを選択
- 次へを選択
- 次へを選択
- 「OK」を選択します。
作成されたノードを展開します：/apps/custom/components/comments/comment
すべて保存を選択
comment.jspを右クリック
「削除」を選択します。
すべて保存を選択

create-child-component

create-component-crxde

デフォルトのHBS スクリプトのコピーと変更 copy-and-modify-the-default-hbs-scripts

CRXDE Liteを使用：

コピー comments.hbs
- /libs/social/commons/components/hbs/commentsから
- /apps/custom/components/commentsへ
comments.hbsを編集：
- data-scf-component属性の値を変更します（～20行目）:
  - social/commons/components/hbs/commentsから
  - /apps/custom/components/commentsへ
- カスタムコメントコンポーネント（～75行目）を含めるように変更します。
  - {{include this resourceType='social/commons/components/hbs/comments/comment'}}を置換
  - {{include this resourceType='/apps/custom/components/comments/comment'}}様と
コピー comment.hbs
- /libs/social/commons/components/hbs/comments/commentから
- /apps/custom/components/comments/commentへ
comment.hbsを編集：
- data-scf-component属性の値を変更します（～ 19行目）
  - social/commons/components/hbs/comments/commentから
  - /apps/custom/components/comments/commentへ
/apps/custom ノードを選択
すべて保存を選択

クライアントライブラリフォルダーの作成 create-a-client-library-folder

このクライアントライブラリを含める必要がないように、デフォルトのコメントシステムのclientlibのカテゴリ値を使用できます（cq.social.author.hbs.comments）。ただし、このclientlibは、デフォルトコンポーネントのすべてのインスタンスにも含める必要があります。

CRXDE Liteを使用：

/apps/custom/components/comments ノードを選択
「ノードを作成」を選択
- 名前：clientlibs
- 型：cq:ClientLibraryFolder
- 「プロパティ」タブに追加：
  - 名前 categories 種類 String 値 cq.social.author.hbs.comments Multi
  - 名前 dependencies 種類 String 値 cq.social.scf Multi
すべて保存を選択
/apps/custom/components/comments/clientlibs ノードを選択した状態で、次の3つのファイルを作成します。
- 名前：css.txt
- 名前：js.txt
- 名前: customcommentsystem.js
'customcommentsystem.js’をjs.txtのコンテンツとして入力してください
すべて保存を選択

comments-clientlibs

SCF モデルとビューの登録 register-the-scf-model-view

SCF コンポーネントを拡張（オーバーライド）する場合、resourceTypeは異なります（オーバーレイでは、/libsの前に/appsを検索する相対検索メカニズムを使用して、resourceTypeが同じままになります）。そのため、（クライアントライブラリで）JavaScriptを記述して、SCF JS モデルを登録し、カスタム resourceTypeのビューを表示する必要があります。

次のテキストをcustomcommentsystem.jsの内容として入力します。

customcommentsystem.js customcommentsystem-js

(function($CQ, _, Backbone, SCF) {
    "use strict";

    var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
    var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;

    var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
    var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;

    SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
    SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);

})($CQ, _, Backbone, SCF);

すべて保存を選択

アプリを公開 publish-the-app

パブリッシュ環境で拡張コンポーネントを使用するには、カスタムコンポーネントをレプリケートする必要があります。

そのひとつの方法は次のとおりです。

グローバルナビゲーションから，
- ツール/デプロイメント/レプリケーションを選択します
- 「ツリーをアクティブ化」を選択
- Start Path を /apps/custom に設定
- 「変更済みのみ」のチェックを外します
- 「アクティブ化」ボタンを選択

recommendation-more-help

experience-manager-65-help-communities