クライアント側のカスタマイズ client-side-customization

クライアントサイドでのAEM Communities コンポーネントの外観や動作をカスタマイズする方法はいくつかあります。

コンポーネントをオーバーレイまたは拡張する方法は、主に 2 つあります。

オーバーレイコンポーネントはデフォルトのコンポーネントを変更し、コンポーネントへのすべての参照に影響します。

拡張コンポーネントは一意の名前を持ち、変更の範囲を制限します。 「extend」という用語は、「override」と同じ意味で使用されます。

オーバーレイ overlays

コンポーネントのオーバーレイとは、デフォルトコンポーネントに変更を加えて、デフォルトを使用するすべてのインスタンスに影響を与える方法です。

オーバーレイを実行するには、/libs ディレクトリ内の元のコンポーネントを変更するのではなく、/apps ディレクトリ内のデフォルトコンポーネントのコピーを変更します。 コンポーネントは、「libs」が「apps」に置き換えられることを除いて、同一の相対パスで構築されます。

リクエストを解決するために最初に検索されるのは/apps ディレクトリです。見つからない場合は、/libs ディレクトリ内のデフォルトバージョンが使用されます。

今後のパッチおよびアップグレードでは、公開インターフェイスを維持しながら必要な方法で/libs ディレクトリを自由に変更できるので、/libs ディレクトリのデフォルトのコンポーネントは決して変更しないでください。

これは、特定の用途に合わせて変更を加え、コンポーネントへの一意のパスを作成し、/libs ディレクトリ内の元のデフォルトコンポーネントをスーパーリソースタイプとして参照することに依存するデフォルトコンポーネント 拡張とは異なります。

コメントコンポーネントのオーバーレイの簡単な例については、 コメントコンポーネントのオーバーレイチュートリアルを参照してください。

拡張子 extensions

コンポーネントの拡張（上書き）は、デフォルトを使用するすべてのインスタンスに影響を与えずに、特定の用途に合わせて変更を加える方法です。 拡張コンポーネントは、/apps フォルダーで一意の名前を付けられ、/libs フォルダーのデフォルトコンポーネントを参照するので、コンポーネントのデフォルトのデザインと動作は変更されません。

これは、Sling の特性が libs/ フォルダーで検索する前にアプリ/フォルダーへの相対参照を解決するデフォルトのコンポーネント オーバーレイとは異なります。そのため、コンポーネントのデザインや動作はグローバルに変更されます。

コメントコンポーネントの拡張例については、 コメントコンポーネントの拡張チュートリアルを参照してください。

JavaScript バインディング javascript-binding

コンポーネントの HBS スクリプトは、この機能を実装するJavaScript オブジェクト、モデル、ビューにバインドする必要があります。

data-scf-component 属性の値は、social/tally/components/hbs/rating などのデフォルトの場合もあれば、カスタマイズされた機能の拡張（カスタマイズ）コンポーネントである場合もあります（weretail/components/hbs/rating。

コンポーネントをバインドするには、コンポーネントスクリプト全体を次の属性で <div> 要素内に囲む必要があります。

例：/apps/weretail/components/hbs/rating/rating.hbs から

<div class="we-Rating" data-component-id="`{{id}}`" data-scf-component="weretail/components/hbs/rating">

     <!-- HTML with HBS accessing the rating component -->

</div>

カスタムプロパティ custom-properties

コンポーネントを拡張またはオーバーレイするときに、変更したダイアログにプロパティを追加することができます。

コンポーネントやリソースに設定されたすべてのプロパティには、handlebars テンプレートのプロパティキーを参照することでアクセスできます。

{{properties.<property_name>}}

CSS のスキニング skinning-css

Web サイトの全体的なテーマに合わせてコンポーネントをカスタマイズするには、「スキニング」を行います。カラー、フォント、画像、ボタン、リンク、間隔を変更し、ある程度配置することもできます。

スキニングを行うには、フレームワークスタイルを選択的に上書きするか、まったく新しいスタイルシートを記述します。 SCF コンポーネントは、コンポーネントを構成する様々な要素に影響を与える、名前空間、モジュール型、セマンティックの CSS クラスを定義します。

コンポーネントをスキニングするには：

これで、カスタムスタイルがデフォルトのフレームワークスタイルを上書きし、コンポーネントが新しいスキンでレンダリングされます。

JavaScriptの拡張 extending-javascript

コンポーネントのJavaScript実装を拡張するには、次の操作が必要です。

forum.js:Forum のサンプル拡張機能 – HBS forum-js-sample-extension-of-forum-hbs

(function($CQ, _, Backbone, SCF) {
    "use strict";
    var GMForumView = SCF.ForumView.extend({
        viewName: "GMForum",
        showComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        },
        hideComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        }
    });

    SCF.registerComponent('social/forum/components/hbs/post', SCF.Post, SCF.PostView);
    SCF.registerComponent('social/forum/components/hbs/topic', SCF.Topic, SCF.TopicView);
    SCF.registerComponent('social/forum/components/hbs/forum', SCF.Forum, GMForumView );
})($CQ, _, Backbone, SCF);

スクリプトタグ script-tags

スクリプトタグは、クライアントサイドフレームワークに固有の要素です。 サーバーサイドで生成されたマークアップをクライアントサイドのモデルおよびビューにバインドするのに役立つ接着剤です。

SCF スクリプトのスクリプトタグは、コンポーネントのオーバーレイまたはオーバーライド時には削除しないでください。 HTMLに JSON を挿入するために自動作成された SCF スクリプトタグは、属性 data-scf-json=true で識別されます。

SCF の clientlibs clientlibs-for-scf

クライアントサイドライブラリ（clientlibs）を使用すると、クライアントでのコンテンツのレンダリングに使用するJavaScriptと CSS を整理および最適化できます。

SCF の clientlib は、2 つのバリアントに対して非常に具体的な命名パターンに従います。これは、カテゴリ名に「author」が含まれているかどうかによってのみ異なります。

Clientlibs の完了 complete-clientlibs

完全な（作成者以外の） clientlib は依存関係を含むので、ui:includeClientLib を使用してを含めると便利です。

これらのバージョンは次の場所にあります。

次に例を示します。

コミュニティコンポーネントガイドには、各 SCF コンポーネントに必要な完全な clientlib が一覧表示されています。

コミュニティコンポーネントの clientlibs で、ページに clientlibs を追加する方法を説明します。

作成者 Clientlibs author-clientlibs

オーサーバージョンの clientlib は、コンポーネントの実装に必要な最小限のJavaScriptに分解されます。

これらの clientlibs は直接には含めず、サイト用に手作りされた他の clientlibs に埋め込むことができます。

これらのバージョンは SCF libs フォルダーにあります。

次に例を示します。

メモ：作成者の clientlibs は他のライブラリを埋め込むことはありませんが、依存関係はリスト表示されます。 他のライブラリに埋め込む場合、依存関係は自動的には取り込まれず、埋め込む必要もあります。

必要な作成者 clientlibs は、「コミュニティコンポーネントガイド の各 SCF コンポーネントにリストされている clientlibs に「author」を挿入することで識別きます。

使用に関する考慮事項 usage-considerations

クライアントライブラリの管理方法は、サイトによって異なります。 様々な要因として以下のものがあります。