動的でエキサイティングなホームページを設定する、ティーザーおよびカルーセルコンポーネントの実装について説明します。

前提条件

これは、複数のパートで構成されているチュートリアルの第 7 章です。第 6 章はこちら概要はこちらから確認できます

GitHub で完成済みコードを参照するか、ソリューションパッケージをダウンロードできます。

ダウンロード


WKND チュートリアルのこの時点では、優れた構造の記事テンプレートを実装するのに長い時間がかかっています。優れた記事を作成することはできても、ホームページには手が回っていません。このパートでは、AEM コアコンポーネントの 2 つのコンポーネントを拡張します。

  • ティーザーコンポーネント - 画像、タイトル、説明、および「コールトゥアクション」ボタンが含まれます。
  • カルーセルコンポーネント - 作成者が既存のコンポーネントを使用してカルーセルの複数の「スライド」を設定できる、変更されたコンテナコンポーネント。

以下は、WKND プロジェクトに様々なスタイルと設定を適用した後の、最終的なティーザーおよびカルーセルコンポーネントの例です。

WKND ティーザーのサンプル
カードスタイルを適用したティーザーコンポーネント
WKND ヒーローカルーセル
ヒーロースタイルを適用したカルーセルコンポーネント。カルーセルコンポーネントは、それぞれが独自のスタイルを持つティーザーコンポーネントを実際に埋め込みます。

ティーザーコンポーネントの追加

ティーザーコンポーネントは、Maven アーキタイプ作成の一環として WKND プロジェクトにプロキシ化されています。アドビでは、テンプレートポリシーを更新し、ティーザーコンポーネントをホームページに追加できるようにする予定です。

  1. ui.apps モジュールの /apps/wknd/components の下に、プロキシ化された teaser コンポーネントがあります。sling:resourceSuperType プロパティを調べ、core/wcm/components/teaser/v1/teaser を示していることを確認します。また、imageDelegate プロパティもwknd/components/content/image を示しています。ティーザーコンポーネントは画像を使用して、ティーザーの一環として画像を設定します。
     

    2018-11-20_at_5_43am
  2. AEM/ツール/一般/テンプレート/WKND サイト/ランディングページテンプレートへ移動し、テンプレートを編集します。

  3. 構造モードでメインレイアウトコンテナを選択し、ポリシーアイコンをタップしてポリシーを編集します。

    2018-11-20_at_5_55am
  4. WKND コンテンツポリシーを更新します。WKND.Content コンポーネントグループで、ティーザーコンポーネントを選択し、右上のチェックをタップして変更を保存します。

    2018-11-20_at_5_56am
  5. メインレイアウトコンテナ内でレイアウトコンテナコンポーネントのポリシーを更新します。

    2018-11-20_at_6_04am

    ポリシーを WKND コンテンツポリシーに設定し、レイアウトコンテナに適用します。これにより、ランディングページテンプレートで新しいレイアウトテンプレートを作成する際には固定幅スタイルを使用できます。

    nov-20-2018_06-06-38

作成者ティーザー

次に、開発の元となるサンプルコンテンツをいくつか含めたティーザーコンポーネントを作成します。

  1. 記事ページテンプレートを使用して記事をいくつか作成します。ティーザーは、ティーザーコンテンツの一部として、リンクされているページのタイトルと定義を動的に取得します。これにより、サイト全体での一貫性を保ちます。 

    また、CRX パッケージマネージャーを使用して、作成済みのサンプル記事が複数含まれるパッケージをインストールすることもできます。

    ダウンロード

    注意:

    スタイルシステムは、各スタイルを表す cq:styleId(タイムスタンプに基づいた数値)を割り当てます。cq:styleId は、次に、コンテンツノードでテンプレートからスタイルを参照するために使用されます。これにより、上記のコンテンツパッケージをインストールすると、スタイルが設定されていないコンポーネントとなる可能性が高くなります。この問題は、作成者環境でスタイルを再度有効化することで簡単に修正できます。ただし、ポリシーが異なる可能性がある環境間でコンテンツを移動する際には、いくつか考慮すべき点があります。

  2. AEM/サイト/WKND サイト/ホームでホームページへ移動し、編集をクリックして開きます。

  3. ページに別のレイアウトコンテナを追加します。新しいレイアウトコンテナに固定幅スタイルを適用します。

    nov-20-2018_06-11-35
  4. ページに新しいティーザーコンポーネントを追加してサンプルコンテンツをいくつか作成します。

    リンクとアクション
    記事ページをポイントしてコールトゥアクションを有効にします。
    2018-11-20_at_6_50am
    タイトルおよび説明用テキストや、リンクとアクションで参照されているページから動的に取得されます。
    2018-11-20_at_6_51am
    画像を選択してティーザーを設定します。
  5. さらに 2 つのティーザーコンポーネントを追加して設定します。レイアウトモードを使用してティーザーのサイズを変更し、横方向に調節します。

    2018-11-20_at_6_58am
    各ティーザーコンポーネントが水平方向に整列するよう、サイズ調節された 3 つのティーザーコンポーネント。

