clientlib の追加

追加ClientLibraryFolder (clientlibs)

clientlibs という名前の ClientLibraryFolder を作成し、ここに、サイトのページをレンダリングするために使用される JS および CSS を格納します。

このクライアントライブラリに指定する categories プロパティの値は、clientlib をコンテンツページから直接含めたり、その他の clientlib に埋め込んだりする場合に使用される識別子です。

1. CRXDE Lite​を使用して/etc/designsを展開します

2. an-scf-sandboxを右クリックし、Create Nodeを選択します

   • 名前：clientlibs
   • 型：cq:ClientLibraryFolder

3. 「OK」をクリックします。

新しい ノードの「​プロパティclientlibs」タブで、categories プロパティを入力します。

• 名前：categories
• タイプ：String
• 値：apps.an-scf-sandbox
• 追加​をクリックします
• 「すべて保存」をクリックします

注意：categories 値の前に「apps.」を付けるのは、「所有アプリケーション」が /libs ではなく、/apps フォルダー内にあることを示すための規則です。重要：プ追加レースホルダーjs.txtと​css.txt​ファイル （正式には、cq:ClientLibraryFolderが存在しない場合は除きます）。

1. /etc/designs/an-scf-sandbox/clientlibs​を右クリック
2. ファイルを作成を選択…
3. 名前： css.txtを入力
4. ファイルを作成を選択…
5. 名前： js.txtを入力
6. 「すべて保存」をクリックします

css.txt および js.txt の最初の行によって、後述のファイルのリストが見つかる基本の場所が特定されます。

css.txt の内容を次のように設定します。

#base=.
 style.css

次に、clientlibsにstyle.cssという名前のファイルを作成し、内容を

body {

background-color: #b0c4de;

}

SCF clientlib の埋め込み

ノードの「​プロパティclientlibs」タブで、複数値の String プロパティ embed を入力します。これにより、SCFコンポーネント](/docs/experience-manager-65/communities/client-customize.html?lang=ja#clientlibs-for-scf)に必要な[クライアント側ライブラリ(clientlibs)が埋め込まれます。 このチュートリアルでは、Communitiesコンポーネントに必要なclientlibの多くが追加されます。

ページごとにダウンロードされる clientlib の利点とサイズ／スピードに関する考慮事項があるので、このアプローチが実稼動サイトでの使用に適している場合もあれば、そうでない場合もある点に​注意してください。

1つのページで1つの機能しか使用しない場合は、その機能の完全なclientlibを直接ページに含めることができます。例えば、

% ui:includeClientLib categories=cq.social.hbs.forum" %

この場合は、すべてを含め、より基本的なSCFクライアントライブラリを作成者のclientlibとして扱うことをお勧めします。

• 名前：embed

• 型：String

• クリック Multi

• 値：cq.social.scf

  • ダイアログが表示されます。
    各エントリの後に​+​をクリックして、次のclientlibカテゴリを追加します。

    • cq.ckeditor
    • cq.social.author.hbs.comments
    • cq.social.author.hbs.forum
    • cq.social.author.hbs.rating
    • cq.social.author.hbs.reviews
    • cq.social.author.hbs.voting
    • 「OK」をクリックします。

• 「すべて保存」をクリックします

/etc/designs/an-scf-sandbox/clientlibsは、次のようにリポジトリに表示されます。

playpage テンプレートに clientlibs を含める

apps.an-scf-sandbox ClientLibraryFolderカテゴリをページに含めないと、SCFコンポーネントは機能しなくなり、必要なJavaScriptとスタイルが使用できなくなります。

例えば、clientlibs を挿入しなかった場合、SCF コメントコンポーネントは、スタイルが設定されていない状態で表示されます。

apps.an-scf-sandbox clientlibs を含めると、SCF コメントコンポーネントは、スタイルが設定された状態で表示されます。

includeステートメントは、htmlスクリプトのheadセクションに属します。 デフォルトの​foundation head.jsp​には、オーバーレイ可能なスクリプトが含まれています。headlibs.jsp.

headlibs.jsp をコピーし、clientlibs を含めます。

1. CRXDE Lite​を使用して、/libs/foundation/components/page/headlibs.jsp​を選択します

2. 右クリックし、「コピー」を選択します（または、ツールバーの「コピー」を選択します）。

3. /apps/an-scf-sandbox/components/playpage

4. 右クリックし、「貼り付け」を選択します（または、ツールバーから「貼り付け」を選択します）。

5. headlibs.jsp​を重複クリックして開きます

6. ファイルの末尾に次の行を追加します。
   <ui:includeClientLib categories="apps.an-scf-sandbox"/>

7. 「すべて保存」をクリックします

<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>

Web サイトをブラウザーに読み込み、背景が青の網掛けでないかどうかを確認します。

https://localhost:4502/content/an-scf-sandbox/en/play.html

これまでの作業内容の保存

この時点では、最小限のサンドボックスが存在し、再生中にリポジトリが破損し、開始し直したい場合に、サーバーのオフ、crx-quickstart/フォルダーの名前の変更や削除、サーバーのオン、アップロード、インストールを行う際に、最も基本的な手順を繰り返す必要がない。

すぐに操作してみたい場合は、サンプルページの作成チュートリアルにこのパッケージがあります。

パッケージを作成するには：

• CRXDE Liteからパッケージアイコンをクリックします。

• 「パッケージを作成」をクリックします

  • パッケージ名：an-scf-sandbox-minimal-pkg
  • バージョン：0.1
  • グループ: leave as default
  • 「OK」をクリックします。

• 「編集」をクリックします。

  • 「フィルター」タブを選択

    • 追加フィルター​をクリック
    • ルートパス：/apps/an-scf-sandboxを参照
    • 「完了」をクリックします
    • 追加フィルター​をクリック
    • ルートパス：/etc/designs/an-scf-sandboxを参照
    • 「完了」をクリックします
    • 追加フィルター​をクリック
    • ルートパス：/content/an-scf-sandbox**を参照
    • 「完了」をクリックします

  • 「保存」をクリックします。

• 「ビルド」をクリックします

これで、「ダウンロード」を選択してディスクに保存し、パッケージをアップロード​他に保存することができます。また、詳細>複製​を選択して、サンドボックスの領域を拡張できます。