Show Menu
トピック×

ランディングページ用のデザインインポーターの拡張と設定

ここでは、ランディングページ用にデザインインポーターを設定し、必要に応じて拡張する方法について説明します。読み込み後のランディングページの使用については、 ランディングページ を参照してください。
デザインインポーターでカスタムコンポーネントを抽出する
デザインインポーターにカスタムコンポーネントを認識させる論理的な手順を説明します。
  1. TagHandler の作成
    • タグハンドラーは、特定の種類の HTML タグを処理する POJO です。TagHandler が処理できる HTML タグの「種類」は、TagHandlerFactory の OSGi プロパティ「tagpattern.name」によって定義されます。この OSGi プロパティは本来、処理対象として入力された HTML タグと一致する正規表現です。ネストされたタグはすべて、タグハンドラーにスローされ処理されます。例えば、ネストされた <p> タグを含む div を登録した場合、<p> タグも TagHandler にスローされ、必要に応じて処理することができます。
    • タグハンドラーのインターフェイスは、SAX コンテンツファインダーのインターフェイスに似ています。SAX コンテンツファインダーは HTML タグごとに SAX イベントを受け取ります。タグハンドラーを提供する場合、特定のライフサイクルメソッドを実装する必要があります。このメソッドは、デザインインポーターのフレームワークによって自動的に呼び出されます。
  2. 対応するTagHandlerFactoryを作成します。
    • タグハンドラーファクトリは、タグハンドラーのインスタンスの生成を管理する OSGi コンポーネント(シングルトン)です。
    • タグハンドラーファクトリは、「tagpattern.name」と呼ばれる OSGi プロパティを公開する必要があります。このプロパティの値は、入力された HTML タグと一致します。
    • 入力htmlタグに一致する複数のタグハンドラーがある場合、上位のタグハンドラーが選択されます。 The ranking itself is exposed as an OSGi property service.ranking .
    • TagHandlerFactory は OSGi コンポーネントです。TagHandler に参照を提供する場合、その参照はこのファクトリを経由する必要があります。
  3. デフォルトを上書きする場合は、TagHandlerFactoryのランクがより適切であることを確認してください。

読み込み用の HTML の準備

インポーターページを作成したら、HTML ランディングページ全体を読み込むことができます。HTML ランディングページを読み込むには、最初にこのページのコンテンツを zip ファイルにしてデザインパッケージを作成する必要があります。デザインパッケージには、HTML ランディングページと、参照するアセット(画像、CSS、アイコン、スクリプトなど)が含まれます。
次のチートシートには、読み込み用に HTML を準備する方法の一例が示されています。
ランディングページのチートシート

zip ファイルのレイアウトと要件

この時点では、zip ファイルに 1 つの HTML ページ、またはページの一部分のみを含めることができます。
zip ファイルのレイアウトの例を以下に示します。
  • /index.html -> ランディングページの HTML ファイル
  • /css -> CSS clientlib への追加用
  • /img -> すべての画像とアセット
  • /js -> JS clientlib への追加用
このレイアウトは、HTML5 Boilerplate のレイアウトのベストプラクティスに基づいています。Read more at https://html5boilerplate.com/
少なくとも、デザインパッケージのルートレベルに index.html ファイルを​ 含める必要があります 。読み込むランディングページにモバイルバージョンがある場合は、この zip ファイルのルートレベルに mobile.index.html index.html を含める必要があります。

ランディングページの HTML の準備

HTML を読み込むには、キャンバス div をランディングページ HTML に追加する必要があります。
The canvas div is an html div with id="cqcanvas" that must be inserted within the HTML <body> tag and must wrap the content intended for conversion.
キャンバス div を追加した後のランディングページ HTML のスニペットの例を次に示します。
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>
<body>
 <div id="cqcanvas">
  <!-- HTML content intended for conversion -->
 </div>
</body>
</html>

HTML に編集可能な AEM コンポーネントを含める準備

