Show Menu
トピック×

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

CIFベニアプロジェクト は、 CIFコアコンポーネントを使用するためのリファレンスコードベースです 。 このチュートリアルでは、ベニアリファレンスプロジェクトを調べ、AEM CIFコアコンポーネントで使用されるCSSとJavaScriptがどのように編成されているかを理解します。 また、CSSを使用して新しいスタイルを作成し、 Product Teaser コンポーネントのデフォルトのスタイルを更新します。
独自のコマース実装を開始する際に AEMプロジェクトのアーキタイプ を使用します。

作成する内容

カードに似たProduct Teaserコンポーネントに新しいスタイルが実装されます。

前提条件

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

ベニアプロジェクトのコピー

Venia Project をコピーし 、デフォルトのスタイルを上書きします。
(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インスタンスに接続されたストアフロントの作業バージョンが必要です。 次の場所にある US / Home ページに移動します。 http://localhost:4502/editor.html/content/venia/us/en.html .
    現在、店頭ではベニアのテーマが使用されていることがわかります。 ストアフロントのメインメニューを展開すると、様々なカテゴリが表示され、接続Magentoが機能していることが示されます。

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

ストアフロントのテーマ/スタイルのレンダリングを担当するCSSとJavaScriptは、AEMで、 クライアントライブラリ (短くはclientlib)によって管理されます。 クライアントライブラリは、プロジェクトのコード内でCSSとJavaScriptを整理し、ページに配信するメカニズムを提供します。
ブランド固有のスタイルは、これらのクライアントライブラリで管理されるCSSを追加および上書きして、AEM CIFコアコンポーネントに適用できます。 クライアントライブラリが構造化され、ページに含まれる方法を理解することが重要です。
ui.frontend は、プロジェクトのすべてのフロントエンドアセットを管理するための専用の Webpack プロジェクトです。 これにより、フロントエンド開発者は、TypeScript Sassなど、様々な言語やテクノロジーを使用でき ます
この ui.frontend モジュールはMavenモジュールでもあり、NPMモジュールの aem-clientlib-generatorを使用して、より大きなプロジェクトに統合されています 。 ビルド時に、はコンパイル済みのCSSファイルとJavaScriptファイルを aem-clientlib-generator ui.apps モジュールのクライアントライブラリにコピーします。
コンパイル済みのCSSとJavaScriptは、Mavenのビルド中に、 ui.frontend モジュールからクライアントライブラリとして ui.apps モジュールにコピーされます

Teaserスタイルを更新する

次に、Teaserスタイルを少し変更して、モジュールとクライアントライブラリの動作を確認し ui.frontend ます。 任意 のIDEを使用して 、Veniaプロジェクトをインポートします。 使用するスクリーンショットは、 Visual StudioコードIDE .
  1. ui.frontend ​モジュールに移動して展開し、フォルダー階層を次のように展開します。 ui.frontend/src/main/styles/commerce :
    フォルダーの下に複数のSass ( .scss )ファイルがあることに注意してください。 これらは、各コマースコンポーネントのコマース固有のスタイルです。
  2. Open the file _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%;
    }
    
    
    上記のルールは、製品Teaserコンポーネントに非常に太字のピンク色の境界線を追加する必要があります。
  4. Open a new terminal window and navigate to the ui.frontend folder:
    $ 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] ------------------------------------------------------------------------
    
    
    端末出力のInspect。 Mavenコマンドが、を含む複数のNPMスクリプトを実行したことがわかり npm run build ます。 この npm run build コマンドは package.json ファイル内で定義され、WebPackプロジェクトをコンパイルしてクライアントライブラリの生成をトリガーする効果があります。
  6. Inspectファイル ui.frontend/dist/clientlib-site/site.css :
    このファイルは、プロジェクト内のすべてのSassファイルの圧縮バージョンです。
    このようなファイルはビルド時に生成される必要があるので、ソース管理から無視されます。
  7. ファイルをInspect 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 :
    コピーされた site.css ファイルが ui.apps プロジェクトにコピーされます。 現在は、のカテゴリを持つクライアントライブラリ clientlib-site の一部となり venia.site ます。 ファイルがモジュールの一部になったら、AEMにデプロイでき ui.apps ます。
    このようなファイルはビルド時に生成される必要があるので、ソース管理からも無視されます。
  9. 次に、プロジェクトで生成された他のクライアントライブラリを検査します。
    これらのクライアントライブラリは、 ui.frontend モジュールで管理されません。 代わりに、これらのクライアントライブラリには、Adobeが提供するCSSとJavaScriptの依存関係が含まれます。 これらのクライアントライブラリの定義は、各フォルダーの下の .content.xml ファイルにあります。
    clientlib-grid - AEMレスポンシブグリッド機能を有効にするために必要なCSSが含まれます。 AEMグリッドを使用すると、AEMエディターで レイアウトモード (Layout Mode)が有効になり、コンテンツ作成者はコンポーネントのサイズを変更できます。 カテゴリはライブラリ venia.grid に含まれ、 venia.base ライブラリに埋め込まれます。
  10. Inspectはファイル customheaderlibs.html の下に customfooterlibs.html 次のように配置し ui.apps/src/main/content/jcr_root/apps/venia/components/page ます。
    これらのスクリプトには、 venia.base ​venia.cifライブラリが含まれます。これらはすべてのページの一部です。
    ページスクリプトの一部として「ハードコード」されるのは、ベースライブラリのみです。 venia.site はこれらのファイルに含まれず、ページテンプレートの一部として含まれるので、柔軟性が高くなります。 これは後で検査します。
  11. ターミナルから、プロジェクト全体を構築し、AEMのローカルインスタンスにデプロイします。
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
    

