AEM CIF コアコンポーネントのスタイル設定 style-aem-cif-core-components

次の 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 モジュールに移動して展開し、フォルダー階層を次のように展開します：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 ライブラリが含まれます。

ターミナルから、プロジェクト全体を構築し、AEM のローカルインスタンスにデプロイします。

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

新しいブラウザータブを開き、サイトの​ ホームページ（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 ファイルです。

AEM エディター内でサイトの​ ホームページ（http://localhost:4502/editor.html/content/venia/us/en.html）に移動します。

ページ情報 ​メニューを選択し、「テンプレートを編集」をクリックします。

すると、ホーム ​ページの基になる​ ランディングページ ​テンプレートが開きます。

左上隅の​ ページ情報 ​アイコンを選択し、「ページポリシー」をクリックします。

これにより、ランディングページテンプレートのページポリシーが開きます。

右側には、このテンプレートを使用するすべてのページに含まれるクライアントライブラリ​ カテゴリ ​の一覧が表示されます。

• venia.dependencies - venia.site が依存するベンダーライブラリを提供します。
• venia.site - ui.frontend モジュールが生成する clientlib-site のカテゴリです。

他のテンプレートも同じポリシー、コンテンツページ、ランディングページ ​などを使用しています。 同じポリシーを再利用すると、同じクライアントライブラリをすべてのページに確実に含めることができます。

テンプレートポリシーとページポリシーを使用してクライアントライブラリの組み込みを管理する利点は、テンプレートごとにポリシーを変更できることです。例えば、同じ AEM インスタンス内で 2 つの異なるブランドを管理しているとします。各ブランドには独自のスタイルまたは​ テーマ ​がありますが、基本ライブラリとコードは同じです。別の例として、特定のページにのみ表示したい大きなクライアントライブラリがある場合、そのテンプレートにのみ固有のページポリシーを作成できます。

ブラウザーで​ ホーム ​ページ（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 が起動します。

AEM のログインインスタンスと同じブラウザーを使用して、新しいタブで http://localhost:8080/ に移動します。Venia ホームページは webpack-dev-server で確認できます。

webpack-dev-server は実行したままにします。これは、次の演習で使用します。

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

ブラウザーに戻り、ホームページ（http://localhost:4502/editor.html/content/venia/us/en.html）を更新します。アップデートされた製品ティーザースタイルが適用されていることが確認できます。

製品ティーザーを追加してテストします。複数のティーザーを一列に表示するためには、レイアウトモードを使用して、コンポーネントの幅とオフセットを変更します。