clientlib の追加

追加ClientLibraryFolder (clientlibs)

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

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

CRXDE Liteを使用して/etc/designsを展開します
an-scf-sandboxを右クリックし、Create Nodeを選択します
- 名前：clientlibs
- 型：cq:ClientLibraryFolder
「OK」をクリックします。

chlimage_1-220

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

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

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

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

chlimage_1-221

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

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

#base=.
 style.css

次に、clientlibsにstyle.cssという名前のファイルを作成し、内容を次のように設定します。

body {

background-color: #b0c4de;

}

SCF clientlib の埋め込み

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

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

1 つのページで 1 つの機能のみを使用する場合は、<% ui:includeClientLib categories=cq.social.hbs.forum" %> など、その機能の完全な clientlib をページに直接含めることができます。

ここでは、それらをすべて挿入するので、オーサー clientlib である、より基本的な SCF clientlib が適しています。

名前：embed
型：String
クリック Multi
値：cq.social.scf

<enter> ダイアログが表示されます。

各エントリの[後に+]をクリックして、次の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」をクリックします。
「すべて保存」をクリックします

chlimage_1-222

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

chlimage_1-223

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

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

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

chlimage_1-224

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

chlimage_1-225

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

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

CRXDE Liteを使用して、/libs/foundation/components/page/headlibs.jspを選択します
右クリックし、「コピー」を選択します（または、ツールバーから「コピー」を選択します）。
/apps/an-scf-sandbox/components/playpage
右クリックし、「貼り付け」を選択します（または、ツールバーから「貼り付け」を選択します）。
重複がheadlibs.jspをクリックして開きます
ファイルの末尾に次の行を追加します。

<ui:includeClientLib categories="apps.an-scf-sandbox"/>
「すべて保存」をクリックします

<%@ 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 サイトをブラウザーに読み込み、背景が青の網掛けでないかどうかを確認します。

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

chlimage_1-226

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

この時点で、必要最低限のサンドボックスが作成されているので、パッケージとして保存します。保存しておくと、操作中にリポジトリが破損してもう一度やり直したい場合に、サーバーの電源をオフにし、フォルダー crx-quickstart/ の名前変更または削除をおこなった後、サーバーの電源をオンにし、ここで保存したパッケージをアップロードしてインストールすることができます。つまり、これらの最も基本的な手順を繰り返さなくて済みます。

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

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

CRXDE Liteから、パッケージアイコンをクリックします
「パッケージを作成」をクリックします
- パッケージ名: an-scf-sandbox-minimal-pkg
- バージョン: 0.1
- グループ：<デフォルトのまま>
- 「OK」をクリックします。
「編集」をクリックします。
- 「フィルター」タブを選択
  - 追加フィルターをクリック
  - ルートパス：</apps/an-scf-sandboxを参照>
  - 「完了」をクリックします
  - 追加フィルターをクリック
  - ルートパス：</etc/designs/an-scf-sandboxを参照>
  - 「完了」をクリックします
  - 追加フィルターをクリック
  - ルートパス：</content/an-scf-sandboxを参照>
  - 「完了」をクリックします
- 「保存」をクリックします。
「ビルド」をクリックします

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

adobe.com 上のリソース

Personalized Experiences Customer Communications Content Intelligence Personalized Communications Dynamic Media Digital Asset Management

このページ

次を表示：

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free