ランディングページを読み込むとき、ページを現状維持で読み込むことができます。この場合、ランディングページの読み込み後、読み込まれたいずれの項目も AEM では編集できません(AEM コンポーネントをページに追加することは引き続き可能です)。
ランディングページを読み込む前に、ランディングページの一部のパーツを編集可能な AEM コンポーネントに変換することができます。これにより、ランディングページのデザインを読み込んだ後でも、ランディングページの一部をすばやく編集できます。
パーツを変換するには、読み込む HTML ファイル内の適切なコンポーネントに data-cq-component を追加します。
次の節では、HTML ファイルを編集し、ランディングページの特定のパーツをそれぞれ編集可能な AEM コンポーネントに変換する方法について説明します。 ランディングページコンポーネント で、コンポーネントについて詳しく説明します。
ランディングページのパーツを AEM コンポーネントに変換するための HTML マークアップには、長い形式と短縮形のタグ宣言の両方の形式があります。各コンポーネントで、両方の形式について説明しています。

制限事項

読み込みをおこなう前に、次の制限事項に注意してください。

&lt;body> タグに適用された class や id などの属性は保持されない

If any attribute like id or class is applied on the body tag for example <body id="container"> then it is not preserved after the import. So the design being imported should not have any dependencies on the attributes applied on the <body> tag.

zip ファイルのドラッグ&ドロップ

Internet ExplorerおよびFirefoxバージョン3.6以前では、ドラッグ&ドロップによるzipアップロードはサポートされていません。 これらのブラウザーの使用時にデザインをアップロードする場合は、ファイルのドロップ領域をクリックしてファイルのアップロードダイアログボックスを開き、そのダイアログを使用してデザインをアップロードします。
デザイン zip ファイルの「ドラッグ&ドロップ」をサポートするブラウザーは、Chrome、Safari 5.x、Firefox 4 以降です。

Modernizr はサポートされない

Modernizr.js は Javascript ベースのツールで、ブラウザーのネイティブ機能を検出し、この機能が HTML5 要素として適切かどうかを判断します。様々なブラウザーの古いバージョンのサポートを強化するために Modernizr が使用されているデザインを読み込むと、ランディングページソリューションで問題が発生する場合があります。 Modernizr.js スクリプトは、デザインインポーターではサポートされていません。

ページプロパティはデザインパッケージの読み込み時に保持されない

デザインパッケージを読み込む前に、ページプロパティ(カスタムドメイン、強制 HTTPS など)を(空白のランディングページテンプレートを使用する)ページに設定した場合、このプロパティはデザインが読み込まれた後に失われます。したがって、デザインパッケージを読み込んだ後でページプロパティを設定することをお勧めします。

HTML のみのマークアップを想定

読み込み時に、セキュリティ上の理由から、また、無効なマークアップが読み込まれて公開されないように、マークアップがサニタイズ削除されます。この場合、HTML のみのマークアップと、その他のあらゆる形式の要素(インライン SVG や Web コンポーネントなど)が除外されることを前提としています。

テキスト

テキストコンポーネント( foundation/components/text )をデザインパッケージ内の HTML に挿入するための HTML マークアップを次に示します。
<div data-cq-component="text"> <p>This is some editable text</p> </div>

上記のマークアップを HTML 内に含めると、次の操作がおこなわれます。
  • Creates an editable AEM text component ( sling:resourceType=foundation/components/text ) in the landing page created after importing the design package.
  • 作成されたテキストコンポーネントの text プロパティに、 div で囲まれた HTML を設定します。
短縮形のコンポーネントタグ宣言
<p data-cq-component="text">Text component shorthand</p>

リスト付きテキスト
次のリストを含むテキストを追加します。
  • 1 行目
  • 2 行目
これを RTE エディターで編集可能にします。
<div data-cq-component="text"><p>This is text with a list:</p><ul><li>1st</li><li>2nd</li></ul><p>It can be edited with the RTE editor</p></div>

色付きのテキスト
テキストを色(ピンク)付きで追加し、RTE エディターで編集できるようにします。
<div class="pink" data-cq-component="text"><p>This is pink text.</p><p>It can be edited with the RTE editor</p></div>

タイトル

HTML markup to insert a title component ( wcm/landingpage/components/title ) in the HTML within design package:
<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>