製品ティーザーの作成

コードの更新が展開されたら、AEMオーサリングツールを使用して、Product Teaserコンポーネントの新しいインスタンスをサイトのホームページに追加します。 これにより、更新されたスタイルの表示が可能になります。
  1. 新しいブラウザータブを開き、サイトの ホームページ に移動します。 http://localhost:4502/editor.html/content/venia/us/en.html .
  2. 編集 モードでアセットファインダー(サイドレール)を展開します 。 アセットフィルターを 製品に切り替えます
  3. 新しい商品をメインのレイアウトコンテナのホームページにドラッグ&ドロップします。
    以前に作成したCSSルールの変更に基づき、Product Teaserの境界が明るいピンク色になりました。

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

次に、クライアントライブラリがページに含まれていることを確認します。
  1. ページ情報 メニューを選択し、「 表示は公開済み 」をクリックします。
    これにより、AEM作成者のjavascriptが読み込まれずに、公開されたサイトに表示されるので、ページが開きます。 URLにクエリパラメーターが ?wcmmode=disabled 追加されていることに注意してください。 CSSとJavaScriptを開発する場合は、このパラメーターを使用してAEM作成者が提供した内容を含めてページを簡略化することをお勧めします。
  2. ページソースの表示を行い、次のクライアントライブラリをいくつか識別できるようにします。
    <!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 。 これらは、モジュールから派生したコンパイル済みのCSSファイルとJavaScriptファイルで ui.frontend す。

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

