CIF Venia プロジェクトは、CIF コアコンポーネントを使用するための参照用コードベースです。このチュートリアルでは、Venia 参照プロジェクトを調べ、AEM CIF コアコンポーネントで使用される CSS と JavaScript がどのように整理されているかを理解します。 また、CSS を使用してスタイルを作成し、 製品ティーザー コンポーネント。
独自のコマース実装を開始する際に AEM プロジェクトアーキタイプを使用します。
このチュートリアルでは、カードに似た製品ティーザーコンポーネントに新しいスタイルを実装します。 このチュートリアルで学習した内容は、他の CIF コアコンポーネントにも適用できます。
このチュートリアルを完了するには、ローカルの開発環境が必要です。この環境には、Adobe Commerceインスタンスに設定および接続されたAEMの実行インスタンスが含まれます。 AEM as a Cloud Service SDK を使用してローカル開発をセットアップするための要件と手順を確認します。
次の項目を複製します: Venia プロジェクトをクリックして、デフォルトのスタイルを上書きします。
(CIF を含む AEM プロジェクトアーキタイプに基づく)既存のプロジェクトを使用する場合、このセクションをスキップできます。
次の git コマンドを実行して、プロジェクトのクローンを作成します。
$ git clone git@github.com:adobe/aem-cif-guides-venia.git
プロジェクトをビルドしてローカル AEM インスタンスにデプロイします。
$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud
必要な OSGi 設定を追加して、AEMインスタンスをAdobe Commerceインスタンスに接続したり、新しく作成したプロジェクトに設定を追加したりできます。
この時点で、Adobe Commerce インスタンスに接続されたストアフロントの作業用のバージョンが必要です。US
/Home
ページ(http://localhost:4502/editor.html/content/venia/us/en.html)にアクセスします。
ストアフロントは現在 Venia テーマを使用しています。ストアフロントのメインメニューを展開すると、様々なカテゴリが表示され、Adobe Commerce への接続が機能していることが示されます。
ストアフロントのテーマ/スタイルのレンダリングを担当する CSS と JavaScript は、AEMで クライアントライブラリ または「clientlibs」(短く)。 クライアントライブラリは、プロジェクトのコード内の CSS と JavaScript を整理し、ページに配信するメカニズムを提供します。
ブランド固有のスタイルは、これらのクライアントライブラリで管理される CSS を追加および上書きすることで、AEM CIF コアコンポーネントに適用できます。 クライアントライブラリが構造化されてページに含まれる方法を理解することが重要です。
The ui.frontend は専用です webpack プロジェクト:プロジェクトのすべてのフロントエンドアセットを管理します。 この Webpack を使用すると、フロントエンド開発者は、次のような様々な言語やテクノロジーを使用できます。 TypeScript, サスなど。
The ui.frontend
モジュールは、Maven モジュールでもあり、NPM モジュールを使用して、より大きなプロジェクトに統合されます。 aem-clientlib-generator. ビルド時に、aem-clientlib-generator
はコンパイル済みの CSS ファイルと JavaScript ファイルをクライアントライブラリの ui.apps
モジュールにコピーします。
コンパイル済みの CSS と JavaScript は、 ui.frontend
モジュールを ui.apps
Maven ビルド時のクライアントライブラリとしてのモジュール
次に、ティーザーのスタイルを少し変更して、ui.frontend
モジュールとクライアントライブラリの動作を確認します。任意の IDE を使用して、Venia プロジェクトをインポートします。使用したクリーンショットは、Visual Studio Code IDE からのものです。
ui.frontend モジュールに移動して展開し、フォルダー階層を次のように展開します:ui.frontend/src/main/styles/commerce
。
フォルダーの下に複数の Sass(.scss
)ファイルがあることに注意してください。これらのファイルは、各コマースコンポーネントのコマース固有のスタイルです。
_productteaser.scss
ファイルを開きます。
.item__image
ルールをアップデートし、枠線の規則を変更します。
.item__image {
border: #ea00ff 8px solid; /* <-- modify this rule */
display: block;
grid-area: main;
height: auto;
opacity: 1;
transition-duration: 512ms;
transition-property: opacity, visibility;
transition-timing-function: ease-out;
visibility: visible;
width: 100%;
}
上記のルールでは、製品ティーザーコンポーネントに太いピンク色の枠線を追加します。
新しいターミナルウィンドウを開き、ui.frontend
フォルダーに移動します。
$ cd <project-location>/aem-cif-guides-venia/ui.frontend
次の Maven コマンドを実行します。
$ mvn clean install
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 29.497 s
[INFO] Finished at: 2020-08-25T14:30:44-07:00
[INFO] ------------------------------------------------------------------------
端末出力を検査します。Maven コマンドは、次のような複数の NPM スクリプトを実行しました。 npm run build
. The npm run build
コマンドが package.json
ファイルを作成し、webpack プロジェクトをコンパイルして、クライアントライブラリの生成トリガーを設定します。
ui.frontend/dist/clientlib-site/site.css
ファイルを検査します。
このファイルは、プロジェクト内のすべての Sass ファイルのコンパイル済みの圧縮バージョンです。
このようなファイルはビルド時に生成されるので、ソース管理からは無視されます。
ui.frontend/clientlib.config.js
ファイルを検査します。
/* clientlib.config.js*/
...
// Config for `aem-clientlib-generator`
module.exports = {
context: BUILD_DIR,
clientLibRoot: CLIENTLIB_DIR,
libs: [
{
...libsBaseConfig,
name: 'clientlib-site',
categories: ['venia.site'],
dependencies: ['venia.dependencies', 'aem-core-cif-react-components'],
assets: {
...
この設定ファイルは次の用です。 aem-clientlib-generator とは、コンパイル済みの CSS と JavaScript をAEMクライアントライブラリに変換する場所と方法を決定します。
Adobe Analytics の ui.apps
モジュールで、ファイルを検査します。 ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css
:
このファイルは site.css
にコピーされる ui.apps
プロジェクト。 現在は、venia.site
のカテゴリを持つ clientlib-site
というクライアントライブラリの一部となっています。ファイルが ui.apps
モジュールの一部になったら、AEM にデプロイできます。
このようなファイルはビルド時に生成されるので、ソース管理からも無視されます。
次に、プロジェクトで生成された他のクライアントライブラリを検査します。
これらのクライアントライブラリは、ui.frontend
モジュールでは管理されません。代わりに、これらのクライアントライブラリには、アドビが提供する CSS と JavaScript の依存関係が含まれます。これらのクライアントライブラリの定義は、各フォルダー内の .content.xml
ファイルにあります。
clientlib-base — から必要な依存関係を埋め込んだ空のクライアントライブラリ AEMコアコンポーネント. カテゴリは venia.base
です。
clientlib-cif — から必要な依存関係を埋め込んだ空のクライアントライブラリ AEM CIF コアコンポーネント. カテゴリは venia.cif
です。
clientlib-grid - AEMレスポンシブグリッド機能を有効にする CSS を含みます。 AEMグリッドを使用すると、 レイアウトモード AEM Editor を使用し、コンテンツ作成者がコンポーネントのサイズを変更できるようにします。 カテゴリは venia.grid
で、 venia.base
ライブラリに埋め込まれます。
ui.apps/src/main/content/jcr_root/apps/venia/components/page
の customheaderlibs.html
ファイルと customfooterlibs.html
ファイルを検査します。
これらのスクリプトには、すべてのページの一部として、venia.base と venia.cif ライブラリが含まれます。
ページスクリプトの一部として「ハードコード」されるのは、ベースライブラリのみです。venia.site
はこれらのファイルに含まれず、ページテンプレートの一部として含まれるので、柔軟性が高くなります。このプロセスは後で検査します。
ターミナルから、プロジェクト全体を構築し、AEM のローカルインスタンスにデプロイします。
$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud
コードのアップデートがデプロイされたら、AEMオーサリングツールを使用して、製品ティーザーコンポーネントのインスタンスをサイトのホームページに追加します。 更新されたスタイルを表示します。
新しいブラウザータブを開き、サイトのホームページ(http://localhost:4502/editor.html/content/venia/us/en.html)に移動します。
編集モードでアセットファインダー(サイドレール)を展開します。アセットフィルターを製品に切り替えます。
新しい製品をメインのレイアウトコンテナのホームページにドラッグ&ドロップします。
以前に作成した CSS ルールの変更に基づいて、製品ティーザーの枠線が明るいピンク色になりました。
次に、クライアントライブラリがページに含まれていることを確認します。
サイトのホームページ(http://localhost:4502/editor.html/content/venia/us/en.html)に移動します。
ページ情報メニューを選択し、「公開済みとして表示」をクリックします。
このページは、AEMオーサーの JavaScript が読み込まれずに、公開されたサイトに表示されるように開きます。 URL に ?wcmmode=disabled
クエリパラメーターが追加されていることに注意してください。CSS と JavaScript を開発する場合は、このパラメーターを使用して、AEM作成者が提供する内容を一切含めずにページを簡略化することをお勧めします。
ページソースを表示し、次のクライアントライブラリをいくつか識別できるようにします。
<!DOCTYPE html>
<html lang="en-US">
<head>
...
<link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-site.min.css" type="text/css">
</head>
...
<script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-base.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/core/cif/clientlibs/common.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-cif.min.js"></script>
</body>
</html>
クライアントライブラリは、ページに配信される際に /etc.clientlibs
プレフィックスが付けられ、プロキシ経由で提供され、/apps
や /libs
で機密事項が公開されないようになります。
venia/clientlibs/clientlib-site.min.css
と venia/clientlibs/clientlib-site.min.js
に注意してください。これらのファイルは、 ui.frontend
モジュール。
クライアントサイドライブラリを含める方法には、いくつかのオプションがあります。次に、生成されたプロジェクトに、ページテンプレートを介してどのように clientlib-site
ライブラリがインクルードされるかを調べます。
AEM エディター内でサイトのホームページ(http://localhost:4502/editor.html/content/venia/us/en.html)に移動します。
ページ情報メニューを選択し、「テンプレートを編集」をクリックします。
The ランディングページ テンプレートを開くと、 ホーム ページがに基づいている。
AEM Start 画面で使用可能なすべてのテンプレートを表示するには、に移動します。 ツール > 一般 > テンプレート.
左上隅のページ情報アイコンを選択し、「ページポリシー」をクリックします。
ランディングページテンプレート用にページポリシーが開きます。
右側には、クライアントライブラリの一覧が表示されます カテゴリ このテンプレートを使用するすべてのページに含まれる
venia.dependencies
- venia.site
が依存するベンダーライブラリを提供します。venia.site
— のカテゴリ clientlib-site
この ui.frontend
モジュールが生成されます。他のテンプレートも同じポリシー、コンテンツページ、ランディングページなどを使用しています。 同じポリシーを再利用すると、同じクライアントライブラリがすべてのページに確実に含まれます。
テンプレートポリシーとページポリシーを使用してクライアントライブラリの組み込みを管理する利点は、テンプレートごとにポリシーを変更できることです。例えば、同じ AEM インスタンス内で 2 つの異なるブランドを管理しているとします。各ブランドには独自のスタイルまたは テーマ ただし、基本ライブラリとコードは同じです。 別の例として、特定のページにのみ表示したい大きなクライアントライブラリがある場合、そのテンプレートにのみ固有のページポリシーを作成できます。
先ほどの演習では、ui.frontend
モジュール内の Sass ファイルを更新し、Maven ビルドを実行した後に、変更を AEM にデプロイしました。次に、webpack-dev-server を使用して、フロントエンドスタイルを迅速に開発する方法を見てみましょう。
webpack-dev-server は、AEM のローカルインスタンスから画像と一部の CSS/JavaScript をプロキシしますが、デベロッパーは、ui.frontend
モジュール内のスタイルと JavaScript を変更できます。
ブラウザーでホームページ(http://localhost:4502/content/venia/us/en.html?wcmmode=disabled)に移動し、「公開済みとして表示」に移動します。
ページのソースとページの生の HTML コピーを表示します。
ui.frontend
モジュールで選択した IDE に戻り、ui.frontend/src/main/static/index.html
ファイルを開きます。
index.html
の内容を上書きして、 前の手順でコピーした HTML を貼り付けます。
次の「含む」を見つけます。 clientlib-site.min.css
, clientlib-site.min.js
、および 削除 彼らを。
<head>
<!-- remove this link -->
<link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
...
</head>
<body>
...
<!-- remove this link -->
<script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
</body>
これらの「インクルード」は、 ui.frontend
モジュール。 他のクライアントライブラリは、実行中のAEMインスタンスからプロキシされるので、そのままにします。
新しいターミナルウィンドウを開き、ui.frontend
フォルダーに移動します。npm start
コマンドを実行します。
$ cd ui.frontend
$ npm start
このコマンドは、 http://localhost:8080/
Sass 関連のエラーが発生した場合は、サーバーを停止し、npm rebuild node-sass
コマンドを実行して上記の手順を繰り返します。このエラーは、 npm
および node
プロジェクトで指定された値より大きい aem-cif-guides-venia/pom.xml
.
AEM のログインインスタンスと同じブラウザーを使用して、新しいタブで http://localhost:8080/ に移動します。Venia ホームページは webpack-dev-server で確認できます。
webpack-dev-server は実行したままにします。次の演習で使用します。
次に、 ui.frontend
モジュール内の Sass ファイルを変更し、製品ティーザー用のカードに似たスタイルを実装します。webpack-dev-server は、変更をすばやく確認するために使用します。
IDE と生成されたプロジェクトに戻ります。
Adobe Analytics の ui.frontend モジュール、ファイルを再度開く _productteaser.scss
時刻 ui.frontend/src/main/styles/commerce/_productteaser.scss
.
製品ティーザーの枠線に次の変更を加えます。
.item__image {
- border: #ea00ff 8px solid;
+ border-bottom: 1px solid #c0c0c0;
display: block;
grid-area: main;
height: auto;
opacity: 1;
transition-duration: 512ms;
transition-property: opacity, visibility;
transition-timing-function: ease-out;
visibility: visible;
width: 100%;
}
変更を保存すると、webpack-dev-server は自動的に新しいスタイルで更新されます。
製品ティーザーにドロップシャドウを追加し、丸い角を付加します。
.item__root {
position: relative;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
float: left;
margin-left: 12px;
margin-right: 12px;
}
.item__root:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
製品名をアップデートして、ティーザーの下部に表示されるようにし、テキストの色を変更します。
.item__name {
color: #000;
display: block;
float: left;
font-size: 22px;
font-weight: 900;
line-height: 1em;
padding: 0.75em;
text-transform: uppercase;
width: 75%;
}
製品の価格をアップデートして、ティーザーの下部にも表示されるようにし、テキストの色を変更します。
.price {
color: #000;
display: block;
float: left;
font-size: 18px;
font-weight: 900;
padding: 0.75em;
padding-bottom: 2em;
width: 25%;
...
下部のメディアクエリを更新し、名前と価格を次のサイズより小さい画面に積み重ねられるようにします。 992px.
@media (max-width: 992px) {
.productteaser .item__name {
font-size: 18px;
width: 100%;
}
.productteaser .item__price {
font-size: 14px;
width: 100%;
}
}
カードのスタイルが webpack-dev-server に反映されています。
ただし、変更は AEM にまだデプロイされていません。ソリューションファイルは、こちらからダウンロードできます。
コマンドラインターミナルから、Maven のスキルを使用してAEMにアップデートをデプロイします。
$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud
完全な Maven ビルドを実行せずに、プロジェクトファイルをローカル AEM インスタンスに直接同期できる追加の IDE セットアップとツールがあります。
プロジェクトのコードをAEMにデプロイしたら、製品ティーザーの変更を確認できるようになります。
ブラウザーに戻り、ホームページを更新します。 http://localhost:4502/editor.html/content/venia/us/en.html. アップデートされた製品ティーザースタイルが適用されていることが確認できます。
製品ティーザーを追加してテストします。複数のティーザーを一列に表示するには、レイアウトモードを使用して、コンポーネントの幅とオフセットを変更します。
CRXDE-Lite で、アップデートされた CSS ファイルがデプロイされたことを確認できます(http://localhost:4502/crx/de/index.jsp#/apps/venia/clientlibs/clientlib-site/css/site.css)。
新しい CSS ファイル、JavaScript ファイル、またはその両方をデプロイする場合は、ブラウザーで古いファイルが提供されないようにすることも重要です。 この潜在的な問題は、ブラウザーのキャッシュをクリアするか、新しいブラウザーセッションを開始することで解消できます。
また、AEM は、パフォーマンスを考慮してクライアントライブラリをキャッシュしようとします。コードがデプロイされた後で、古いファイルが提供されることがあります。クライアントライブラリのリビルドツールを使用して、AEM クライアントライブラリのキャッシュを手動で無効にすることができます。AEM が古いバージョンのクライアントライブラリをキャッシュしていると思われる場合は、「キャッシュを無効にする」ことをお勧めします。「ライブラリのリビルド」は非効率で時間がかかります。
最初のAEM CIF コアコンポーネントのスタイル設定が完了し、webpack デベロッパーサーバーを使用しました。
以下を使用します。 AEM Style System :コンテンツ作成者がオン/オフを切り替えることのできる 2 つのスタイルを作成する場合。 スタイルシステムを使用した開発 には、このタスクを実行する方法に関する詳細な手順と情報が含まれています。