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
AEM インスタンスを Adobe Commerce インスタンスに接続するために必要な OSGi 構成を追加するか、新しく作成されたプロジェクトに構成を追加します。
この時点で、Adobe Commerce インスタンスに接続されたストアフロントの作業用のバージョンが必要です。US
/Home
ページ(http://localhost:4502/editor.html/content/venia/us/en.html)にアクセスします。
ストアフロントは現在 Venia テーマを使用しています。ストアフロントのメインメニューを展開すると、様々なカテゴリが表示され、Adobe Commerce への接続が機能していることが示されます。
ストアフロントのテーマ/スタイルのレンダリングを担当する CSS と JavaScript は、AEM で、クライアントライブラリ(clientlib)によって管理されます。クライアントライブラリは、プロジェクトのコード内で CSS と JavaScript を整理し、ページに配信するメカニズムを提供します。
ブランド固有のスタイルは、これらのクライアントライブラリで管理される CSS を追加および上書きして、AEM CIF コアコンポーネントに適用できます。クライアントライブラリが構造化されてページに含まれる方法を理解することが重要です。
ui.frontend は、プロジェクトのすべてのフロントエンドアセットを管理するための専用の webpack プロジェクトです。これにより、フロントエンド開発者は、TypeScript、Sass など、様々な言語やテクノロジーを使用できます。
ui.frontend
モジュールは Maven モジュールでもあり、NPM モジュールの aem-clientlib-generator を使用して、より大きなプロジェクトに統合されています。ビルド時に、aem-clientlib-generator
はコンパイル済みの CSS ファイルと JavaScript ファイルをクライアントライブラリの ui.apps
モジュールにコピーします。
コンパイル済みの CSS と JavaScript は、Maven のビルド中に、 ui.frontend
モジュールからクライアントライブラリとして ui.apps
モジュールにコピーされます。
次に、ティーザーのスタイルを少し変更して、ui.frontend
モジュールとクライアントライブラリの動作を確認します。任意の IDE を使用して、Venia プロジェクトをインポートします。使用したクリーンショットは、Visual Studio Code IDE からのものです。
ui.frontend モジュールに移動して展開し、フォルダー階層を次のように展開します:ui.frontend/src/main/styles/commerce
。
フォルダーの下に複数の Sass(.scss
)ファイルがあることに注意してください。これらは、各 Commerce コンポーネントの Commerce 固有のスタイルです。
_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 run build
を含む複数の NPM スクリプトを実行したことがわかります。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 クライアントライブラリに変換される場所と方法を決定します。
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 エディターでレイアウトモードが有効になり、コンテンツ作成者はコンポーネントのサイズを変更できます。カテゴリは 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
モジュールから派生したコンパイル済みの CSS ファイルと JavaScript ファイルです。
クライアントサイドライブラリを含める方法には、いくつかのオプションがあります。次に、生成されたプロジェクトに、ページテンプレートを介してどのように clientlib-site
ライブラリがインクルードされるかを調べます。
AEM エディター内でサイトのホームページ(http://localhost:4502/editor.html/content/venia/us/en.html)に移動します。
ページ情報メニューを選択し、「テンプレートを編集」をクリックします。
これにより、ホームページの基になるランディングページテンプレートが開きます。
AEM 開始画面で使用可能なすべてのテンプレートを表示するには、ツール/一般/テンプレートに移動します。
左上隅のページ情報アイコンを選択し、「ページポリシー」をクリックします。
これにより、ランディングページテンプレートのページポリシーが開きます。
右側には、このテンプレートを使用するすべてのページに含まれるクライアントライブラリカテゴリの一覧が表示されます。
venia.dependencies
- venia.site
が依存するベンダーライブラリを提供します。venia.site
- ui.frontend
モジュールが生成する clientlib-site
のカテゴリです。他のテンプレートでは、同じポリシー、 コンテンツページ、 ランディングページなどが使用されることに注意してください。同じポリシーを再使用すると、すべてのページに同じクライアントライブラリを確実に含めることができます。
テンプレートポリシーとページポリシーを使用してクライアントライブラリの組み込みを管理する利点は、テンプレートごとにポリシーを変更できることです。例えば、同じ 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
モジュールで生成される CSS と JavaScript のコンパイル版だからです。他のクライアントライブラリは、実行中の AEM インスタンスからプロキシされるので、そのままにします。
新しいターミナルウィンドウを開き、ui.frontend
フォルダーに移動します。npm start
コマンドを実行します。
$ cd ui.frontend
$ npm start
http://localhost:8080/ で webpack-dev-server が起動します。
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 と生成されたプロジェクトに戻ります。
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 スタイルシステムを使用して 、コンテンツ作成者がオン/オフを切り替えることのできる 2 つのスタイルを作成します。「スタイルシステムを使用した開発」では、この作業を行う方法に関する詳細な手順と情報が説明されています。