クライアント側ライブラリを含める方法には、いくつかのオプションがあります。 次に、 clientlib-site ページテンプレートを使用して、生成されたプロジェクトにどのように ライブラリが含まれるかを調べます
  1. AEM Editor内でサイトの ホームページ に移動します。 http://localhost:4502/editor.html/content/venia/us/en.html .
  2. ページ情報 」メニューを選択し、「テンプレートの 編集 」をクリックします。
    これにより、 ホーム ページの基になる ランディングページ ・テンプレートが開きます。
    AEM開始画面で使用可能なすべてのテンプレートを表示するには、 ツール / 一般 / テンプレートに移動します
  3. 左上隅の「 ページ情報 」アイコンを選択し、「 ページポリシー 」をクリックします。
  4. これにより、ランディングページテンプレートのページポリシーが開きます。
    右側には、このテンプレートを使用するすべてのページに含まれるクライアントライブラリ カテゴリ の一覧が表示されます。
    • venia.dependencies — に venia.site 依存するベンダーライブラリを提供します。
    • venia.site — これは、 clientlib-site ui.frontend モジュールが生成するカテゴリです。
    他のテンプレートでは、同じポリシー、 コンテンツページ ランディングページ 、同じポリシーを再使用すると、すべてのページに同じクライアントライブラリを確実に含めることができます。
    テンプレートとページポリシーを使用してクライアントライブラリの組み込みを管理する利点は、テンプレートごとにポリシーを変更できることです。 例えば、同じ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. モジュールの下で選択したIDEに戻り、ファイルを ui.frontend 開きます。 ui.frontend/src/main/static/index.html
  4. 前の手順でコピーしたHTMLの内容を上書き index.html て貼り付けます
  5. includes for clientlib-site.min.css clientlib-site.min.js および remove
    <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>
    
    
    これらは、モジュールで生成されるCSSとJavaScriptのコンパイル版を表すので、削除され ui.frontend ます。 他のクライアントライブラリは、実行中のAEMインスタンスからプロキシされるので、そのままにします。
  6. Open a new terminal window and navigate into the ui.frontend folder. Run the command 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 ます。
  7. AEMのログインインスタンスと同じブラウザーを使用して、新しいタブ http://localhost:8080/ に移動します。 Veniaホームページはwebpack-dev-serverで確認できます。
    webpack-dev-serverは実行したままにします。 次の練習で使用します。

Product Teaser用のカードスタイルの実装

次に、 ui.frontend モジュール内のSassファイルを変更し、Product Teaser用のカードに似たスタイルを実装します。 webpack-dev-serverは、変更をすぐに確認するために使用されます。
IDEと生成されたプロジェクトに戻ります。
  1. ui.frontend モジュールで、ファイルを再度開 _productteaser.scss ui.frontend/src/main/styles/commerce/_productteaser.scss ます。
  2. 製品のTeaserの境界線に次の変更を加えます。
        .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に反映されます。
    ただし、変更はAEMにまだ展開されていません。 この ソリューションファイルは、こちらからダウンロードできます
  7. コマンドラインターミナルから、Mavenスキルを使用してAEMにアップデートを展開します。
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
    
    追加の IDEの設定とツール (完全なMavenビルドを実行することなく、プロジェクトファイルをローカルのAEMインスタンスに直接同期できます)。

表示が更新された製品ティーザー

プロジェクトのコードをAEMに導入した後、Product Teaserの変更を確認できるようになります。
  1. ブラウザに戻り、ホームページを再度更新します。 http://localhost:4502/editor.html/content/venia/us/en.html . 更新された製品Teaserスタイルが適用されていることが確認できます。
  2. 製品テーザーを追加してテストします。 レイアウトモードを使用して、複数のティーザーを一列に表示するためにコンポーネントの幅とオフセットを変更します。

トラブルシューティング

CRXDE-Liteで、更新されたCSSファイルがデプロイされたこ とを確認できます http://localhost:4502/crx/de/index.jsp#/apps/venia/clientlibs/clientlib-site/css/site.css
新しいCSSファイルやJavaScriptファイルをデプロイする場合は、ブラウザーで古いファイルが提供されないようにすることも重要です。 これは、ブラウザーのキャッシュをクリアするか、新しいブラウザーセッションを開始することで解消できます。
また、AEMは、パフォーマンスを考慮してクライアントライブラリをキャッシュしようとします。 コードのデプロイメントに従って、古いファイルが提供されることがあります。 クライアントライブラリの [再構築]ツールを使用して、AEMクライアントライブラリのキャッシュを手動で無効にすることができます AEMが古いバージョンのクライアントライブラリをキャッシュしていると思われる場合は、「キャッシュを無効にする」をお勧めします。 ライブラリの再構築は非効率で時間がかかります。

Congratulations

最初のAEM CIFコアコンポーネントとWebPackデベロッパーサーバーを使用しただけです。

ボーナスチャレンジ

AEM Styleシステムを使用して 、コンテンツ作成者がオン/オフを切り替えることのできる2つのスタイルを作成します。 スタイルシステムを使用した開発では 、この作業を行う方法に関する詳細な手順と情報が説明されています。