ここでは、ランディングページのデザインインポーターを設定し、必要に応じて拡張する方法について説明します。 読み込み後のランディングページの使用については、 ランディングページ。
デザインインポーターにカスタムコンポーネントを抽出させる
次に、デザインインポーターがカスタムコンポーネントを認識するための論理的な手順を示します。
TagHandler の作成
対応する TagHandlerFactory を作成します。
デフォルトの順位を変更する場合は、必ず TagHandlerFactory でより望ましい順位を設定します。
ランディングページの読み込みに使用するデザインインポーター はAEM 6.5 で非推奨(廃止予定)になりました。.
インポーターページを作成したら、完全なHTMLランディングページを読み込むことができます。 HTMLのランディングページを読み込むには、まずその内容をデザインパッケージに zip 形式で圧縮する必要があります。 デザインパッケージには、HTMLのランディングページと参照元のアセット(画像、CSS、アイコン、スクリプトなど)が含まれています。
次のチートシートは、読み込み用のHTMLの準備方法の例です。
ランディングページ参照シート
この時点で、ZIP ファイルには、1 つのHTMLページまたは 1 つのページの一部のみ含めることができます。
zip のレイアウト例を次に示します。
このレイアウトは、HTML5 Boilerplate のレイアウトのベストプラクティスに基づいています。詳しくは、https://html5boilerplate.com/ を参照してください。
少なくとも、デザインパッケージ 必須 含む index.html ファイルをルートレベルに配置します。 読み込むランディングページにモバイルバージョンも含まれている場合、zip ファイルには mobile.index.html ~と一緒に index.html をルートレベルに設定します。
HTMLを読み込むには、ランディングページHTMLにキャンバス div を追加する必要があります。
canvas div は id="cqcanvas"
を含む HTML div です。この div を HTML の <body>
タグ内に挿入し、変換対象のコンテンツを囲む必要があります。
キャンバス 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>
ランディングページを読み込む場合、ページをそのまま読み込むこともできます。つまり、ランディングページを読み込んだ後は、読み込んだ項目をAEMで編集することはできません ( ページにAEMコンポーネントを追加できます )。
ランディングページを読み込む前に、ランディングページの一部のパーツを編集可能な AEM コンポーネントに変換することができます。これにより、ランディングページのデザインが読み込まれた後でも、ランディングページの一部をすばやく編集できます。
パーツを変換するには、読み込む HTML ファイル内の適切なコンポーネントに data-cq-component
を追加します。
次の節では、ランディングページの特定の部分を様々な編集可能なAEMコンポーネントに変換できるようにHTMLファイルを編集する方法について説明します。 コンポーネントについて詳しくは、 ランディングページコンポーネント.
ランディングページの一部をAEMコンポーネントに変換するHTMLマークアップは、長い形式と短縮形のタグ宣言の両方を持ちます。 それぞれのコンポーネントについて説明します。
読み込む前に、次の制限事項に注意してください。
id や class などの属性が body タグに適用されている場合(例:<body id="container">
)、この属性は読み込み後に保持されません。したがって、読み込むデザインは、<body>
タグに適用されている属性に依存しないようにしてください。
ドラッグ&ドロップによる zip ファイルのアップロードは、Internet Explorer および Firefox バージョン 3.6 以前ではサポートされていません。これらのブラウザーを使用してデザインをアップロードするには、ファイルのドロップゾーンをクリックしてファイルのアップロードダイアログボックスを開き、そのダイアログを使用してデザインをアップロードします。
デザイン zip の「ドラッグ&ドロップ」をサポートするブラウザーは、Chrome、Safari5.x、Firefox 4 以降です。
Modernizr.js
は、ブラウザーのネイティブ機能を検出し、html5 要素に適しているかどうかを検出する JavaScript ベースのツールです。 様々なブラウザーの古いバージョンのサポートを強化するために Modernizr が使用されているデザインを読み込むと、ランディングページソリューションで問題が発生する場合があります。Modernizr.js
スクリプトは、デザインインポーターではサポートされていません。
デザインパッケージを読み込む前にページ用に設定されたページプロパティ(カスタムドメイン、HTTPS の適用など)は、デザインが読み込まれると失われます。 したがって、デザインパッケージを読み込んだ後でページのプロパティを設定することをお勧めします。
読み込み時には、セキュリティ上の理由から、マークアップが不要になり、無効なマークアップの読み込みと公開を避けるために、不要なマークアップが削除されます。 この場合、HTMLのみのマークアップと、インラインSVGや Web コンポーネントなどの他の形式の要素がすべて除外されると想定します。
テキストコンポーネント(foundation/components/text
)をデザインパッケージ内の HTML に挿入するための HTML マークアップを次に示します。
<div data-cq-component="text"> <p>This is some editable text</p> </div>
上記のマークアップを HTML 内に含めると、次の操作がおこなわれます。
sling:resourceType=foundation/components/text
)を作成します。text
プロパティに、div
で囲まれた HTML を設定します。短縮形のコンポーネントタグ宣言:
<p data-cq-component="text">Text component shorthand</p>
リストを含むテキスト
リストを含むテキストを追加するには:
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>
タイトルコンポーネント(wcm/landingpage/components/title
)をデザインパッケージ内の HTML に挿入するための HTML マークアップを次に示します。
<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>
上記のマークアップを HTML 内に含めると、次の操作がおこなわれます。
sling:resourceType=wcm/landingpage/components/title
)を作成します。jcr:title
プロパティに、div で囲まれた見出しタグ内のテキストを設定します。type
プロパティに見出しタグ(この場合は h1
)を設定します。タイトルコンポーネントは、次の 7 つのタイプをサポートします。 h1, h2, h3, h4, h5, h6
および default
.
短縮形のコンポーネントタグ宣言:
<h1 data-cq-component="title">Title component shorthand</h1>
HTMLコンポーネント (foundation/components/image) をデザインパッケージ内の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 内に含めると、次の操作がおこなわれます。
sling:resourceType=foundation/components/image
)を作成します。fileReference
プロパティに、src 属性で指定された画像の読み込み先のパスを設定します。alt
プロパティに、img タグ内の alt 属性の値を設定します。title
プロパティに、img タグ内の title 属性の値を設定します。width
プロパティに、img タグ内の width 属性の値を設定します。height
プロパティに、img タグ内の height 属性の値を設定します。短縮形のコンポーネントタグ宣言:
<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>
コンポーネントを変換するために、絶対 URL の src を持つ<img>
タグを設定すると、対応する UnsupportedTagContentException が発生します。例えば、次のような記述はサポートされません。
<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 コンポーネントが含まれています。
この CTA コンポーネントを使用して、ランディングページにテキストリンクを追加できます。
サポートされるプロパティ
HTMLタグを使用して、読み込んだ zip ファイルにクリックスルーコンポーネントを含めます。 ここで、href はターゲット URL に、「製品の詳細を表示」はラベルにマッピングされます。
<div id="cqcanvas">
.
.
<div data-cq-component="clickThroughLink">
<a href="/content/we-retail/us/en/products/equipment/snow-sports/flying-snowboard.html">View Product Details ></a>
</div>
.
.
</div>
このコンポーネントは、任意のスタンドアロンアプリケーションで使用することも、zip から読み込むこともできます。
短縮形のコンポーネントタグ宣言:
<a href="/somelink.html" data-cq-component="clickThroughLink">Click Through Link shorthand</a>
この CTA コンポーネントを使用して、ランディングページにリンクを含む任意のグラフィカル画像を追加できます。 画像は、単純なボタンでも、背景としての任意のグラフィカル画像でもかまいません。 画像をクリックすると、コンポーネントプロパティで指定されたターゲット URL に移動します。 これは「コールトゥアクション」グループの一部です。
サポートされるプロパティ
HTML タグを使用して、読み込まれた zip ファイルにグラフィックリンクコンポーネントを含めます。ここでは、href がターゲット URL にマッピングされ、img src がレンダリング画像で、「title」がホバーテキストとして取られます。
<div id="cqcanvas">
<div data-cq-component="clickThroughGraphicalLink"><a href="https://www.adobe.com/go/wem"><img src="img/call-to-action-button.png" title="Click Here to Learn More" /></a></div>
</div>
短縮形のコンポーネントタグ宣言:
<a href="/somelink.html" data-cq-component="clickThroughGraphicalLink"><img src="linkimage.png" alt="Click Through Graphical Link shorthand"/></a>
クリックスルーグラフィックリンクを作成するには、アンカータグと画像タグを div の中に data-cq-component="clickthroughgraphicallink"
属性で囲む必要があります。
例:<div data-cq-component="clickthroughlink"> <a href="https://myURLhere/"><img src="image source here"></a> </div>
CSS を使用して画像をアンカータグに関連付けるその他の方法はサポートされていません。 例えば、次のマークアップは機能しません。
<div data-cq-component="clickthroughgraphicallink">
<a class="hasBackground" href="https://myURLhere/"></a>
</div>
関連する css .hasbackground { background-image: pathtoimage }
とともに
リードフォームとは、訪問者/リードのプロファイル情報を収集するために使用されるフォームです。 この情報を保存し、後でその情報に基づいて効果的なマーケティングを行うのに使用できます。 この情報には、通常、タイトル、名前、E メール、生年月日、住所、興味などが含まれます。 このコンポーネントは「CTA リードフォーム」グループに含まれています。
サポートされている機能
事前定義されたリードフィールド - 名、姓、住所、生年月日、性別、詳細情報、ユーザー ID、メール ID、送信ボタンがサイドキックで使用できます。必要なコンポーネントをリードフォームにドラッグ&ドロップするだけで使用できます。
これらのコンポーネントを使用して、作成者がスタンドアロンのリードフォームをデザインできます。これらのフィールドはリードフォームフィールドに対応しています。スタンドアロンまたは読み込まれた zip アプリケーションでは、cq:form または cta リードフォームのフィールド、名前、および要件に従って設計を使用して、追加のフィールドを追加できます。
特定の事前定義された CTA リードフォーム名を使用してフォームフィールドをマッピングします。例えば、firstName をリードフォームの名にマッピングしたりします。
リードフォームが cq:form コンポーネントにマッピングされないフィールド(テキスト、ラジオ、チェックボックス、ドロップダウン、非表示、パスワード)。
ユーザーは「ラベル」タグを使用してタイトルを設定し、スタイル属性「クラス」を使用してスタイルを設定することができます(CTA リードフォームコンポーネントでのみ使用可能)。
「ありがとうございます」ページや購読リストをフォームの非表示パラメーターとして設定(index.htm 内)するか、「リードフォームの最初」の編集バーから追加または編集することができます。
<input type="hidden" name="redirectUrl" value="/content/we-retail/en/user/register/thank_you"/>
<input type="hidden" name="groupName" value="leadForm"/>
required(必須)などの制約を、各コンポーネントの編集設定から指定することができます。
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>
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に含めると、次の処理がおこなわれます。
ターゲットコンポーネントは、ページ上のエクスペリエンスのコンテンツを表示します。 1 つのキャンペーンで多数のエクスペリエンスを作成でき、ターゲットコンポーネントで、異なるエクスペリエンスのコンテンツを、ページを訪問する様々なユーザーに動的に表示できます。
ターゲットコンポーネントを挿入し、キャンペーン内に様々なエクスペリエンスを作成するための 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の先頭で宣言された次のメタデータは、デザインインポーターによってプロパティ「jcr:description」として抽出され、保持されます。
HTMLタグに設定された Lang 属性は、デザインインポーターによってプロパティ「jcr:language」として抽出され、保持されます。
デザインインポーターは、読み込まれたHTMLで指定されたエンコーディングを読み取ります。 エンコーディングは次のように指定できます。
<meta charset="UTF-8">
または
<meta http-equiv="content-type" content="text/html;charset=utf-8">
読み込んだHTMLでエンコーディングが指定されていない場合、デザインインポーターによって設定されたデフォルトのエンコーディングは UTF-8 になります。
空白のランディングページテンプレートをオーバーレイするには、/apps/<appName>/designimporter/templates/<templateName>
でオーバーレイを新規作成します。
AEM のテンプレートを新規作成する手順については、こちらを参照してください。
data-cq-component 属性を使用してHTMLで参照するコンポーネントがあり、デザインインポーターがこの場所にコンポーネントをレンダリングするとします。 例えば、テーブルコンポーネント ( resourceType = /libs/foundation/components/table
) をクリックします。 この場合、HTML に次の行を追加する必要があります。
<div data-cq-component="/libs/foundation/components/table">foundation table</div>
data-cq-component 内のパスは、コンポーネントの resourceType にする必要があります。
読み込み時のコンポーネント変換用にマークされた要素では、次の CSS セレクターと同様の CSS セレクターを使用することはお勧めしません。
E > F | E 要素の F 要素の子 | 子結合子 |
---|---|---|
E + 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 番目の兄弟で、最後の要素から数えています | 構造擬似クラス |
これは、 <div> タグは、インポート後に生成された Html に追加されます。
OSGi コンソールから設定可能なプロパティを公開するコンポーネントを次に示します。
次の表で、プロパティについて簡単に説明します。
コンポーネント | プロパティ名 | プロパティの説明 |
ランディングページデザインインポーター | フィルターを抽出 | 抽出したファイルのフィルター時に使用する正規表現のリスト。 指定したいずれかのパターンに一致する zip エントリは、抽出から除外されます。 |
ランディングページビルダー | ファイルパターン | File Pattern で定義した正規表現に一致する HTML ファイルを処理するよう、ランディングページビルダーを設定できます。 |
モバイルランディングページビルダー | ファイルパターン | File Pattern で定義した正規表現に一致する HTML ファイルを処理するよう、ランディングページビルダーを設定できます。 |
Device Groups | サポートするデバイスグループのリスト。 | |
ランディングページエントリプリプロセッサ | Search Pattern | アーカイブエントリコンテンツ内で検索するパターン。この正規表現とエントリコンテンツは、行ごとに照合されます。一致した場合、一致したテキストは指定の置換パターンに置き換えられます。 ランディングページエントリプリプロセッサーの現在の制限事項については、下記のメモを参照してください。 |
パターンを置換 | 見つかった一致を置き換えるパターン。 $1、$2 など、正規表現のグループ参照を使用できます。また、このパターンでは、 {designPath} 読み込み時に実際の値で解決される |
ランディングページエントリプリプロセッサの現在の制限:
検索パターンを変更する必要がある場合は、felix プロパティエディターを開く際に、バックスラッシュ文字を手動で追加して正規表現のメタ文字をエスケープする必要があります。 バックスラッシュを手動で追加しない場合、正規表現は無効と見なされ、古い文字は置き換えられません。
例えば、デフォルトの設定が
>/\* *CQ_DESIGN_PATH *\*/ *(['"])
また、検索パターン内でCQ_DESIGN_PATH
を VIPURL
と置換する必要がある場合、検索パターンは次のようになります。
/\* *VIPURL *\*/ *(['"])
デザインパッケージを読み込む際に、この節で説明する複数のエラーが発生する場合があります。
デザインパッケージに parsys コンポーネントマークアップが含まれている場合、読み込み後にサイドキックにランディングページ関連のコンポーネントが表示され始めます。 新しいコンポーネントは、ランディングページ内の parsys コンポーネントにドラッグ&ドロップできます。 デザインモードに移動して、新しいコンポーネントをサイドキックに追加することもできます。
エラーが発生した場合(例えば、読み込まれたパッケージが有効な zip ではない場合など)、デザインの読み込みではパッケージは読み込まれません。 代わりに、ページ上部のドラッグ&ドロップボックスのすぐ上にエラーメッセージが表示されます。 エラーシナリオの例をここに示します。 エラーを修正した後、更新した zip を同じ空白のランディングページに再読み込みできます。 エラーがスローされる様々なシナリオを次に示します。
警告がある場合 ( 例えば、HTMLがパッケージ内に存在しない画像を参照する場合など ) は、その zip を読み込むと同時に結果ウィンドウに問題/警告の一覧を表示します。 次のような様々なシナリオで警告が発生し、デザインインポーターによって表示されます。
ランディングページが読み込まれると、デザインパッケージ内のファイル(画像、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; }
また、デザイナーはデザインインポーターが id=cqcanvas タグ内のコードのみを認識することに注意してください。これを怠ると、デザインが保持されなくなります。