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

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

ヒント

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

作成する内容

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

作成する内容

前提条件

このチュートリアルを完了するには、ローカルの開発環境が必要です。これには、Magento インスタンスに設定および接続された AEM の実行インスタンスが含まれます。AEM🔗でローカル開発を設定する際の要件と手順を確認します。

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

Venia プロジェクトのクローンを作成して、デフォルトのスタイルを上書きします。

メモ

(CIF を含む AEM プロジェクトアーキタイプに基づく)既存のプロジェクトを使用​する場合、このセクションをスキップできます。

  1. 次の git コマンドを実行して、プロジェクトのクローンを作成します。

    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. プロジェクトをビルドしてローカル AEM インスタンスにデプロイします。

    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
  3. AEM インスタンスを Magento インスタンスに接続するために必要な OSGi 構成を追加するか、新しく作成されたプロジェクトに構成を追加します。

  4. この時点で、Magento インスタンスに接続されたストアフロントの作業用のバージョンが必要です。USHome ページ(http://localhost:4502/editor.html/content/venia/us/en.html)にアクセスします。

    ストアフロントは現在 Venia テーマを使用しています。ストアフロントのメインメニューを展開すると、様々なカテゴリが表示され、接続 Magento が機能していることが示されます。

    Venia テーマで構成されたストアフロント

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

ストアフロントのテーマ/スタイルのレンダリングを担当するCSSとJavaScriptは、AEMでクライアントライブラリまたはclientlibsによって管理されます。 クライアントライブラリは、プロジェクトのコード内で CSS と JavaScript を整理し、ページに配信するメカニズムを提供します。

ブランド固有のスタイルは、これらのクライアントライブラリで管理される CSS を追加および上書きして、AEM CIF コアコンポーネントに適用できます。クライアントライブラリが構造化されてページに含まれる方法を理解することが重要です。

ui.frontend は、プロジェクトのすべてのフロントエンドアセットを管理するための専用の webpack プロジェクトです。これにより、フロントエンド開発者は、TypeScriptSass など、様々な言語やテクノロジーを使用できます。

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 からのものです。

  1. ui.frontend モジュールに移動して展開し、フォルダー階層を次のように展開します:ui.frontend/src/main/styles/commerce

    ui.frontend コマースフォルダー

    フォルダーの下に複数の Sass(.scss)ファイルがあることに注意してください。これらは、各 Commerce コンポーネントの Commerce 固有のスタイルです。

  2. _productteaser.scss ファイルを開きます。

  3. .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%;
    }
    

    上記のルールは、製品ティーザーコンポーネントに非常に太いピンク色の枠線を追加します。

  4. 新しいターミナルウィンドウを開き、ui.frontend フォルダーに移動します。

    $ cd <project-location>/aem-cif-guides-venia/ui.frontend
    
  5. 次の 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 プロジェクトをコンパイルしてクライアントライブラリの生成をトリガーする効果があります。

  6. ui.frontend/dist/clientlib-site/site.css ファイルを検査します。

    コンパイル済みサイト CSS

    このファイルは、プロジェクト内のすべてのSassファイルのコンパイル済みおよび縮小版です。

    メモ

    このようなファイルはビルド時に生成されるので、ソース管理からは無視されます。

  7. 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 クライアントライブラリに変換される場所と方法を決定します。

  8. ui.apps モジュールで、ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css ファイルを検査します。

    ui.apps 内のコンパイル済みサイト CSS

    これにより、site.cssファイルがui.appsプロジェクトにコピーされます。 現在は、clientlib-siteという名前のクライアントライブラリの一部で、カテゴリvenia.siteが含まれています。 ファイルが ui.apps モジュールの一部になったら、AEM にデプロイできます。

    メモ

    このようなファイルはビルド時に生成されるので、ソース管理からも無視されます。

  9. 次に、プロジェクトで生成された他のクライアントライブラリを検査します。

    その他のクライアントライブラリ

    これらのクライアントライブラリは、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 ライブラリに埋め込まれます。

  10. ui.apps/src/main/content/jcr_root/apps/venia/components/pagecustomheaderlibs.html ファイルと customfooterlibs.html ファイルを検査します。

    カスタムのヘッダーおよびフッタースクリプト

    これらのスクリプトには、すべてのページの一部として、venia.basevenia.cif ライブラリが含まれます。

    メモ

    ページスクリプトの一部として「ハードコード」されるのは、ベースライブラリのみです。venia.site はこれらのファイルに含まれず、ページテンプレートの一部として含まれるので、柔軟性が高くなります。これは後で検査します。

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

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

製品ティーザーの作成

コードのアップデートがデプロイされたら、AEMオーサリングツールを使用して、製品ティーザーコンポーネントの新しいインスタンスをサイトのホームページに追加します。 これにより、アップデートされたスタイルの表示が可能になります。

  1. 新しいブラウザータブを開き、サイトの​ホームページhttp://localhost:4502/editor.html/content/venia/us/en.html)に移動します。

  2. 編集​モードでアセットファインダー(サイドレール)を展開します。アセットフィルターを​製品​に切り替えます。

    アセットファインダーを展開し、製品でフィルターします

  3. 新しい製品をメインのレイアウトコンテナのホームページにドラッグ&ドロップします。

    製品ティーザー(ピンクの枠線付き)

    以前に作成した CSS ルールの変更に基づき、製品ティーザーの枠線が明るいピンク色になりました。

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