次に、ティーザーコンポーネントの新しいスタイルを追加します。

ティーザースタイル - カードの実装

ティーザーコンポーネントに実装する最初のスタイルは、ホームページ用のカードスタイルです。カーソルを合わせると「コールトゥアクション」ボタンが黄色にハイライト表示され、コンポーネントのコンテンツのカバーとなるスタイルが画像に設定されます。説明が設定されている場合、このスタイルでは非表示となります。

2018-11-20_at_7_30am
WKND クリエイティブチームによって定義されたとおりの署名コンポーネントデザイン

ティーザー BEM 表記

BLOCK cmp-teaser
    ELEMENT cmp-teaser__image
    ELEMENT cmp-teaser__title
    ELEMENT cmp-teaser__title-link
    ELEMENT cmp-teaser__description
    ELEMENT cmp-teaser__action-container
    ELEMENT cmp-teaser__action-link

上記はティーザーコンポーネントの BEM 表記です。コンポーネントのスタイルを設定しながら、これらのクラスのターゲットを絞ります。

/apps/wknd/clientlibs/clientlib-site/components の下の ui.apps プロジェクトで、次の手順をおこないます。

  1. /apps/wknd/clientlibs/clientlib-site/components の下の ui.apps プロジェクトで、次の手順をおこないます。

    1. teaser という名前の新しいフォルダーを作成します。
    2. teaser フォルダーの下に、teaser.less という名前の新しいファイルを作成します。
    3. teaser フォルダーの下に、styles という名前の新しいフォルダーを作成します。
    4. styles フォルダーの下に、default.less という名前の新しいファイルを作成します。
    5. styles フォルダーの下に、card.less という名前の新しいファイルを作成します。
    2018-11-20_at_7_49am
  2. 以下のように teaser.less を設定します。

    /* WKND Teaser Styles */
    
    @teaser-light-color: #fff;
    @teaser-dark-color: @text-color;
     
    @import (once) "styles/default.less";
    @import (once) "styles/card.less";
    

    これには、default.lesscard.less スタイルも含まれます。また、ティーザースタイル全体で使用されるティーザー固有のカラーが 2 色作成されます。

  3. ティーザーの次のデフォルトスタイルで default.less を設定します。

    .cmp-teaser {
    
        .cmp-teaser__title {
            font-family: @font-family-serif;
            margin-top: 0;
        }
        
        .cmp-teaser__title-link {
        	color: @teaser-dark-color;
        }
        
        .cmp-teaser__description {
        	color: @gray;
        	font-size: @font-size-small;
        	margin: 1em 0;
        	
        }
        
        .cmp-teaser__action-link {
    	    background-color: @brand-primary;
    	    text-transform: uppercase;
    	    font-size: @font-size-small;
    	    padding: 0.75em 3.5em;
    	    margin-top: .5em;
    	    font-weight: @font-weight-bold;
    	    color: @teaser-dark-color;
    	}
    }
  4. カードスタイルは card.less で定義されます。カードスタイルの定義に使用するクラスには、cmp-teaser--card という名前が付けられます。見た目を統一するために、カードスタイルを適用する際には、ティーザーの高さを 350px に固定します。また、ユーザーがカードにマウスポインターを重ねたときにサブタイトルのアニメーションを追加する CSS トランジションを利用することもできます。

    以下のように card.less を設定します。

    /* WKND teaser - card.less*/
      
    @teaser-height: 350px;
    @teaser-img-height:  @teaser-height;
    
    .cmp-teaser--card {
    
        .cmp-teaser {
            position: relative;
            height:  @teaser-height;
            max-height:  @teaser-height;
            overflow: hidden;
            background-color: #ededed;
            margin-bottom: @gutter-padding;
    
            @media (max-width: @screen-small) {
                width:  @teaser-height;
                margin-left: auto !important;
                margin-right: auto !important;
            } 
            
            .cmp-teaser__image {
                width: 100%;
                overflow: hidden;
                padding-top: 0px;
    
                .cmp-image__image {
                    margin-top: 0px;
                    object-fit: cover;
                    object-position: top;
                    height: @teaser-img-height;
                    width: 100%;
                    -webkit-transition: all .2s;
                    -moz-transition: all .2s; 
                    -o-transition: all .2s;
                    transition: all .25s;
                }
            }
    
            .cmp-teaser__title {
                font-family: @font-family-serif;
                width: 100%;
                text-align: left;
                font-size: @font-size-h3;
                margin-top: 0;
                position: absolute;
                top: @gutter-padding;
                padding-left: @gutter-padding;
            }
    
            .cmp-teaser__title-link {
                color: @teaser-light-color;
            }
    
            .cmp-teaser__description {
                display: none;
            }
    
            .cmp-teaser__action-container {
                position: absolute;
                bottom: @gutter-padding * 2;
                left: @gutter-padding;
            }
    
            .cmp-teaser__action-link {
                border: 1px solid @teaser-light-color;
                color: @teaser-light-color;
                background-color: transparent;
                -webkit-transition: all .25s ease-out;
                -moz-transition: all .25s ease-out;
                -o-transition: all .25s ease-out;
                transition: all .25s ease-out;
            }
    
            &:hover {
                .cmp-teaser__action-link {
                    color: @teaser-dark-color;
                    background-color: @brand-primary;
                    border-color: @brand-primary;
                    
                }
    
                .cmp-image__image {
                    -moz-transform: scale(1.05);
                    -webkit-transform: scale(1.05);
                    transform: scale(1.05);
                }
            }
        }
    }
  5. teaser.less を含めるよう /apps/wknd/clientlibs/clientlib-site/main.less を更新します。

    読み込みステートメントを追加して、コンポーネントスタイルの他の読み込みの下に teaser.less を含めます。

    /* main.less */
    
    ...
    
    /* Component Styles */
    @import "components/breadcrumb/breadcrumb.less";
    @import "components/byline/byline.less";
    @import "components/contentfragment/contentfragment.less";
    @import "components/header/header.less";
    @import "components/image/image.less";
    @import "components/layout-container/layout-container.less";
    @import "components/list/list.less";
    @import "components/navigation/navigation.less";
    @import "components/search/search.less";
    @import "components/text/text.less";
    /* import teaser.less */
    @import "components/teaser/teaser.less";
    @import "components/title/title.less";
  6. コードを AEM にデプロイする

    コードを AEM にデプロイし、古い CSS が使われないようブラウザーのキャッシュをクリアしてから、ティーザーコンポーネントを使用してページを更新し、スタイルを完全に適用します。

