現在表示中:

CQ には、既存の Web サイトを取得して次の基盤を設定するためのサイトインポーターがあります。

  • プロトタイプ
  • 概念実証プロジェクト
  • 新規開発プロジェクト

そのために、サイトインポーターでは次の処理を行います。

  • 既存の Web サイトページのデザインの読み込み
    • /etc/designs/<project name>
  • そのページの HMTL コンテンツの読み込み 
    これは(読み込まれたページから取得した HTML を格納する)1 つの parsys コンポーネントですべて行われ、個別の適切な CQ コンポーネントには分割されません。
    • /content/<project name>
  • テンプレートの派生
    • /apps/<project name>/templates/contentpage
  • 最初のコンポーネントの派生
    • /apps/<project name>/components/contentpage
  • MSM ブループリントの派生
    • /etc/blueprints/<project name>
  • キャンペーンの派生
    • /content/campaigns/<project name>
  • すべてのパスに対応するコンテンツパッケージの作成
    • /packages/<project name>.zip

読み込みが完了すると、読み込まれたリソースと派生したリソースをすぐに使用できますが、各ページは同じになります。そのため、読み込まれた要素をさらに開発してプロジェクトをカスタマイズできます。

既存の Web サイトを読み込んでカスタマイズする通常のワークフローでは、以下の処理が行われます。

  1. サイトインポーターを使用して既存の Web ページを読み込みます。
  2. コンポーネント抽出を使用して、読み込まれた HTML からコンポーネントを抽出します。
  3. 抽出したコンポーネント、デザイン、キャンペーンなどに対して必要なカスタマイズを行います。CRXDE または CRXDE Lite を使用して開発を行うことができます。
  4. コンポーネント(生成されたコンポーネントまたは標準の CQ コンポーネント)とテンプレートとの間のマッピングを生成して、新機能を使用できるようにします。ここでもコンポーネント抽出を使用します。
  5. 更新されたテンプレートを使用して新しいページを生成します。

既存のサイトからの Web ページの読み込み

