AEM CIF コアコンポーネントのスタイル設定

CIF Venia プロジェクトは、CIF コアコンポーネントを使用するための参照用コードベースです。このチュートリアルでは、Venia 参照用プロジェクトを調べ、AEM CIF コアコンポーネントで使用される CSS と JavaScript がどのように構成されているかを説明します。また、CSS を使用して新しいスタイルを作成し、製品ティーザーコンポーネントのデフォルトのスタイルをアップデートします。

ヒント

独自のコマース実装を開始する際に AEM プロジェクトアーキタイプを使用します。

作成する内容

このチュートリアルでは、カードに似た製品ティーザーコンポーネントに新しいスタイルを実装します。このチュートリアルで学習した内容は、他の CIF コアコンポーネントにも適用できます。

作成する内容

前提条件

このチュートリアルを完了するには、ローカルの開発環境が必要です。これには、Adobe Commerce インスタンスに設定および接続された AEM の実行インスタンスが含まれます。AEM as a Cloud Service SDK を使用してローカル開発をセットアップするための要件と手順を確認します。

Venia プロジェクトのクローン

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 への接続が機能していることが示されます。

クライアントライブラリと ui.frontend モジュール

ストアフロントのテーマ／スタイルのレンダリングを担当する 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 モジュールにコピーします。

ui.frontend to ui.apps architecture

コンパイル済みの 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 つの異なるブランドを管理しているとします。各ブランドには独自のスタイルまたはテーマがありますが、基本ライブラリとコードは同じです。別の例として、特定のページにのみ表示したい大きなクライアントライブラリがある場合、そのテンプレートにのみ固有のページポリシーを作成できます。

ローカル WebPack の開発

前の練習では、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>
    
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    ...
</head>
<body>
    ...
     
    <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 つのスタイルを作成します。「スタイルシステムを使用した開発」では、この作業を行う方法に関する詳細な手順と情報が説明されています。

ボーナスチャレンジ - スタイルシステム

AEM CIF コアコンポーネントのスタイル設定

作成する内容

前提条件

Venia プロジェクトのクローン

クライアントライブラリと ui.frontend モジュール

ティーザースタイルのアップデート

製品ティーザーの作成

ページ上でのクライアントライブラリの検証

ページテンプレートによるクライアントライブラリの追加

ローカル WebPack の開発

製品ティーザー用のカードスタイルの実装

アップデートされた製品ティーザーを表示

トラブルシューティング

これで完了です

ボーナスチャレンジ

その他のリソース

Business.Adobe.com リソース

このページ

次を表示：

学習

ドキュメント

コミュニティー

サポート

リソース

アドビアカウント

Adobe