次に、クライアントライブラリがページに含まれていることを確認します。

  1. サイトの​ホームページhttp://localhost:4502/editor.html/content/venia/us/en.html)に移動します。

  2. ページ情報​メニューを選択し、「公開済みとして表示」をクリックします。

    公開済みとして表示

    これにより、AEM 作成者の javascript が読み込まれない状態で、公開されたサイトに表示されるようにページが開きます。このURLにはクエリーパラメーター?wcmmode=disabledが追加されています。 CSSとJavaScriptを開発する場合は、このパラメーターを使用して、AEMの作成者が何もしなくてもページを簡略化することをお勧めします。

  3. ページソースを表示し、次のクライアントライブラリをいくつか識別できるようにします。

    <!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.cssvenia/clientlibs/clientlib-site.min.js に注意してください。これらは、ui.frontend モジュールから派生したコンパイル済みの CSS ファイルと JavaScript ファイルです。

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

クライアントサイドライブラリを含める方法には、いくつかのオプションがあります。次に、生成されたプロジェクトに、ページテンプレートを介してどのように clientlib-site ライブラリがインクルードされるかを調べます。

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

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

    テンプレートの編集

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

    メモ

    AEM 開始画面で使用可能なすべてのテンプレートを表示するには、ツール一般テンプレート​に移動します。

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

    ページポリシーメニュー項目

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

    ページポリシー - ランディングページ

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

    • 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 を変更できます。

  1. ブラウザーで​ホーム​ページ(http://localhost:4502/content/venia/us/en.html?wcmmode=disabled)に移動し、「公開済みとして表示」に移動します。

  2. ページのソースとページの生の HTML コピー​を表示します。

  3. ui.frontend モジュールで選択した IDE に戻り、ui.frontend/src/main/static/index.html ファイルを開きます。

    静的 HTML ファイル

  4. index.html の内容を上書きして、 前の手順でコピーした HTML を​貼り付けます

  5. 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 インスタンスからプロキシされるので、そのままにします。

  6. 新しいターミナルウィンドウを開き、ui.frontend フォルダーに移動します。npm start コマンドを実行します。

    $ cd ui.frontend
    $ npm start
    

    http://localhost:8080/ で webpack-dev-server が起動します。

    注意

    Sass関連のエラーが発生した場合は、サーバーを停止し、コマンドnpm rebuild node-sassを実行して、上記の手順を繰り返します。 これは、npmnodeのバージョンが異なり、プロジェクトaem-cif-guides-venia/pom.xmlで指定されている場合に発生する可能性があります。

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

    ポート 80 の Webpack Dev サーバー

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

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

次に、 ui.frontend モジュール内の Sass ファイルを変更し、製品ティーザー用のカードに似たスタイルを実装します。webpack-dev-server は、変更をすぐに確認するために使用します。

IDE と生成されたプロジェクトに戻ります。

  1. ui.frontend モジュールで、_productteaser.scss ファイルを再度開きます(ui.frontend/src/main/styles/commerce/_productteaser.scss)。

  2. 製品ティーザーの枠線に次の変更を加えます。

        .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 は自動的に新しいスタイルで更新されます。

  3. 製品ティーザーにドロップシャドウを追加し、丸い角を付加します。

     .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);
    }
    
  4. 製品名をアップデートして、ティーザーの下部に表示されるようにし、テキストの色を変更します。

    .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%;
    }
    
  5. 製品の価格をアップデートして、ティーザーの下部にも表示されるようにし、テキストの色を変更します。

    .price {
        color: #000;
        display: block;
        float: left;
        font-size: 18px;
        font-weight: 900;
        padding: 0.75em;
        padding-bottom: 2em;
        width: 25%;
    
        ...
    
  6. 992px 未満の画面に名前と価格を積み重ねるには、下部のメディアクエリをアップデートします。

    @media (max-width: 992px) {
        .productteaser .item__name {
            font-size: 18px;
            width: 100%;
        }
        .productteaser .item__price {
            font-size: 14px;
            width: 100%;
        }
    }
    

    カードのスタイルが webpack-dev-server に反映されています。

    Webpack Dev Server ティーザーの変更

    ただし、変更は AEM にまだデプロイされていません。ソリューションファイルは、こちらからダウンロードできます。

  7. コマンドラインターミナルから、Maven スキルを使用して AEM にアップデートを展開します。

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

    完全な Maven ビルドを実行せずに、プロジェクトファイルをローカル AEM インスタンスに直接同期できる追加の IDE セットアップとツールがあります。

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

プロジェクトのコードを AEM にデプロイした後は、製品ティーザーの変更を確認できるようになります。

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

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

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

    複数の製品ティーザー

トラブルシューティング

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 つのスタイルを作成します。「スタイルシステムを使用した開発」では、この作業をおこなう方法に関する詳細な手順と情報が説明されています。

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

その他のリソース

このページ