clientlib の追加

ClientLibraryFolder（clientlibs）の追加

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

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

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

add-client-library

新しい ノードの「プロパティ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
クリック すべて保存

clientlibs-css

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

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

#base=.
 style.css

次に、clientlibs の下に style.css という名前のファイルを作成し、コンテンツを

body {

background-color: #b0c4de;

}

SCF clientlib の埋め込み

ノードの「プロパティclientlibs」タブで、複数値の String プロパティ embed を入力します。これにより、必要な SCF コンポーネントのクライアント側ライブラリ (clientlibs). このチュートリアルでは、コミュニティコンポーネントに必要なクライアントライブラリの多くを追加します。

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

1 つのページで 1 つの機能のみを使用する場合は、その機能の完全な clientlib をページに直接含めることができます ( 例：

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

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

名前：embed
型：String
Click 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」をクリックします。
クリック すべて保存

scf-clientlibs

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

scf-clientlibs-view

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

を含めずに、 apps.an-scf-sandbox 必要な JavaScript とスタイルが使用できないので、ページの ClientLibraryFolder カテゴリ、SCF コンポーネントは機能しないか、スタイル設定されません。

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

clientlibs-comment

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

clientlibs-comment-styled

include ステートメントは、 head セクション html スクリプトデフォルト 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 サイトをブラウザーに読み込み、背景が青の網掛けでないかどうかを確認します。

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**
  - クリック完了
- 「保存」をクリックします。
クリック ビルド