上記のマークアップを HTML 内に含めると、次の操作がおこなわれます。
  • Creates an editable AEM title component ( sling:resourceType=wcm/landingpage/components/title ) in the landing page created after importing the design package.
  • 作成されたタイトルコンポーネントの jcr:title プロパティに、div で囲まれた見出しタグ内のテキストを設定します。
  • type プロパティに見出しタグ(この場合は h1 )を設定します。
titleコンポーネントは、との7種類をサポートし h1, h2, h3, h4, h5, h6 ていま default す。
短縮形のコンポーネントタグ宣言
<h1 data-cq-component="title">Title component shorthand</h1>

画像

画像コンポーネント(foundation/components/image)をデザインパッケージ内の HTML に挿入するための HTML マークアップを次に示します。
<div data-cq-component="image">
<img src="img/video1.png" alt="Video about Polar Brake Goggles in action" title="Polar Brake Goggles" width="300" height="200" />
</div>

上記のマークアップを HTML 内に含めると、次の操作がおこなわれます。
  • Creates an editable AEM image component ( sling:resourceType=foundation/components/image ) in the landing page created after importing the design package.
  • 作成された画像コンポーネントの fileReference プロパティに、src 属性で指定された画像の読み込み先のパスを設定します。
  • Sets the alt property to the value of alt attribute in the img tag.
  • Sets the title property to the value of title attribute in the img tag.
  • Sets the width property to the value of width attribute in the img tag.
  • Sets the height property to the value of height attribute in the img tag.
短縮形のコンポーネントタグ宣言:
<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>

画像コンポーネントの div 内で絶対 URL の img src はサポートされない

If an <img> tag with an absolute url src is attempted for component conversion, an appropriate UnsupportedTagContentException is raised. 例えば、次のような記述はサポートされません。
<div data-cq-component="image">
<img src="https://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and PDF"/>
</div>
これ以外の、画像コンポーネントの div に含まれていない img タグの場合は、絶対 URL の画像がサポートされます。

コールトゥアクションコンポーネント

ランディングページの一部を「編集可能なコールトゥアクションコンポーネント」として読み込むためにマークすることができます。これにより読み込まれたコールトゥアクションコンポーネントは、ランディングページの読み込み後に編集できます。AEM には次のようなコールトゥアクション(CTA)コンポーネントが含まれています。
  • クリックスルーリンク:訪問者がクリックするとターゲット URL に移動するテキストリンクを追加できます。
  • グラフィックリンク:訪問者がクリックするとターゲット URL に移動する画像を追加できます。

リードフォーム

リードフォームは、訪問者(リード)のプロファイル情報を収集するために使用するフォームです。この情報を保存して後で使用し、この情報に基づき効果的なマーケティングをおこなうことができます。この情報には通常、タイトル、名前、電子メール、生年月日、住所、興味などがあります。これは「CTAリードフォーム」グループの一部です。
サポートされている機能
  • 事前定義済みのリードフィールド — サイドキックで、名、姓、住所、dob、性別、案内、userId、emailId、送信ボタンを使用できます。 必要なコンポーネントをリードフォームにドラッグ&ドロップするだけで使用できます。
  • これらのコンポーネントを使用して、作成者がスタンドアロンのリードフォームをデザインできます。これらのフィールドはリードフォームフィールドに対応しています。スタンドアロンまたは読み込んだzipアプリケーションでは、cq:formまたはctaリードフォームのフィールドを使用して、要件に従ってフィールドに名前を付け、デザインすることができます。
  • CTAリードフォームの特定の事前定義名(例:リードフォームの名のfirstName)を使用して、リードフォームフィールドをマッピングします。
  • リードフォームにマッピングされないフィールドは、cq:form コンポーネント(テキスト、ラジオボタン、チェックボックス、ドロップダウン、非表示、パスワード)にマッピングされます。
  • ユーザーは "label" タグを使用してタイトルを設定したり、スタイル属性 "class" を使用してスタイルを設定することができます(CTA リードフォームコンポーネントでのみ有効)。
  • 「ありがとうございます」ページと購読リストは、フォームの非表示のパラメーター(index.htmに存在)として提供するか、「リードフォームの開始」の編集バーから追加/編集することができます。
    <input type="hidden" name="redirectUrl" value="/content/we-retail/ja/user/register/thank_you"/>
    <input type="hidden" name="groupName" value="leadForm"/>
  • — 必須などの制約は、各コンポーネントの編集設定から指定できます。
HTML タグを使用して、読み込まれた zip ファイルにグラフィックリンクコンポーネントを含めます。ここでは、「firstName」がリードフォームの firstName にマッピングされたりしています。チェックボックスはこれらとは異なり、2 つのチェックボックスが cq:form ドロップダウンコンポーネントにマッピングされています。
<div id="cqcanvas">
   <div id="form_wrapper">
    <h2>NEWSLETTER SIGN UP</h2>
       <div data-cq-component="leadFormGeneration">
       <form method="post" action="#" onsubmit="return popupBox()">
       <label for="firstName" class="checkText">
        FIRST NAME
       </label><br />
       <input name="firstName" class="text pink" type="text" /><br />
       <label for="lastName" class="checkText">
        LAST NAME
       </label><br />
       <input name="lastName" class="text pink" type="text" /><br />
       <label for="emailId" class="checkText">
        EMAIL ADDRESS
       </label><br />
       <input name="emailId" class="text pink" type="text" /><br />

       <div class="checkboxes">
       <input type="checkbox" class="check" name="send_news" /> <label for="send_news" class="checkText">Send me the latest We.Retail news and announcements.</label><br />
       <input type="checkbox" class="check" name="send_offers" /> <label for="send_offers" class="checkText">Send me We.Retail deals and special offers.</label><br />
       </div>
       <input type="submit" name="submit" class="submit pink" value="Sign Up >" />
       </form>
     </div>
   </div>

段落システム(parsys)

AEM parsys コンポーネントは、他の AEM コンポーネントを含むことができるコンテナコンポーネントです。読み込んだ HTML に parsys コンポーネントを追加することができます。これにより、ランディングページが読み込まれた後も、ユーザーはこのページに対して編集可能な AEM コンポーネントの追加や削除をおこなうことができます。
段落システムでは、ユーザーがサイドキックを使用してコンポーネントを追加することができます。
parsys コンポーネント( foundation/components/parsys )をデザインパッケージ内の HTML に挿入するための HTML マークアップを次に示します。
<div data-cq-component="parsys">
   <div data-cq-component="title"><h2>ULTIMATE PROTECTION</h2></div>
        <div data-cq-component="title"><h3>ON SALE</h3></div>
</div>

上記のマークアップを HTML に含めるには、以下をおこないます。
  • デザインパッケージの読み込み後に作成されたランディングページに、AEM parsys コンポーネント(foundation/components/parsys)を挿入します。
  • サイドキックをデフォルトコンポーネントで初期化します。新しいコンポーネントをランディングページに追加するには、コンポーネントをサイドキックから parsys コンポーネントにドラッグします。
  • 2 つのタイトルコンポーネントも parsys に含まれます。

ターゲット

ターゲットコンポーネントには、ページ上のエクスペリエンスのコンテンツが表示されます。キャンペーン内にエクスペリエンスを多数作成することができ、ターゲットコンポーネントには、ページを訪問する多様なユーザーに対して様々なエクスペリエンスからのコンテンツを動的に表示することができます。
ターゲットコンポーネントを挿入し、またキャンペーン内に様々なエクスペリエンスを作成するための HTML マークアップを次に示します。
<div data-cq-component="target">
 <section data-cq-component="experience" data-cq-experience="default">
  <p data-cq-component="text">Default content. Select this campaign in client context to view other experiences</p>
 </section>

 <section data-cq-component="experience" data-cq-segment="over-30">
  <p data-cq-component="text">Content for Over 30</p>
 </section>

 <section data-cq-component="experience" data-cq-segment="under-30">
  <p data-cq-component="text">Content for Under 30</p>
 </section>
</div>

その他の読み込みオプション

デザインパッケージを読み込む前には、読み込まれるコンポーネントを編集可能な AEM コンポーネントにするかどうかだけではなく、次のような設定もおこなえます。
  • 読み込まれた HTML で定義されているメタデータを抽出し、ページプロパティを設定する。
  • HTML での文字セットのエンコーディングを指定する。
  • インポーターページテンプレートをオーバーレイする。

読み込まれた HTML で定義されているメタデータを抽出し、ページプロパティを設定

読み込まれた HTML の冒頭で宣言されている次のメタデータは、デザインインポーターによって「jcr:description」プロパティとして抽出され保持されます。
  • <meta name="description" content="">
HTML タグに設定されている lang 属性セットは、デザインインポーターによって「jcr:language」プロパティとして抽出され保持されます。
  • <html lang="en">

HTML での文字セットのエンコーディングの指定

デザインインポーターは、読み込まれた HTML で指定されているエンコーディングを読み取ります。エンコーディングは次のように指定できます。
<meta charset="UTF-8">
または
<meta http-equiv="content-type" content="text/html;charset=utf-8">
読み込まれた HTML でエンコーディングが指定されていない場合、デザインインポーターによって設定されるデフォルトのエンコーディングセットは UTF-8 です。

テンプレートのオーバーレイ

The Blank Landing Page template can be overlayed by creating a new one at: /apps/<appName>/designimporter/templates/<templateName>
Steps for creating a new template in AEM are explained here .

ランディングページにあるコンポーネントの参照

data-cq-component 属性を使用して HTML で参照したいコンポーネントがあり、デザインインポーターによってコンポーネントにこの参照の場所が含まれるようにするとします。e.g., you want to reference the table component ( resourceType = /libs/foundation/components/table ). この場合、HTML に次の行を追加する必要があります。
<div data-cq-component="/libs/foundation/components/table">foundation table</div>
data-cq-component 内のパスは、コンポーネントの resourceType で指定されたパスにする必要があります。

ベストプラクティス

次に示すような CSS セレクターを、読み込み時のコンポーネントの変換用にマークする要素と共に使用することは推奨されません。
E > F
F 要素は E 要素の子
E &gt; F
F 要素の直前に E 要素
E ~ F
F 要素の前に E 要素
E:root
E 要素はドキュメントのルート
E:nth-child(n)
E 要素は親の n 番目の子
E:nth-last-child(n)
E 要素は親の最後から n 番目の子
E:nth-of-type(n)
E 要素はこのタイプの n 番目の兄弟
E:nth-last-of-type(n)
E 要素はこのタイプの最後から n 番目の兄弟
読み込み後に生成された HTML には <div> タグなどその他の HTML 要素も追加されるので、推奨されません。
  • 上記と同じような構造に依存するスクリプトを、AEM コンポーネントへの変換用にマークする要素と共に使用することも推奨されません。
  • <div data-cq-component="&ast;">のように、コンポーネント変換用のマークアップタグにスタイルを使用することはお勧めしません。
  • デザインレイアウトは、HTML5 Boilerplate のベストプラクティスに従って作成する必要があります。Read more on: https://html5boilerplate.com/ .

OSGi モジュールの設定

OSGIコンソールを介して設定可能なプロパティを公開するコンポーネントは、次のとおりです。
  • ランディングページデザインインポーター
  • ランディングページビルダー
  • モバイルランディングページビルダー
  • ランディングページエントリプリプロセッサー