ティーザースタイルの適用 - カード

  1. AEM で、ページテンプレートに移動します。

    AEM スタート/ツール/一般/テンプレート/WKND サイト/ランディングページテンプレート

  2. 構造ノードで、ティーザーのポリシーアイコンをクリックしてポリシーを設定します。

    2018-11-20_at_8_30am
  3. WKND ティーザーという名前の新しいポリシーを作成します。

    1. 「スタイル」タブの下で新しいスタイルグループを作成します。
    2. 名前が Card、値が cmp-teaser--card のスタイルを追加します。
    ティーザーのポリシーにカードスタイルを追加する
    ティーザーのポリシーにカードスタイルを追加する
  4. ティーザーコンポーネントが作成されたホームページに移動します。clientlib-site で定義した「デフォルト」スタイルが表示されるようになりました。

    「デフォルト」スタイルを使用したティーザー
    「デフォルト」スタイルを使用したティーザー
  5. ティーザーコンポーネントにカードスタイルを適用します。コンポーネントは高さがすべて均一になりました。

    カードスタイルを使用したティーザー
    カードスタイルを使用したティーザー
  6. プレビューモードに切り替え、カーソルを合わせたときの CSS トランジションエフェクトを表示します。

ティーザーと同様、カルーセルコンポーネントは、Maven アーキタイプ作成の一環として WKND プロジェクトにプロキシ化されています。アドビでは、テンプレートポリシーを更新し、カルーセルコンポーネントをホームページに追加できるようにする予定です。

  1. ui.apps モジュールの /apps/wknd/components の下に、プロキシ化された carousel コンポーネントがあります。sling:resourceSuperType プロパティを調べ、core/wcm/components/carousel/v1/carousel を示していることを確認します。cq:editConfig ノードも確認します。cq:editConfig を使用すると、開発者はコンポーネントの作成時に高度な編集ビヘイビアーを指定できます。この場合、編集の後で、全ページの更新もトリガーされます。これは、javascript に大きく依存しているコンポーネントで作業する、一般的なデザインパターンです。
     

    2018-11-20_at_9_14am
  2. AEM/ツール/一般/テンプレート/WKND サイト/ランディングページテンプレートへ移動し、テンプレートを編集します。

  3. 構造モードでメインレイアウトコンテナを選択し、ポリシーアイコンをタップしてポリシーを編集します。

    2018-11-20_at_5_55am
  4. WKND コンテンツポリシーを更新します。WKND.Content コンポーネントグループで、カルーセルコンポーネントを選択し、右上のチェックをタップして変更を保存します。

    2018-11-20_at_9_20am
  5. ポリシーアイコンをクリックしてカルーセルポリシーを更新します。

    2018-11-20_at_1020am
  6. WKND カルーセルという名前の新しいポリシーを作成します。

    他のコンポーネントは異なり、カルーセルは、レイアウトコンテナのようにサブコンポーネントを埋め込むコンテナコンポーネントと見なされます。「許可されているコンポーネント」を更新し、WKND.Contentティーザーコンポーネントのみが含まれるようにします。

    2018-11-20_at_1022am

