現在表示中:

概要

コミュニティコンポーネントのサイドローディングは、Web ページが、サイト訪問者の選択に応じて表示内容が動的に変わる単純なシングルページアプリケーションとして設計されている場合に便利です。 

これは、コミュニティコンポーネントがページテンプレートに存在せず、サイト訪問者の選択後に動的に追加される場合に実現されます。

ソーシャルコンポーネントフレームワーク(SCF)は軽量なので、初期ページロード時に存在する SCF コンポーネントのみが登録されます。 動的に追加される SCF コンポーネントがページロード後に登録されるようにするには、SCF を呼び出してコンポーネントを「サイドローディング」する必要があります。

コミュニティコンポーネントをサイドローディングするようページが設計されている場合、ページ全体をキャッシュすることができます。

SCF コンポーネントを動的に追加する手順は、次のとおりです。

1)コンポーネントを DOM に追加します

2)次のいずれかの方法を使用して、コンポーネントをサイドローディングします

注意:

存在しないリソースのサイドローディングはサポートされていません。

DOM に対するコンポーネントの動的な追加

動的なインクルードの場合も動的なロードの場合も、最初にコンポーネントを DOM に追加する必要があります。

SCF コンポーネントを追加する際に最もよく使用されるタグは DIV タグですが、他のタグを使用することもできます。SCF によって DOM が確認されるのはページの初期ロード時のみなので、SCF を明示的に呼び出すまで、DOM に対するこの追加は認識されません。

どのタグを使用する場合も、最低限、要素が通常の SCF ルート要素パターンに準拠している必要があります。そのためには、次の 2 つの属性を含めます。

  • data-component-id
    追加されるコンポーネントへの有効なパス
  • data-scf-component
    コンポーネントの resourceType

以下に示すのは、追加されるコメントコンポーネントの例です。

<div
    class="scf-commentsystem scf translation-commentsystem" 
    data-component-id="<%= currentPage.getPath()%>/jcr:content/content-left/comments"
    data-scf-component="social/commons/components/hbs/comments"
>
</div>

SCF の呼び出しによるサイドローディング

動的なインクルード

動的なインクルードでは、ブートストラップ要求を使用します。これにより、SCF によって DOM が確認され、ページ上で見つかったすべての SCF コンポーネントがブートストラップされます。

ページロード後にいつでも次のような JQuery イベントを実行して、SCF コンポーネントを初期化できます。

$(document).trigger(SCF.events.BOOTSTRAP_REQUEST);

動的なロード

動的なロードでは、ロードする SCF コンポーネントを制御できます。

次の JavaScript メソッドを使用すると、DOM にあるすべての SCF コンポーネントをブートストラップする代わりに、ロードする特定の SCF コンポーネントを指定できます。

SCF.addComponent(document.getElementById(someId));

このメソッドの someIddata-component-id 属性の値です。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー