現在表示中:

ClientLibraryFolder(clientlibs)の追加

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

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

  1. CRXDE Lite を使用して、/etc/designs を展開します。
  2. an-scf-sandbox を右クリックし、「ノードを作成」を選択します。
    • 名前:clientlibs
    • タイプ:cq:ClientLibraryFolder
  3. OK」をクリックします。
chlimage_1

新しい 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. すべて保存」をクリックします。
chlimage_1

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

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

#base=.
style.css

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

body {

    background-color: #b0c4de;

}

SCF clientlib の埋め込み

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

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

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

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

  • 名前:embed
  • タイプ:String
  • 複数」をクリックします。
  • 値: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

 

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

 

chlimage_1

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

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

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

chlimage_1

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

 

chlimage_1

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

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

chlimage_1

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

この時点で、必要最低限のサンドボックスが作成されているので、パッケージとして保存します。保存しておくと、操作中にリポジトリが破損してもう一度やり直したい場合に、サーバーの電源をオフにし、フォルダー 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 を参照します>
      • 完了」をクリックします。
    • 保存」をクリックします。
  • ビルド」をクリックします。
これで、「ダウンロード」を選択してディスクに保存し、「パッケージをアップロード」を選択して他の場所にアップロードできます。また、詳細/レプリケーションを選択して、サンドボックスを localhost のパブリッシュインスタンスにプッシュし、サンドボックスの領域を拡張することもできます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー