コンポーネントの作成

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

  • コメント — ページに配置されるコンポーネントである包括的なコメントシステム。
  • コメント — 投稿されたコメントのインスタンスをキャプチャするコンポーネント。

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

メモ

1 つのサイトページで使用できるコメントシステムは 1 つのみです。

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

コメントコンポーネントの作成

これらの手順では、.hidden以外の​Group​値を指定し、コンポーネントをコンポーネントブラウザー（サイドキック）から使用できるようにします。

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

  1. CRXDE Lite（http://localhost:4502/crx/de/index.jsp）を表示します。

  2. カスタムアプリケーションの場所の作成：

    • /appsノードを選択します。

      • 「フォルダーを作成」を選択し、custom という名前のフォルダーを作成します。

    • /apps/customノードを選択します。

      • 「フォルダーを作成」を選択し、components という名前のフォルダーを作成します。

  3. /apps/custom/componentsノードを選択します。

    • 作成／コンポーネント… を選択します。

      • ラベル: コメント
      • タイトル：Alt Comments **
      • 説明：Alternative comments style **
      • スーパータイプ：social/commons/components/hbs/comments **
      • グループ：Custom **

    • 「次へ」を選択します。

    • 「次へ」を選択します。

    • 「次へ」を選択します。

    • 「OK」を選択します。

  4. 作成したノードを展開します。/apps/custom/components/comments

  5. 「すべて保存」を選択します。

  6. comments.jspを右クリック

  7. 削除​を選択します。

  8. 「すべて保存」を選択します。

create-component

子コメントコンポーネントの作成

親コンポーネントのみをページ内に含める必要があるので、これらの方向は​Group​を.hiddenに設定します。

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

  1. /apps/custom/components/commentsノードに移動します。

  2. ノードを右クリックします。

    • 作成 > コンポーネントを選択します。

      • ラベル：comment **
      • タイトル：Alt Comment **
      • 説明：Alternative comment style **
      • スーパータイプ：social/commons/components/hbs/comments/comment **
      • グループ: *.hidden*

    • 「次へ」を選択します。

    • 「次へ」を選択します。

    • 「次へ」を選択します。

    • 「OK」を選択します。

  3. 作成したノードを展開します。/apps/custom/components/comments/comment

  4. 「すべて保存」を選択します。

  5. comment.jspを右クリック

  6. 削除​を選択します。

  7. 「すべて保存」を選択します。

create-child-component

create-component-crxde

デフォルトの HBS スクリプトのコピーと変更

CRXDE Lite を使用して、次の手順を実行します。

  • コピー comments.hbs

  • comments.hbsを編集して次の操作を行います。

    • data-scf-component属性の値を変更します（20行目前後）。

      • 送信元 social/commons/components/hbs/comments
      • To /apps/custom/components/comments

    • カスタムコメントコンポーネントを含めるように変更します（75行目前後）。

      • 置換 {{include this resourceType='social/commons/components/hbs/comments/comment'}}
      • を次のタグに置換します。{{include this resourceType='/apps/custom/components/comments/comment'}}

  • コピー comment.hbs

  • comment.hbsを編集して次の操作を行います。

    • data-scf-component属性の値を変更します（19行目前後）。

      • 送信元 social/commons/components/hbs/comments/comment
      • /apps/custom/components/comments/commentへ

  • /apps/customノードを選択

  • 「すべて保存」を選択します。

クライアントライブラリフォルダーの作成

このクライアントライブラリを明示的に含めなくても済むように、デフォルトのコメントシステムの clientlib の categories 値（cq.social.author.hbs.comments）を使用できますが、これを使用すると、デフォルトのコンポーネントのすべてのインスタンスについても、この clientlib が含まれるようになります。

CRXDE Lite を使用して、次の手順を実行します。

  • /apps/custom/components/commentsノードを選択

  • 「ノードを作成」を選択します。

    • 名前：clientlibs

    • 型：cq:ClientLibraryFolder

    • 「プロパティ」タブに追加：

      • ​​categories ​​String NameTypeValue cq.social.author.hbs.comments Multi
      • ​​dependencies ​​String NameTypeValue cq.social.scf Multi

  • 「すべて保存」を選択します。

  • /apps/custom/components/comments/clientlibノードを選択し、3つのファイルを作成します。

    • 名前：css.txt
    • 名前：js.txt
    • 名前：customcommentsystem.js

  • js.txtの内容として「customcommentsystem.js」と入力します。

  • 「すべて保存」を選択します。

comments-clientlibs

SCF モデルおよびビューの登録

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

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);
  • 「すべて保存」を選択します。

アプリの公開

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

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

  • グローバルナビゲーションから、

    • ツール / デプロイ / レプリケーション​を選択します。
    • 「ツリーをアクティブ化」を選択します。
    • Start Pathを/apps/customに設定します。
    • 変更済み​のみをオフにします
    • 「アクティブ化」ボタンを選択します。

このページ