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

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

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

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

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

オーバーレイ overlays

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

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

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

/libs ディレクトリ内のデフォルトコンポーネントは、今後のパッチやアップグレードで、パブリックインターフェイスを維持しながら必要な方法で/libs ディレクトリを変更できるため、変更しないでください。

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

コメントコンポーネントのオーバーレイの簡単な例として、​ コメントコンポーネントのオーバーレイチュートリアル ​を試してください。

拡張子 extensions

コンポーネントの拡張（オーバーライド）は、デフォルトを使用するすべてのインスタンスに影響を与えることなく、特定の使用に対して変更を加える方法です。 拡張コンポーネントは/apps フォルダー内で一意に名前が付けられ、/libs フォルダー内のデフォルトコンポーネントを参照するため、コンポーネントのデフォルトデザインと動作は変更されません。

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

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

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

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

コンポーネント/リソースに設定されているすべてのプロパティには、ハンドルバーテンプレートのプロパティキーを参照してアクセスできます。

{{properties.<property_name>}}

スキニング CSS skinning-css

web サイト全体のテーマに合わせてコンポーネントをカスタマイズするには、色、フォント、画像、ボタン、リンク、間隔、さらには特定の範囲で配置を変更する「スキニング」を実行します。

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

コンポーネントのスキンを作成するには：

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

JavaScriptの拡張 extending-javascript

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

forum.js: フォーラムのサンプル拡張機能 – 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のclientlibsは、2つのバリエーションに対して非常に特殊な命名パターンに従っており、カテゴリ名に「author」が含まれているかどうかによって異なります。

完全なClientlibs complete-clientlibs

完全な（オーサー以外の） clientlibには依存関係が含まれており、ui:includeClientLibを使用して含めるのに便利です。

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

例：

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

Clientlibs for Communities Componentsは、ページにclientlibsを追加する方法について説明します。

オーサーClientlibs author-clientlibs

オーサー版のclientlibは、コンポーネントの実装に必要な最小限のJavaScriptまで削除されます。

これらのclientlibを直接含めるのではなく、サイト用に手作業で作成した他のclientlibに埋め込むことができます。

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

例：

注意：オーサー側のクライアントライブラリは他のライブラリを埋め込むことはありませんが、依存関係はリスト化されています。 他のライブラリに埋め込まれた場合、依存関係は自動的に取り込まれることはなく、同様に埋め込む必要があります。

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

使用上の考慮事項 usage-considerations

クライアントライブラリの管理方法は、サイトごとに異なります。 要因には、次のようなものがあります。