次に、ホームページでスタイルが設定されていないカルーセルを作成します。このカルーセルはヒーローカルーセルとして機能し、複数のティーザーがスライドとして含まれます。

  1. AEM/サイト/WKND サイト/ホームでホームページへ移動し、編集をクリックして開きます。

  2. カルーセルコンポーネントをページの固定レイアウトコンテナの上、ヘッダーのすぐ下に追加します。カルーセルコンポーネントをページの横幅いっぱいに広げます。

    2018-11-20_at_1043am
  3. 新しいティーザーコンポーネントをカルーセルコンポーネントに追加します。カルーセルに追加されるコンポーネントはティーザーコンポーネントのみです。これは、前のセクションで設定したポリシーに基づいています。

  4. スパナアイコンをクリックしてティーザーコンポーネントを編集します。外側のカルーセルではなく、ティーザーコンポーネントを編集するようにしてください。

    2018-11-20_at_1046am
  5. スケートボードのヒーロー画像を使用してティーザーコンポーネントを作成します。ページのタイトルと説明から取得するには、「タイトル」と「説明」フィールドにチェックマークをオンにしたままにします。「LA スケートパークの究極ガイド」の記事を指すようティーザーをリンクさせ、コールトゥアクションを有効化します。CTA ラベルを更新して「続きを読む」にします。

    hero-teaser
  6. カルーセルコンポーネントを編集し、LA Skatepark ティーザーの下に追加ティーザーを 2 つ追加します。

    carousel-addteasers
  7. カルーセルに 2 つ以上のアイテムを追加すると、カルーセル編集メニューに新しいアイコンが表示されます。選択パネルアイコンをクリックし、カルーセル内の別のパネルに移動します。

    2018-11-20_at_1104am

    これで、他のティーザーコンポーネントを編集できるようになります。他のティーザーコンポーネントを作成し、次のように、カルーセル内のティーザーが 3 つになるようにします。

    2018-11-20_at_1113am

    次の画面で、追加スタイルであるスライドを、カルーセル用に最適化されたティーザーコンポーネントに追加します。また、カルーセル用のスタイル「Hero」も実装します。

ティーザースタイル - スライドの実装

次に、スライドスタイルはティーザーコンポーネント用に実装されます。このスタイルは、全幅のカルーセルコンポーネントと組み合わせて使用するためのものです。モックアップに基づいて、ティーザーのタイトル、説明および CTA ボタンをグループ化し、画像に重ねます。残念ながら、ティーザーコアコンポーネントの既製のマークアップでは、タイトル、説明、および CTA ボタンの折り返しはおこなわれません。CSS 単体でこれを実現することも可能ですが、ティーザーコンポーネントのマークアップを拡張します。

