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

概要

コミュニティコンポーネントのサイドローディングは、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));

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

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now