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」をクリックします。

chlimage_1-220

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

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

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

  1. /etc/designs/an-scf-sandbox/clientlibs​を右クリック

  2. ファイルを作成を選択…

  3. 名前​を入力:css.txt

  4. ファイルを作成を選択…

  5. 名前​を入力:js.txt

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

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コンポーネント🔗に必要なクライアント側ライブラリ(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 を含めます。

  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?lang=ja" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp?lang=ja"/>
<% 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 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