2018-11-20_at_1123am
  1. /apps/wknd/components/content/teaser の下の ui.apps プロジェクトで、次の手順をおこないます。

    1. teaser.html という名前の新しいファイルを作成します。
    2. 以下のように teaser.html を設定します。
    <!--/* WKND Teaser Component
           Overrides /apps/core/wcm/components/teaser/v1/teaser/teaser.html
        */-->
    
      <div data-sly-use.teaser="com.adobe.cq.wcm.core.components.models.Teaser"
      data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
      data-sly-use.imageTemplate="image.html"
      data-sly-use.titleTemplate="title.html"
      data-sly-use.descriptionTemplate="description.html"
      data-sly-use.actionsTemplate="actions.html"
      data-sly-test.hasContent="${teaser.imageResource || teaser.title || teaser.description || teaser.actions.size > 0}"
      class="cmp-teaser${!wcmmode.disabled && teaser.imageResource ? ' cq-dd-image' : ''}">
     <sly data-sly-call="${imageTemplate.image @ teaser=teaser}"></sly>
     
    <!--/* Add content wrapper div to surround text elements */-->
     <div class="cmp-teaser__content-wrapper">
        <sly data-sly-call="${titleTemplate.title @ teaser=teaser}"></sly>
        <sly data-sly-call="${descriptionTemplate.description @ teaser=teaser}"></sly>
        <sly data-sly-call="${actionsTemplate.actions @ teaser=teaser}"></sly>
     </div>
    
    </div>
    <sly data-sly-call="${templates.placeholder @ isEmpty=!hasContent, classAppend='cmp-teaser'}"></sly>
     

    上記の teaser.html ファイルを追加することで、/apps/core/wcm/components/teaser/v1/teaser/teaser.html にある v1 Teaser コンポーネントから HTL スクリプトを効果的にオーバーライドします。プロキシ化されたコンポーネントのマークアップをオーバーライドするにはこれが効果的な方法です。ベストプラクティスとしては、拡張したいファイルのみをオーバーライドすることが推奨されます。

    この場合、クラス名が cmp-teaser__content-wrapper のラッパー div を追加しました。この div は、タイトル、説明、および CTA マークアップを囲みます。

    警告:

    /apps/wknd/components/content/teaser の下に teaser.html ファイルを含めることで、カルーセルで使用するティーザーだけではなく、WKND サイトで使用されるすべてのティーザーコンポーネントにマークカップを拡張します。これは、コンポーネントの HTL を変更する際の重要な考慮事項です。

  2. /apps/wknd/clientlibs/clientlib-site/components/teaser/styles の下の ui.apps プロジェクトで、次の手順をおこないます。

    1. slide.less という名前の新しいファイルを作成します。
    2. 次のように slide.less を設定します。
    /* WKND teaser - default.less*/
    
    
    @slide-height: 700px;
    @slide-mobile-height: 400px;
    @slide-content-width: 450px;
    
    .cmp-teaser--slide {
    
    .cmp-teaser {
        min-height: @slide-height;
        position: relative;
        overflow: hidden;
    
        @media (max-width: @screen-small) {
            min-height: @slide-mobile-height;
        }
    
            .cmp-image__image {
                height: @slide-height;
                object-fit: cover;
                object-position: top;
                width: 100%;
                padding: 0;
                margin:0;
    
                @media (max-width: @screen-small) { 
                    opacity: .75;
                }
            }
    
            .cmp-teaser__content-wrapper {
                .container-content();
                left: 0;
                right: 0;
                position: absolute;
                left: @gutter-padding * 2;
                bottom: 8em;
    
    
                @media (max-width: @screen-medium) {
                    top: 8em;
                }
    
                @media (max-width: @screen-small) {
                    top: 8em;
                    left:0;
                    text-align: center;
                }
    
            }
    
            .cmp-teaser__title {
                font-family: @font-family-serif;
                width: 100%;
                color: @dark-color;
                bottom: 20px;
                font-size: @font-size-h1;
                max-width: @slide-content-width - 100;
                @media (max-width: @screen-small) {
                    max-width: 100%;
                }
            }
    
            .cmp-teaser__description {
                color: @gray;
                font-size: @font-size-small;
                margin-bottom: 2em;
                max-width: @slide-content-width;
    
                @media (max-width: @screen-small) {
                    max-width: 100%;
                }
            }
    
            .cmp-teaser__action-link {
                background-color: @brand-primary;
                text-transform: uppercase;
                font-size: @font-size-small;
                padding: 0.75em 3.5em;
                margin-top: .5em;
                font-weight: @font-weight-bold;
            }
        }
    }
    
  3. slide.less を含めるよう /apps/wknd/clientlibs/clientlib-site/components/teaser/teaser.less を更新します。

    /* WKND Teaser Styles */
    
    @teaser-light-color: #fff;
    @teaser-dark-color: @text-color;
     
    @import (once) "styles/default.less";
    @import (once) "styles/card.less";
    @import (once) "styles/slide.less";
  4. コードを AEM にデプロイする

    コードを AEM にデプロイし、古い CSS が使われないようブラウザーのキャッシュをクリアしてから、ティーザーコンポーネントを使用してページを更新し、スタイルを完全に適用します。

