コンポーネントのサイドローディング

概要

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

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

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

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

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

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

  2. コンポーネントをサイドロード 次の 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));

このメソッドの someId は data-component-id 属性の値です。

このページ