現在表示中:

はじめに

このチュートリアルを参照すると、既存の Web サイトに基づいて、CQ5 で Web サイトをすぐに作成できます。主なターゲットは、プロジェクトの概念実証に備えている Day のプリセールススタッフおよび Day のパートナーです。必要なのは、CQ5 WCM、CRXDE および Web ブラウザーのみです。

アプリケーション、コンテンツページテンプレート、コンテンツページコンポーネントおよび Web ページの作成

  1. CRX Explorer で、ノード apps/geometrixx をコピーし、ターゲットノードに <customername> という名前を付けて、apps の下に貼り付けます。

  2. テンプレート apps/<customername>/templates/contentpage のタイトル(jcr:title プロパティ)を、<Customername> Content Page Template に設定します。

  3. サムネイル /apps/<customername>/templates/contentpage/thumbnail.png を、テンプレートを表すものに置き換えます。

    • PNG 画像を、128 x 98 px の大きさで作成します。

    • ファイルシステムで、この画像をコピーして /apps/<customername>/templates/contentpage/ 内に貼り付けます。

  4. テンプレート /apps/<customername>/templates/contentpage のプロパティ allowedPaths を /content(/.*)? に設定し、/content の下のすべての新しいページでテンプレートを使用できるようにします。

  5. ノード /apps/<customername>/templates/contentpage/jcr:content のプロパティ resourceType を <customername>/components/contentpage に設定します。

  6. CRXDE で、コンポーネント /apps/<customername>/components/contentpage の下に、contentpage.jsp というファイルを作成します。

  7. 以下のコードをコピーして、スクリプト contentpage.jsp に貼り付けます。

    <%@page session="false" contentType="text/html; charset=utf-8" %><% %><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><% %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <%@include file="/libs/foundation/global.jsp" %><% %><head> <cq:include script="/libs/wcm/core/components/init/init.jsp"/> <% currentDesign.writeCssIncludes(out); %> MyCustomerHead </head> <body> MyCustomerBody </body> </html>
  8. ブラウザーで、「Web サイト」タブを開きます。

  9. 「Web サイト」の下に、タイトル www.<customername>.com、ラベル <customername>、<Customername> Content Page Template として新しいページを作成します。

  10. www.<customername>.com ページの下に、タイトル English、ラベル en、<Customername> Content Page Template として新しいページを作成します。必要に応じて、タイトル French、ラベル fr のページと、タイトル German、ラベル de のページを作成します。

  11. English ページの下に、カスタマーサイトのサイトマップを再現するために必要な数のページを作成します。

デザイナーの設定

  1. CRX Explorer で、ノード /etc/designs/geometrixx をコピーし、ターゲットノードに <customername> という名前を付けて、/etc/designs の下に貼り付けます。

  2. contentpage.jsp で、適切な場所に <% currentDesign.writeCssIncludes(out); %> を挿入します。

  3. CRXDE で、ファイル /etc/designs/<customername>/static.css を開いて、ニーズに合わせてスタイルを適応します。

  4. ページを <customername> デザイナーにリンクします。まず、CRX Explorer でノード /content/<customername>/jcr:content を選択し、プロパティ cq:designPath をダブルクリックして、値として /etc/designs/<customername> を設定します。

元の Web ページ(CSS、HTML および画像)のプロジェクトへの読み込み

  1. Firefox で、読み込むページを参照し、「名前を付けてページを保存」を選択し、ファイル名として <customername> を入力して、デスクトップ上に保存します。

  2. ダウンロードした Web サイトをデスクトップ上でテストします。まず、ダウンロードした <customername>.htm ファイルをブラウザーで開き、結果を元の Web サイトと比較します。異なっている場合は、ファイルをテキストエディターで開いて問題を修正します。問題の原因は、CSS ファイルや画像のパスである場合が多く、正しくリセットする必要があります。

  3. ファイルシステムで、Web ページのすべてのリソース(HTML、CSS、画像など)を zip ファイルにまとめます。

  4. CRX Explorer で、ノード /apps/<customername>/components/contentpage の下に新しいノードを作成し、名前を resources、タイプを sling:Folder に設定します。

  5. CRX コンテンツローダーで、zip ファイルを読み込んで、ノード /apps/<customername>/components/contentpage/resources に解凍します。

    • http://localhost:4502/crx/loader/index.jsp を参照します。

    • 「読み込み用ルートパス」の横の「参照」をクリックし、ノード /apps/<customername>/components/contentpage/resources を参照して、「開く」をクリックします。

    • 「アップロードするファイル」の横の「参照」をクリックし、作成した zip ファイルを参照して「開く」をクリックします。

    • 「自動展開」チェックボックスと「選択したルートの直下のファイルコンテンツを展開」チェックボックスをチェックします。

    • 「読み込み」をクリックします。

    通常のプロジェクト設定では、コンポーネントの下にリソースが配置されることはありません。ここでは、効率を最大限にするために、そうしているだけです。

  6. CRXDE で、ファイル <customername>.html を開き、<head> タグと </head> タグの間のコンテンツをコピーします。スクリプト contentpage.jsp で、MyCustomerHead を選択して、コピーしたコンテンツを貼り付けます。

  7. ファイル <customername>.html で、<body> タグと </body> タグの間のコンテンツをコピーします。スクリプト contentpage.jsp で、MyCustomerBody を選択して、コピーしたコンテンツを貼り付けます。

  8. スクリプト contentpage.jsp で、<customername>_files を /apps/<customername>/components/contentpage/resources に置き換えて、CSS ファイルおよび画像のパスをリセットします。

    リソース名の先頭文字が _(アンダースコア)でないことを確認してください。

  9. スクリプト contentpage.jsp で、すべての外部リンクを内部リンクに置き換えます。こうすると、マシンがオンラインでないときでも、外部リンクが破損しているようには表示されません。

  10. ブラウザーの「Web サイト」タブで、ページ www.<customername>.com を開きます。<customername> Web ページが表示されます。

CQ 基盤コンポーネントを使用して静的コンテンツを動的コンテンツに置換

  1. CRXDE のファイル contentpage.jsp で、ページの中央部分のコンテンツを選択して、<cq:include path="par" resourceType="foundation/components/parsys" /> に置き換えます。コンテンツは parsys 基盤コンポーネントに置き換えられました。

  2. ブラウザーで、ページを更新します。これで、段落システムの機能が使用可能になりました。Flash、テキスト、テキスト画像など、他のコンポーネントを含めることができます。

  3. 上記の手順に従って、topnav や toolnav など、他の CQ 基盤コンポーネントを追加できます。

  4. ブラウザーの「Web サイト」タブで、アプリケーションから選んだページを開きます。元の Web ページのコンテンツをコピーして、自分のページに貼り付けます。

  5. 元の Web サイトと同じデザインに見えるように、デザインを適応させます。

Media Library の作成

  1. ブラウザーで、元の Web サイトから、およそ 20 個のリソース(画像、バナー、PDF など)をダウンロードします。Google ページを開き、"site:<customer-url>" と入力し、検索ボタンをクリックして「画像」タブをクリックします。必要なリソースをコンピューターに保存します。

  2. ファイルシステムで、すべてのリソースを zip ファイルにまとめます。

  3. CRX コンテンツローダーで、zip ファイルを読み込んで、ノード content/dam/<customername> に解凍します。これで、リソースは Media Library に配置され、ページを参照する際にコンテンツファインダーで使用できます。

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

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