最初の読み込みを実行するには:

  1. ツールコンソール(http://<server>:<port>/miscadmin#/etc)に移動します。

  2. 左側のウィンドウで「インポーター」を選択します。

  3. サイトインポーター」をダブルクリックして開きます。

  4. 以下の詳細を指定します。

    • プロジェクトタイトル:CQ に読み込まれる Web サイトの名前。フォルダー名として使用されます。
    • サイトの URL:読み込む Web サイトページの URL。
    • サムネイル:テンプレートに使用する画像。
    • 上書き:CQ の既存のサイトを上書きする場合にオンにします。
    • サイトマップ:結果のテンプレートを使用して CQ で作成するページ。新しい行のそれぞれの名前によって新しいページが作成され、子ページにインデント(単一のスペース)が使用されます。
    • コンポーネントから拡張:このオプションのパラメーターはコンポーネントの選択リストを提供します。コンポーネントを 1 つ選択して、生成されるフィールドをそのコンポーネントから拡張するように指定します。例えば、モバイルサイトを作成する場合に使用します。
  5. サイトを読み込む」をクリックして開始します。進行状況がログに表示されます。

    展開(または圧縮)する行をクリックして、詳細を表示(または非表示に)します。

Web サイトページが読み込まれたら、AEM を使用して、作成された新しいページを確認できます。前述の例では、en ページが作成されます。

CRXDE Lite を使用して、リポジトリへの追加を確認できます。

コンポーネント定義の抽出

基本の読み込みが完了したら、新しいコンポーネントを抽出できます。

  1. サイトインポーターで、「コンポーネントを挿入」をクリックします。

    注意:

    サイトインポーターを閉じた場合は、CRXDE Lite を使用して抽出ページに戻る必要があります。

    /etc/designs/<project name>/dev/<project name>-original.html

    このファイルをクリックし、コンテキストメニューを使用して、開くコンポーネント抽出を選択します。その後で、この節の手順に従ってください。

  2. コンポーネント抽出に以下の項目が表示されます。

    • 使用可能なコンポーネント - サイドキックとして
    • HTML として読み込まれたページ
    • マッピング - CQ コンポーネントと HTML 範囲との間の関係

    ここからコンポーネントの抽出および派生元の領域を選択できます。

  3. 選択」をクリックします。

  4. 抽出するページの領域(HTML 構成)を選択します。

    必要な領域を選択できない場合は、最も近い領域を選択し、右側の「ドキュメントツリー」を使用して DOM の上位/下位を移動できます。別の HTML 構成を選択した場合は、選択領域に反映されます。

  5. 抽出」をクリックします。生成するコンポーネントの詳細をダイアログで指定できます。

    パス コンポーネントの抽出先のパスを選択します。
    ラベル ラベルを追加します。このフィールドは必須です。
    上書き コンポーネントが既に存在する場合は、このチェックボックスをオンにすると、既存のコンポーネントが上書きされます。
    タイトル コンポーネントの名前。
    説明 (オプション)コンポーネントの説明。
    グループ コンポーネントを表示するグループ。
    スーパータイプ コンポーネントのスーパータイプのパス。
    許可された親 許可されている親を示します。デフォルトでは、*/parsys です。
  6. 作成」をクリックして、選択した HTML を基に指定されたコンポーネントを生成します。

  7. デザインモードで parsys を編集する際に新しいコンポーネントにアクセスできるようになります。

注意:

多くの場合、自動抽出の後でコンポーネントダイアログをカスタマイズする必要があります。例えば、componentGroup を指定して、段落システムの「許可されたコンポーネント」のリストにコンポーネントを追加します(デザインモードの場合)。

詳しくは、コンポーネントを参照してください。

新しいコンポーネントを抽出で使用可能にする方法

デフォルト設定の場合、コンポーネント抽出で表示されるのは、「コンポーネント」の下の foundation/components のコンポーネントのみです。

新しく抽出するコンポーネントを次の手順で追加できます。

  1. CRXDE を開きます。
  2. /etc/importers/site/extractor を選択します。
  3. displayComponents」をダブルクリックして編集ダイアログを開き、新しいコンポーネントのパスを追加します。
  4. 表示する順序を設定し、「OK」をクリックして保存します。

コンポーネントへのマッピングの作成

特定のコンポーネントへのマッピングを作成するには:

  1. コンポーネントで置き換える HTML のセクションを選択します。

  2. 必要なコンポーネント(例:リスト)を選択して、選択した領域にドラッグします。

  3. マッピングが作成されて、以下の項目が表示されます。

    • エレメント:マッピングされる HTML 範囲
    • コンポーネント:このエレメントにマッピングされるコンポーネント
    • パス:コンテナコンポーネント(parsys)の下の(JCR の)場所またはコンポーネントインスタンスのコンテンツが格納されるページコンテンツの定義に使用するパスを指定します。「パス」に値を割り当てる必要があります。
  4. 値を追加する「パス」をダブルクリックします。

  5. 生成」をクリックします。

  6. これで、テンプレートを使用して新しいページを作成する際に、指定の場所でコンポーネントを使用できるようになります。

段落システムへのマッピングの作成

基本的に、これはコンポーネントへのマッピングの追加のバリエーションですが、テンプレートのユーザーには段落システムが提供されます。これにより、提供される段落システムに割り当てたコンポーネントを使用してコンテンツを追加できます。

  1. 段落システムで置き換える HTML のセクションを選択します。

  2. 必要なコンポーネント(Paragraphsystem)を選択します。

  3. HTML の選択領域にドラッグします。

  4. 新しいマッピングが追加されます。パスを指定します。

  5. 生成」をクリックします。

  6. これで、テンプレートを使用して新しいページを作成する際に、指定の場所で段落システムを使用できるようになります。

  7. デザインモードに切り替えて、必要なコンポーネントをこの段落システムに対してアクティベートします。割り当てが完了したコンポーネントを選択して追加できます。これで、コンポーネントを確認できるようになります(この例では、コンポーネントがカスタマイズされている実際のシナリオで、単純に元の HTML を使用しています)。

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

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