プロパティについて、以下の表で簡単に説明します。
コンポーネント プロパティ名 プロパティの説明
ランディングページデザインインポーター Extract Filter 抽出したファイルのフィルター時に使用する正規表現のリスト。 指定したいずれかのパターンに一致する zip エントリは、抽出から除外されます。
ランディングページビルダー File Pattern ランディングページビルダーは、ファイルパターンで定義された正規表現に一致するHTMLファイルを処理するように設定できます。
モバイルランディングページビルダー File Pattern ランディングページビルダーは、ファイルパターンで定義された正規表現に一致するHTMLファイルを処理するように設定できます。
Device Groups サポートされるデバイスグループのリスト。
ランディングページエントリプリプロセッサー Search Pattern アーカイブエントリコンテンツ内で検索するパターン。この正規表現は、エントリコンテンツの行ごとに一致します。 一致する場合、一致するテキストは指定した置換パターンに置換されます。 ランディングページエントリプリプロセッサーの現在の制限事項については、下記のメモを参照してください。
Replace Pattern 一致が見つかったときに置換するパターン。$1、$2などのregexグループ参照を使用できます。 また、このパターンは、読み込み時に実際の値で解決される{designPath}などのキーワードもサポートします。
ランディングページエントリプリプロセッサーの現在の制限事項 検索パターンに変更を加える必要がある場合、Felix プロパティエディターを開いたとき、バックスラッシュ文字を手動で追加し正規表現のメタ文字をエスケープ処理する必要があります。バックスラッシュ文字を手動で追加しない場合、正規表現が無効と見なされ、検索前のものが置き換えられません。
例えば、デフォルト設定が
/\&ast *CQ_DESIGN_PATH **/ *(['"])
And you need to replace CQ_DESIGN_PATH with VIPURL in the search pattern, then your search pattern should look like this:
/* *VIPURL **/ *(['"])

トラブルシューティング

デザインパッケージの読み込み時に発生する可能性のあるいくつかのエラーについて説明します。

ランディングページに関連するコンポーネントによるサイドキックの初期化

デザインパッケージに parsys コンポーネントのマークアップが含まれる場合、読み込み後のサイドキックには最初、ランディングページに関連するコンポーネントが表示されます。新しいコンポーネントを、ランディングページ内の parsys コンポーネントにドラッグ&ドロップすることができます。また、デザインモードに移動して、新しいコンポーネントをサイドキックに追加することもできます。

読み込み時に表示されるエラーメッセージ

エラーが発生した場合(例:読み込んだパッケージが有効なzipでない場合)、デザインの読み込みはパッケージを読み込まず、ページの上部でドラッグ&ドロップボックスのすぐ上にエラーメッセージを表示します。 エラーが発生するシナリオの例を以下に示します。エラーを修正したら、更新した zip ファイルを同じ空白のランディングページに再読み込みすることができます。次のような様々なシナリオでエラーがスローされます。
  • 読み込まれたデザインパッケージが有効な zip アーカイブではない。
  • 読み込まれたデザインパッケージには、最上位レベルのindex.htmlが含まれていません。

読み込み後に表示される警告

警告(HTMLがパッケージ内に存在しない画像を参照する場合など)が発生した場合、デザインインポーターはzipを読み込みますが、結果ウィンドウに雑誌号/警告のリストを表示します。雑誌号リンクをクリックすると、デザインパッケージ内の問題を示す警告のリストが表示されます。 デザインインポーターで警告が取得および表示されるシナリオは、次のとおりです。
  • HTMLとは、パッケージ内に存在しない画像を指します。
  • HTMLとは、パッケージ内に存在しないスクリプトを指します。
  • HTMLは、パッケージ内に存在しないスタイルを参照します。

Where are the files of the ZIP file being stored in AEM?

ランディングページが読み込まれた後、デザインパッケージ内のファイル(画像、CSS、js など)はAEM の次の場所に格納されます。
/etc/designs/default/canvas/content/campaigns/<name of brand>/<name of campaign>/<name of landing page>
ランディングページが We.Retail キャンペーンに作成され、このランディングページの名前が myBlankLandingPage である場合、zip ファイルが格納される場所は次のとおりです。
/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage

保持されない書式

CSS を作成するときには、次の制限事項に注意してください。
テキストと(編集可能な)画像が次のような場合:
<div class="box">
<p><div data-cq-component="image"><img src="assets/image.jpg" width="115"
height="116" /></div>Some Text </p>
</div>

さらに、CSS が次のように box クラスに適用されている場合:
.box

{ width: 450px; padding:10px; border: 1px #C5DBE7 solid; margin: 0px auto 0 auto; background-image:url(assets/box.gif); background-repeat:repeat-x,y; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; }

box img がデザインインポーターで使用され、読み込んだ後のランディングページは書式が保持されていないように見えます。この問題の回避策として、AEM では CSS に div タグが追加され、その結果コードが書き換えられるということに注意してください。これを怠ると、CSS ルールが無効になる場合があります。
.box img

{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }

Also, designers should be aware that only code inside the id=cqcanvas tag is recognized by the importer, otherwise design is not preserved.