コンポーネントのオーバーレイは、デフォルトのコンポーネントに変更を加え、デフォルトを使用するすべてのインスタンスに影響を及ぼす方法です。
オーバーレイは、/libs ディレクトリの元のコンポーネントを変更するのではなく、/apps ディレクトリでデフォルトのコンポーネントのコピーを変更することによって実行します。コンポーネントは、「libs」が「apps」に置き換わる点を除き、同じ相対パスで構成されます。
/apps ディレクトリは、要求を処理するために最初に検索される場所であり、見つからない場合は、libs ディレクトリにあるデフォルトバージョンが使用されます。
/libs ディレクトリ内のデフォルトコンポーネントは変更しないでください。/libs ディレクトリは、今後のパッチおよびアップグレードによって、公開インターフェイスのメンテナンス中に必要な方法で自由に変更されます。
これは、目的が特定の用途のために変更を加えることであるデフォルトのコンポーネントの拡張とは異なり、拡張ではコンポーネントの一意のパスを作成し、/libs ディレクトリ内の元のデフォルトのコンポーネントを上位リソースタイプとして参照します。
コメントコンポーネントのオーバーレイの簡単な例については、コメントコンポーネントのオーバーレイチュートリアルを試してください。
コンポーネントの拡張（優先）は、デフォルトを使用するすべてのインスタンスに影響を及ぼさずに、特定の用途のために変更をおこなう方法です。拡張されたコンポーネントは、/apps フォルダー内で一意の名前が付けられ、/libs フォルダー内のデフォルトのコンポーネントを参照します。したがって、コンポーネントのデフォルトのデザインおよび動作は変更されません。
これは、Sling の性質によって libs/ フォルダー内を検索する前に apps/ フォルダーの相対参照を解決し、したがってコンポーネントのデザインまたは動作がグローバルに変更される、デフォルトのコンポーネントのオーバーレイとは異なります。
コメントコンポーネントの拡張の簡単な例については、コメントコンポーネントの拡張チュートリアルを試してください。
コンポーネントの HBS スクリプトは、この機能を実装する JavaScript オブジェクト、モデルおよびビューにバインドされる必要があります。
data-scf-component 属性の値は、デフォルト（social/tally/components/hbs/rating など）またはカスタマイズ機能のための拡張（カスタマイズ）されたコンポーネント（weretail/components/hbs/rating など）である場合があります。
コンポーネントをバインドするには、以下の属性を使用してコンポーネントスクリプト全体を <div> 要素で囲む必要があります。
- data-component-id="{{id}}"
コンテキストから id プロパティに解決されます - data-scf-component="<resourceType>
"
コンテンツのレンダリングに使用される JavaScript を識別する sling:resourceType
/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>
コンポーネントを拡張またはオーバーレイする場合、変更されたダイアログにプロパティを追加できます。
コンポーネント／リソースに対して設定されるすべてのプロパティには、handlebars テンプレートでプロパティキーを参照することによってアクセスできます。
{{properties.<property_name>}}
Web サイトの全体的なテーマに合うようにコンポーネントをカスタマイズすることは、「スキンの適用」によって実現できます。これは、色、フォント、画像、ボタン、リンク、間隔および位置設定を特定の程度まで変更することです。
スキンの適用は、フレームワークスタイルを選択的に上書きすることによって、または完全に新しいスタイルシートを記述することによって実行できます。SCF コンポーネントによって、コンポーネントを構成するさまざまな要素に影響する、名前空間が設定された、モジュール式のセマンティック CSS クラスが定義されます。
コンポーネントにスキンを適用するには、次の手順に従います。
- 変更する要素（コンポーザー領域、ツールバーボタン、メッセージフォントなど）を識別します。
- これらの要素に影響する CSS クラス／ルールを識別します。
- スタイルシートファイル（.css）を作成します。
- スタイルシートをサイトのクライアントライブラリフォルダー（clientlibs）に含め、それが ui:includeClientLib によってテンプレートおよびページに含められることを確認します。
- （2 で）識別した CSS クラスおよびルールをスタイルシートで再定義し、スタイルを追加します。
これで、カスタムスタイルによってデフォルトのフレームワークスタイルは上書きされ、コンポーネントは新しいスキンでレンダリングされます。
警告：
前に scf-js-* が付いた CSS クラス名は、JavaScript コード内で特定の用途を持ちます。これらのクラスはコンポーネントの状態に影響するので（非表示から表示への切り替えなど）、上書きや削除を行わないでください。
scf-js-* クラスはスタイルに影響しませんが、要素の状態を制御するので副次的な悪影響の可能性があるという点に注意して、クラス名をスタイルシート内で使用できます。
コンポーネントの JavaScript 実装を拡張するには、以下のことのみが必要です。
- jcr:resourceSuperType を拡張コンポーネントの jcr:resourceType（social/forum/components/hbs/forum など）に設定して、アプリのコンポーネントを作成します。
- デフォルトの SCF コンポーネントの JavaScript を調べ、SCF.registerComponent() を使用して登録する必要があるメソッドを判別します。
- 拡張コンポーネントの JavaScript をコピーするか、最初から開始します。
- メソッドを拡張します。
- SCF.registerComponent() を使用して、すべてのメソッドをデフォルトまたはカスタマイズしたオブジェクトおよびビューに登録します。
(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);
スクリプトタグは、クライアント側フレームワークの固有の部分です。これらは、サーバー側で生成されたマークアップをクライアント側のモデルおよびビューにバインドするために役立ちます。
コンポーネントをオーバーレイまたは優先するときに SCF スクリプト内のスクリプトタグを削除しないでください。JSON を HTML に挿入するために自動的に作成された SCF スクリプトタグは、属性 data-scf-json=true で識別されます。
クライアント側ライブラリ（clientlib）の使用により、クライアント側でコンテンツをレンダリングするために使用される JavaScript および CSS を整理および最適化できます。
SCF の clientlib は、カテゴリ名内の「author」の存在のみが異なる 2 つのバリアントの具体的な命名パターンに従います。
| clientlib のバリアント | カテゴリプロパティのパターン |
|
| 完全 clientlib | cq.social.hbs.<component name> | |
| オーサー clientlib | cq.social.author.hbs.<component name> |
完全（オーサー以外）clientlib には依存関係が含まれており、ui:includeClientLib を使用して含める場合に便利です。
これらのバージョンは、以下の場所にあります。
- /etc/clientlibs/social/hbs/<component name>
例：
- クライアントフォルダーノード：/etc/clientlibs/social/hbs/forum
- カテゴリプロパティ：cq.social.hbs.forum
コミュニティコンポーネントガイドによって、各 SCF コンポーネントに必要なすべての clientlib が一覧表示されます。
コミュニティコンポーネントの clientlib では、clientlib をページに追加する方法が説明されています。
オーサーバージョンの clientlib は、コンポーネントを実装するために必要な最小限の JavaScript に縮小されています。
これらの clientlib を直接含めることはできませんが、代わりに、サイト用に手動で作成された他の clientlib に埋め込むことができます。
これらのバージョンは、SCF libs フォルダー内にあります。
- /libs/social/<feature>/components/hbs/<component name>/clientlibs
例：
- クライアントフォルダーノード：/libs/social/forum/hbs/forum/clientlibs
- カテゴリプロパティ：cq.social.author.hbs.forum
注意：オーサー clientlib によって他のライブラリは埋め込まれませんが、依存関係は示されます。他のライブラリに埋め込まれる場合、依存関係は自動的には取り込まれず、同様に埋め込む必要があります。
必要なオーサー clientlib は、コミュニティコンポーネントガイドで各 SCF コンポーネントについてリストされた clientlib に「author」を挿入することによって識別できます。
- 全体的な速度：応答の速いサイトが目的ですが、最初のページのロードが少し遅いことは受け入れられる場合があります。ページの多くが同じ JavaScript を使用する場合、さまざまな JavaScript を 1 つの clientlib に埋め込み、ロードされる最初のページから参照できます。この単一のダウンロードでの JavaScript はキャッシュされたままになり、後続のページでダウンロードするデータ量は最小になります。
- 迅速な最初のページ：最初のページが迅速にロードされることが目的である場合があります。この場合、JavaScript は必要な場所でのみ参照される複数の小さいファイルになります。
- 最初のページのロードと後続のダウンロードとの間のバランス。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。