ティーザースタイルの適用 - スライド

  1. AEM で、ページテンプレートに移動します。

    AEM スタート/ツール/一般/テンプレート/WKND サイト/ランディングページテンプレート

  2. 構造ノードで、ティーザーのポリシーアイコンをクリックしてポリシーを設定します。

    2018-11-20_at_8_30am
  3. WKND ティーザーポリシーを更新します。

    1. 「スタイル」タブの下に、名前が Slide、値が cmp-teaser--slide のスタイルを追加します。
    ティーザーのポリシーにカードスタイルを追加する
    ティーザーのポリシーにカードスタイルを追加する
  4. カルーセルコンポーネントとティーザーコンポーネントが作成されたホームページに移動します。カルーセル内の各ティーザーを更新し、スライドスタイルを適用します。

    スライドスタイルを適用したカルーセル内のティーザー。
    スライドスタイルを適用したカルーセル内のティーザー。

この時点で、カルーセルのコンテンツ、スライドスタイルを適用したティーザーに問題はないようです。現在、カルーセルにはパネル間のハードトランジションが設定されています。サードパーティ CSS ライブラリである Animate.css をプロジェクトに追加してスタイルを含め、次のスライドへの優れたフェードイントランジションを作成します。また、ホームページカルーセルのモックアップと一致させるカルーセルに適用できる、新しいヒーロースタイルも作成します。

  1. ui.apps プロジェクト(/apps/wknd/clientlibs の下)で、次の手順をおこないます。

    1. vendorという名前の新しいフォルダーを作成します。
    2. vendor フォルダーの下に、名前が animatecss、タイプが cq:ClientLibraryFolder の新しいノードを作成します。
    3. String[] プロパティをanimatecssフォルダー(名前が「categories」、値が [vendor.animatess])に追加します。
    2018-11-20_at_2_10pm
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root 
        xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
        xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        categories="[vendor.animatecss]"/>
  2. /apps/wknd/clientlibs/vendor/animatecss クライアントライブラリフォルダーの下で、次の手順をおこないます。

    1. css.txt という名前の新しいファイルを作成します。
    2. css という名前の新しいフォルダーを作成します。
    3. css フォルダーの下に、animate.css という名前の新しいファイルを作成します。
    2018-11-20_at_2_13pm
  3. 以下のように css.txt を設定し、animate.css ファイルを含めます。

    #base=css
    
    animate.css
  4. https://daneden.github.io/animate.css/ から Animate.css をダウンロードし、クライアントライブラリで animate.css ファイルを設定します。

  5. embed プロパティ(/apps/wknd/clientlibs/clientlib-base クライアントライブラリ)を更新し、ベンダーの animatecssクライアントライブラリに埋め込みます。

    clientlib-base の XML 表現は次のとおりです。clientlibrary カテゴリの埋め込み順は、CSS のレンダリング順に影響します。

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        allowProxy="{Boolean}true"
        categories="[wknd.base]"
        embed="[wknd.webfonts,vendor.animatecss,core.wcm.components.tabs.v1,core.wcm.components.carousel.v1,core.wcm.components.image.v2,core.wcm.components.breadcrumb.v2,core.wcm.components.search.v1,core.wcm.components.form.text.v2,wknd.site]"/>
  6. Animate.css アニメーションを活用する再使用可能な mixin を含めるよう /apps/wknd/clientlibs/clientlib-site/less/mixins.less を更新します。

    /* mixins.less */
    
    ...
    
    .animated() {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    
    .fadeIn() {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
    }
BLOCK cmp-carousel
    ELEMENT cmp-carousel__content
    ELEMENT cmp-carousel__item
    ELEMENT cmp-carousel__action
        MOD cmp-carousel__action--previous
        MOD cmp-carousel__action--next
    ELEMENT cmp-carousel__action-icon
    ELEMENT cmp-carousel__action-text
    ELEMENT cmp-carousel__indicators
    ELEMENT cmp-carousel__indicator

上記はカルーセルコンポーネントの BEM 表記です。コンポーネントのスタイルを設定しながら、これらのクラスのターゲットを絞ります。

/apps/wknd/clientlibs/clientlib-site/components の下の ui.apps プロジェクトで、次の手順をおこないます。

  1. /apps/wknd/clientlibs/clientlib-site/components の下の ui.apps プロジェクトで、次の手順をおこないます。

    1. carousel という名前の新しいフォルダーを作成します。
    2. carousel フォルダーの下に、carousel.less という名前の新しいファイルを作成します。
    3. carousel フォルダーの下に、styles という名前の新しいフォルダーを作成します。
    4. styles フォルダーの下に、default.less という名前の新しいファイルを作成します。
    5. styles フォルダーの下に、hero.less という名前の新しいファイルを作成します。
    2018-11-20_at_1_56pm
  2. 以下のように carousel.less を設定します。

    /* WKND Carousel Styles */
    
    @import (once) "styles/default.less";
    @import (once) "styles/hero.less";
    

    これには、default.lesscard.less スタイルも含まれます。また、ティーザースタイル全体で使用されるティーザー固有のカラーが 2 色作成されます。

  3. カルーセルの次のデフォルトスタイルで default.less を設定します。これにより、トランジションが発生したときにカルーセルパネルをフェードインさせるために、animated() および .fadeIn() mixin を含めます。

    /* WKND Carousel - default.less */
    
    .cmp-carousel {
    
        .cmp-carousel__item {
            .animated();
            .fadeIn();
    
            display: none;
            &--active {
                display: block;
            }
        }
    
    }
  4. ヒーロースタイルは hero.less で定義されます。カードスタイルの定義に使用するクラスには、cmp-carousel--hero という名前が付けられます。カルーセルインジケーターの位置をティーザーコンテンツに近づけるよう更新する予定です。カルーセルアクション、左向き矢印および右向き矢印も暗い色に更新されます。

    次の LESS を使用して hero.less を設定します。

    /* WKND Carousel - hero.less*/
     
    @cmp-carousel-indicator-size: 10px;
    @cmp-carousel-action-icon-size: 24px;
    
    .cmp-carousel--hero {
        padding:0;
    
        .cmp-carousel__action {
            width: 8%;
            cursor: pointer;
    
            @media (max-width: @screen-medium) {
                width: 5%;
            }
            @media (max-width: @screen-small) {
                width: @gutter-padding * 2;
            }
        }
    
        .cmp-carousel__action--previous {
            left: 0;
            .cmp-carousel__action-icon {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    
            }
        }
        
        .cmp-carousel__action--next {
            right: 0;
        
            .cmp-carousel__action-icon {
                background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
            }
        }
        
        .cmp-carousel__indicators {
            .container-content();
            padding: 0;
            bottom: 30px;
            padding-left: @gutter-padding * 2;
            display: flex;
            justify-content: left;
            list-style: none;
            background-color: transparent;
            height:50px;
    
            @media (max-width: @screen-medium) {
                justify-content: center;
            }
        }
        
        .cmp-carousel__indicator {
            position: relative;
            cursor: pointer;
            flex: 0 1 auto;
            width: @cmp-carousel-indicator-size;
            height: @cmp-carousel-indicator-size;
            margin: 6px 8px;
            border-radius: 50%;
        
            font-size: 0;
            text-indent: -3000px;
        
            background-color: rgba(116, 116, 116, 0.5);
        
            &--active {
                background-color: rgba(0, 0, 0, 0.9);
            }
        }
        
    }
  5. carousel.less を含めるよう /apps/wknd/clientlibs/clientlib-site/main.less を更新します。

    読み込みステートメントを追加して、コンポーネントスタイルの他の読み込みの下に carousel.less を含めます。

    /* main.less */
    
    ...
    
    /* Component Styles */
    @import "components/breadcrumb/breadcrumb.less";
    @import "components/byline/byline.less";
    /* import carousel styles */
    @import "components/carousel/carousel.less";
    @import "components/contentfragment/contentfragment.less";
    @import "components/header/header.less";
    @import "components/image/image.less";
    @import "components/layout-container/layout-container.less";
    @import "components/list/list.less";
    @import "components/navigation/navigation.less";
    @import "components/search/search.less";
    @import "components/text/text.less";
    @import "components/teaser/teaser.less";
    @import "components/title/title.less";
  6. コードを AEM にデプロイする

    コードを AEM にデプロイし、古い CSS が使用されないようブラウザーのキャッシュをクリアします。

  1. AEM で、ページテンプレートに移動します。

    AEM スタート/ツール/一般/テンプレート/WKND サイト/ランディングページテンプレート

  2. 構造ノードで、カルーセルのポリシーアイコンをクリックしてポリシーを設定します。

    2018-11-20_at_2_52pm
  3. WKND カルーセルポリシーを更新します。

    1. 「スタイル」タブの下に、名前が Hero、値が cmp-carousel--hero のスタイルを追加します。
    カルーセルのポリシーにヒーロースタイルを追加する
    カルーセルのポリシーにヒーロースタイルを追加する
  4. カルーセルコンポーネントが作成されたホームページに移動します。カルーセルコンポーネントにヒーロースタイルを適用します。

    スライドスタイルを適用したカルーセル内のティーザー。
    スライドスタイルを適用したカルーセル内のティーザー。

    カルーセルインジケーターの位置が変わり、「前へ」ボタンと「次へ」ボタンのスタイルが更新されたのがわかります。また、スライドとスライドの間には素敵なフェードトランジションが使用されます。

    次のセクションでは、ヘッダーコンポーネントがカルーセルに重なるよう、ページデザインを更新することで、ヒーローカルーセルを完了させます。

ホームページスタイルの実装

2018-11-20_at_3_00pm
カルーセルの一番上に重なったヘッダーコンポーネント

モックアップに基づいて、ヒーローカルーセルをページの一番上で始め、ヘッダーコンポーネントをその上に重ねるようにします。カルーセルコンポーネントが設定されている場合にのみ、ホームページのこのビヘイビアーが動作するようにします。現在、HTML ルート DIV には、スティッキーヘッダーがコンポーネントに重ならないようにするパディングがあります。このセクションでは、ページ全体に適用して、作成者がホームページスタイルを切り替え、パディングを削除できる新しいスタイルを追加します。

  1. /apps/wknd/clientlibs/clientlib-site/components/page/styles の下の ui.apps プロジェクトで、次の手順をおこないます。

    1. homepage.less という名前の新しいファイルを作成します。
  2. 以下のように homepage.less を設定します。

    /* WKND Page - homepage.less */
    
    body.wknd-page--home {
        .root {
            padding-top:0px;
            @media (max-width: @screen-medium) {
                padding-top:0px;     
            }
        }
    }

    これにより、root div の上パディングが削除されます。

  3. homepage.less スタイルを含めるよう /apps/wknd/clientlibs/clientlib-site/components/page/page.less を更新します。

    /* WKND Page styles */
    
    @import (once) "styles/default.less";
    @import (once) "styles/homepage.less";
  4. /apps/wknd/clientlibs/clientlib-author/less/header.less を更新して、作成環境で Homepage スタイルが適用されると、ヘッダースタイルが更新されるようにします。

    /* clientlib-author /less/header.less */
    
    ...
    
    body.wknd-page--home {
        
        .wknd-header {
            position: fixed;
        }
    }
  5. コードを AEM にデプロイする

    コードを AEM にデプロイし、古い CSS が使用されないようブラウザーのキャッシュをクリアします。

「ホームページ」スタイルの適用

  1. AEM で、ページテンプレートに移動します。

    AEM スタート/ツール/一般/テンプレート/WKND サイト/ランディングページテンプレート

  2. 構造モードで、ページエディターメニュー/ページポリシーをクリックします。

    2018-11-20_at_3_31pm
  3. WKND ランディングページという名前の新しいポリシーを作成します。

    1. 「スタイル」タブの下に、名前が Homepage、値が wknd-page--hero のスタイルを追加します。
    カルーセルのポリシーにヒーロースタイルを追加する
    カルーセルのポリシーにヒーロースタイルを追加する
  4. カルーセルコンポーネントが作成されたホームページに移動します。ページにホームページスタイルを適用します。

    「ホームページ」スタイルを適用したページ。
    「ホームページ」スタイルを適用したページ。

    ヒーローカルーセルがページの上部へ移動したのがわかります。プレビューまたは wcmmode=disabled でページを表示しているときでもカルーセルを編集できますが、カルーセルはページの上半分を占めることになります。

まとめ

以下は、完成済みホームページの作成済みバージョンのスクリーンショットです。

finalchapter7

ヘルプ

行き詰まったり、追加の質問がある場合は、AEM 用 Experience League フォーラムを確認するか、既存の GitHub の問題を参照してください。

探していた情報が見つからなかった場合やエラーが見つかった場合は、WKND プロジェクトの問題として GitHub で報告してください。

次の手順

チュートリアルの次のパート:

ダウンロード