AEM Sites の概要(第 3 章)- クライアント側のライブラリおよびレスポンシブグリッド

AEM Sites の実装で CSS および Javascript をデプロイおよび管理するための、AEM のクライアント側ライブラリ(clientlib)の作成について説明します。また、AEM のレスポンシブグリッドおよびモバイルエミュレーターの統合について説明します。フロントエンド開発を迅速化するために、aemfed モジュールを使用します。

前提条件

これは、複数のパートで構成されているチュートリアルの第 3 章です。第 2 章はこちらから参照できます。また、概要はこちらから参照できます

完了したコードを GitHub で参照するか、ソリューションパッケージをダウンロードしてください。

ダウンロード

フロントエンドのフレームワーク

以下は、WKND サイトの作成に使用されるフロントエンド技術の一部です。サードパーティのフレームワークを簡単に AEM Sites に統合できることを理解していただけるでしょう。

LESS - よく使用されている CSS プリコンパイラー。変数などの機能を使用できます。AEM のクライアントライブラリは、LESS のコンパイルをネイティブにサポートしています。Saas などのプリコンパイラーも使用できますが、その場合、AEM 以外でコンパイルする必要があります。

jQuery - よく使用されている、HTML を操作するための豊富な機能が揃った JavaScript ライブラリ。

aemfed - npm モジュール。 aemsync および BrowserSync を使用して、 変更を即座にデプロイおよび再読み込みすることで、 フロントエンド開発をスピードアップさせます。

 

クライアント側ライブラリの構造

クライアント側ライブラリは、AEM Sites の実装で必要な CSS および JavaScript ファイルの編成および管理のための仕組みを提供します。クライアントライブラリ(clientlib)の基本的な目的は、以下のとおりです。

  1. CSS/JS を、開発および管理が簡単な個別の小さなファイルに保存する
  2. 組織立った方法で、サードパーティのフレームワークへの依存関係を管理する
  3. CSS/JS を 1~2 個の要求に連結することで、クライアント側の要求数を最小限にする
  4. 提供される CSS/JS を最小化し、サイトのスピード/パフォーマンスを最適化する

クライアント側ライブラリの使用の詳細については、こちらを参照してください。

クライアント側ライブラリは、様々な編成方法を提供します。以下は、WKND サイトおよび WE.Retail サイトで使用されている規則です。これは、Sites のほとんどの実装に対して適用できます。

clientlib のアーキテクチャ
Clientlib のアーキテクチャの概要

AEM Sites のクライアント側ライブラリ

スタイルおよび javascript が含まれているクライアント側ライブラリを実装します。これはサイト全体に適用されます。一貫性のある外観と操作性を創出するために、いくつかのグローバルスタイルおよびブランド変数が含まれています。

クライアントライブラリの作成は、AEM での他のあらゆるタイプのノードの作成とそれほど変わりません。基本構造には以下のものが含まれます。

[cq:ClientLibraryFolder] - jcr:primaryType
     - categories (String[])
     - embed (String[])
     - dependencies (String[])
     + css.txt (nt:file)
     + js.txt (nt:file)

WKND サイトのクライアントライブラリには、多数のノードおよびファイルがあります。チュートリアルを効率よく進め、無駄な手順を回避するために、以下のパッケージをインストールしてください。これらには、WKND サイト用のいくつかの重要なクライアントライブラリが含まれています。これにより、いくつかの基礎的な HTML 要素のベースラインとなるスタイルが提供されます。 

クライアントライブラリはコードと見なされるので、/apps/wknd/clientlibs の下の ui.apps モジュールに保存されます。

  1. AEM プロジェクトのアーキタイプは、/apps/clientlibs/clientlib-base を自動作成します。以下の zip には、追加のクライアントライブラリのソースが含まれています。

    • clientlib-author
    • clientlib-dependencies
    • clientlib-site
  2. ダウンロード

    Chapter3-Clientlibs-Start.zip をダウンロードし、プロジェクト内で直接、ファイルシステムの ui.appps/src/main/content/jcr_root/apps/wknd/clientlibs の下で解凍します(必ず zip アーカイブ内のフォルダーのみをコピーしてください)。

  3. ui.apps モジュールの /apps/wknd の下には clientlibs フォルダーがあります。clientlibs フォルダーの下には 4 つのフォルダーがあります。

    ここからは、新しいクライアントライブラリである clientlib-dependenciesclientlib-site、および clientlib-author について確認します。

  4. clientlib-dependencies

    このクライアントライブラリは、Analytics、ContextHub、CSRF 保護、および Adobe Marketing Cloud の他の製品を統合するために使用される、いくつかの一般的な AEM javascript の依存関係を埋め込みます。AEM に付属する jquery のバージョン(/libs/clientlibs/granite/jquery)が使用されます。必要に応じて、より最新の jquery のバージョンをダウンロードし、新しいクライアントライブラリを作成できます。

    プロパティ:

    名前

    タイプ

    説明
    (チュートリアル用の情報。コピーしないでください)

    jcr:primaryType

    Name

    cq:ClientLibraryFolder

    クライアントライブラリを定義します

    allowProxy

    Boolean

    true

    /etc.clientlibs を介して CSS/JS を公開します

    categories

    String[]

    wknd.dependencies

    clientlib が参照可能になるカテゴリ

    embed

    String[]

    jquery
    granite.utils
    granite.jquery
    cq.jquery
    granite.shared
    cq.shared
    underscore

    jquery および Granite のいくつかのフレームワークを埋め込みます。granite.jquery と cq.jquery はどちらもラッパーに過ぎないので、実際は jquery の単一バージョンのみが埋め込まれます。

    <?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.dependencies]"
        embed="[jquery,granite.utils,granite.jquery,cq.jquery,granite.shared,cq.shared,underscore]"/>
    
    注意:

    通常、clientlib-dependencies の大部分は Javascript で構成されます。ただし、これらの依存関係は ContextHub などの機能で必要となるので、ページ最上部の HTML の head に組み込まれます。

  5. clientlib-site

    これは、WKND サイトのメインクライアントライブラリです。これには、サイト固有のスタイルが組み込まれています。また、variables.less および mixins.less という名前の 2 つのファイルが含まれています。これらにより、LESS のレバレッジ機能のいくつかが構築され、一貫性が確保されます。

    次に 2 つのファイル grid.lessmain.less について詳細に確認します。

    プロパティ:

    名前

    タイプ

    説明
    (チュートリアル用の情報。コピーしないでください)

    jcr:primaryType

    Name

    cq:ClientLibraryFolder

    クライアントライブラリを定義します

    allowProxy

    Boolean

    true

    /etc.clientlibs を介して CSS/JS を公開します

    categories

    String[]

    wknd.site

    clientlib が参照可能になるカテゴリ

    main.less - /apps/wknd/clientlibs/clientlib-site/main.less

    クライアントライブラリ内のすべての LESS スタイルのエントリポイントです。ファイルの最上部では、variables.less および mixins.less が読み込まれ、残りのファイルと共有されます。main.less の最下部では、コンポーネント固有のスタイルが読み込まれます。コンポーネント固有のファイルは、組織的なフォルダー構造となっています。main.less には grid.less という名前のファイルも含まれています。このファイルによって AEM のレスポンシブグリッドが作成されます。

    /* WKND main.less */ 
     
    /* Import variables */ 
    @import "less/variables.less"; 
     
    /* Import mixins */ 
    @import "less/mixins.less"; 
     
    /* Import Responsive Grid */ 
    @import "less/grid.less"; 
     
    /* Custom Icons for WKND site */ 
    @import "less/wkndicons.less"; 
     
    /* Page Styles at the top */ 
    @import "components/page/page.less"; 
     
    /* Component Styles */ 
    @import "components/breadcrumb/breadcrumb.less"; 
    @import "components/contentfragment/contentfragment.less"; 
    @import "components/image/image.less"; 
    @import "components/text/text.less"; 
    @import "components/title/title.less";

    grid.less - /apps/wknd/clientlibs/clientlib-site/less/grid.less

    AEM のレスポンシブグリッドを生成します。コンテンツ作成者はこれを使用することで、AEM のレイアウトモードおよびレイアウトコンテナのすべての機能を使用できるようになります。レスポンシブグリッドは、grid_base.less にあるカスタムの mixin を使用してグリッドを生成します。電話とタブレットのブレークポイントは、less/variables.less ファイルにある変数を使用しています。これらのブレークポイントは、空のテンプレートのタイプ、/conf/wknd/settings/wcm/template-types/empty-page/structure/jcr:content/cq:responsive/breakpoints で定義されたブレークポイントと一致します。

    grid_base.less - /apps/wknd/clientlibs/clientlib-site/less/grid_base.less

    grid_base.less は AEM によって提供されるファイルで、WKND プロジェクトのライブラリにコピーすることで、AEM のバージョン間での移植が簡単になります。

    警告:

    AEM によって提供される grid_base LESS ファイルの場所は、6.3 から 6.4 にかけて変更されました。独自のプロジェクト内でファイルを直接参照している場合、正しい場所が使用されていることを確認してください。

    • 6.3 レスポンシブグリッドのパス: /etc/clientlibs/wcm/foundation/grid/grid_base.less
    • 6.4 レスポンシブグリッドのパス: /libs/wcm/foundation/clientlibs/grid/grid_base.less
     
    /* 
     * grid_base.less is a file provided by AEM.  
     * For portability between versions of AEM the file has been copied into WKND project's client library. 
     * 
     * 6.3 Path to Responsive Grid: /etc/clientlibs/wcm/foundation/grid/grid_base.less 
     * 6.4 Path to Responsive Grid:  /libs/wcm/foundation/clientlibs/grid/grid_base.less 
     *  
     */ 
      
    @import "grid_base.less"; 
      
    /* maximum amount of grid cells to be provided */ 
    @max_col: 12; 
      
    /* default breakpoint */ 
    .aem-Grid { 
        .generate-grid(default, @max_col); 
        width: auto; 
    } 
     
    /* phone breakpoint */ 
    @media (max-width: @screen-small) { 
        .aem-Grid { 
            .generate-grid(phone, @max_col); 
        } 
    } 
     
    /* tablet breakpoint */ 
    @media (min-width: (@screen-small + 1)) and (max-width: @screen-large) { 
        .aem-Grid { 
            .generate-grid(tablet, @max_col); 
        } 
    } 
     
    .aem-GridColumn { 
        padding: 0 @gutter-padding; 
    } 
     
    .responsivegrid.aem-GridColumn { 
     padding-left: 0; 
     padding-right: 0; 
    }

    clientlib-site には webfonts という名前のフォルダーもあります。これは、Google の Web フォントを呼び出すための、小さなクライアントライブラリです。このクライアントライブラリは、CSS ファイルの最上部でロードされるので、残りの clientlib-site とは分離されています。次の節では、このクライアントライブラリを clientlib-base の一部として埋め込みます。

  6. clientlib-author

    ベストプラクティスとしては、作成者環境のコードベースをパブリッシュ環境とほぼ一致させておくことが推奨されます。より良好なオーサリング作業環境を実現するために、追加の CSS/JS が必要になる場合があります。WKND サイトは固定ヘッダーで設計されているので、エディターでは、ヘッダーコンポーネントを編集モードで選択しにくくなっています。そのため、CSS によって上書きされたわずかな部分をこのクライアントライブラリに保存し、作成者環境にのみロードします。これは慎重におこなってください。また、どうしても必要な場合以外はおこなわないでください。

    名前

    タイプ

    説明

    jcr:primaryType

    Name

    cq:ClientLibraryFolder

    クライアントライブラリを定義します

    categories

    String[]

    wknd.author

    clientlib が参照可能になるカテゴリ

clientlib-base の更新

  1. clientlib -base

    このクライアントライブラリは アーキタイプにより自動生成され、  WKND サイトが動作するために必要となる CSS および JavaScript の基本レベルを構成します。このライブラリには直接 CSS/JS ファイルは組み込まれておらず、 embed プロパティによって 複数のクライアントライブラリが組み込まれています。 

    embed プロパティを更新して、WKND 固有の 2 つのクライアントライブラリを組み込みます。1 番目の embed として、wknd.webfonts を組み込みます。wknd.site を文字列の配列の末尾に追加します。

    警告:

    embed の配列の順序は重要です。これで、ライブラリが組み込まれる順序が決まります。最初に Web フォントをロードし、サイト固有のライブラリを最後にロードすることで、コアコンポーネントから継承されるスタイルが必ず上書きされるようにします。

    名前

    タイプ

    説明

    jcr:primaryType

    Name

    cq:ClientLibraryFolder

    クライアントライブラリを定義します

    allowProxy

    Boolean

    true

    /etc.clientlibs を介して CSS/JS を公開します

    categories

    String[]

    wknd.base

    clientlib が参照可能になるカテゴリ

    embed

    String[]

    wknd.webfonts
    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.breadcrumb
    wknd.site

     

    それぞれのカテゴリに基づき clientlib を埋め込みます。コアコンポーネントのすべての clientlib をここに含めます。また、ブートストラップも含めます。ただし、JS のみとします。残りのブートストラップライブラリは、LESS を読み込むことで組み込まれます。wknd.site カテゴリは、clientlib-site ライブラリを埋め込みます。wknd.webfonts は分離され、最上部に埋め込まれます。これにより、生成される CSS ファイルの最上部で、Web フォントが正常に読み込まれます。

    <?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,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]"/>
    注意:

    いくつかのコアコンポーネントには、コンポーネントが適切に動作するためにページに組み込む必要があるクライアントライブラリが付属しています。例:/apps/core/wcm/components/image/v2/image/clientlibs

    このフォルダーには、1 つは editor、もう 1 つは site という名前の、2 つのクライアントライブラリがあります。editor clientlib は、作成者環境でのみ使用され、通常はコンポーネントダイアログによって組み込まれます。site clientlib は、コンポーネントを適切に動作させるために、プロジェクトの clientlib に組み込む必要があります。各コアコンポーネントについて、個々の clientlib の動作を把握するには、README.md を参照してください(/apps/core/wcm/components/image/v2/image/README.md)。

ヘッダースタイルの実装

次に、ヘッダーコンポーネントのためのいくつかの基本スタイルを実装します。ヘッダーコンポーネントを、ページと一緒にスクロールされる「固定」ヘッダーとして動作させます。また、タブレット/モバイル表示に最適となるよう、ヘッダーをサイズ変更します。clientlib-site ライブラリに LESS および JavaScript を追加します。

  1. ページスクロールリスナーを実装します。

    ブラウザーのスクロールをリッスンする javascript を追加し、HTML ページの body タグに CSS クラスを挿入します。これで、このクラスを変更することで、CSS を修正できます。この javascript をヘッダーコンポーネント専用とすることもできましたが、ここでは、他のすべてのコンポーネントのスクロール動作も対象とします。このスクリプトをグローバルスタイルとして、他のページスタイルにも追加します。

    apps/wknd/clientlibs/clientlib-site/components/page の下に、page.js という名前の新しいファイルを追加します。

  2. 以下のように page.js を設定します。

    /* JS Snippet to trigger class change on page scroll */ 
     
    (function (element, $) { 
        'use strict'; 
        var target = $(element), 
            className = "scrolly", 
            scroll, 
            mobileBreakpoint = 992; 
          
        if($(window).scrollTop() > 0) { 
            target.addClass(className); 
        } 
          
        $(window).scroll(function(){ 
               
             scroll = $(window).scrollTop(); 
        if(scroll > 0 ) { 
            target.addClass(className); 
        } else { 
            target.removeClass(className); 
        } 
    }); 
    }('body',jQuery));

    上記の関数は、スクロール位置が 0 から変わるたびに、「scrolly」という名前の CSS クラスを body タグに追加します。javascript はロードされた jQuery に依存します。clientlib-dependencies ライブラリは jQuery をページ上に組み込みます。

  3. page.js が組み込まれるよう /apps/wknd/clientlibs/clientlib-site/js.txt を更新します。クライアントライブラリの js.txt ファイルおよび css.txt ファイルは、どのファイルを、どのような順番でロードするかを明示します。クライアントライブラリにファイルを追加しただけでは、そのファイルはライブラリに組み込まれません。

    js.txt を更新します。


    #base=. 
     
    components/page/page.js 
    
  4.  apps/wknd/clientlibs/clientlib-site/components の下で、ヘッダースタイル用の以下のフォルダーおよびファイル構造を作成します。

    /apps/wknd/clientlibs/clientlib-site/components 
        +/header 
            + header.less 
            /styles 
                + default.less 
    

  5. header.less に以下を記述し、Header コンポーネントのデフォルトスタイルを組み込みます。

    /* WKND Header Styles */ 
     
    @import "styles/default.less";

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

    /* WKND Header - default.less */ 
     
    .wknd-header { 
     z-index: 1030; 
     position: fixed; 
     top: 0; 
     height:92px; 
     padding-top: 45px; 
     left:0; 
     right:0; 
      
     .container { 
      .container-content(); 
      max-width: 1116px; 
     } 
      
      @media (max-width: @screen-medium) { 
       padding: 12px; 
         top: 0; 
         left: 0; 
         right: 0; 
      height: 60px; 
      position: absolute; 
     } 
      
     a.wknd-header-logo { 
      color: @text-color; 
         font-weight: bolder; 
         font-size: @font-size-xlarge; 
         float:left; 
         padding: 11px 12px; 
         line-height: 28px; 
      height: 50px; 
      margin:0; 
      padding-left: 0; 
         text-decoration: none; 
      text-align: left; 
     
      @media (max-width: @screen-medium) { 
        font-size: (@font-size-large + 8px); 
       margin-left: 0; 
       padding-top: 10px; 
       padding-left: @gutter-padding; 
       } 
     }  
      
     h1 { 
      float: left; 
         margin-top: 0.25em; 
         font-size: 1.5em; 
     } 
    } 
     
    .scrolly { 
     .wknd-header { 
       
     
      @media (min-width: (@screen-medium + 1)) { 
       height: 80px; 
       background-color: @body-bg; 
       -webkit-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.26); 
       -moz-box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.26); 
       box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.26); 
      } 
     } 
    }

    ファイルの最下部に scrolly を追加することで、header div に box-shadow が追加されています。先ほど追加した JavaScript によって、ページのスクロール時に scrolly クラス名が配置されます。

  6. 最後に、header.less スタイルを組み込むよう、/apps/wknd/clientlibs/clientlib-site/main.less を更新します。

    /* main.less */ 
     
    ... 
     
    /* Component Styles */ 
       @import "components/breadcrumb/breadcrumb.less"; 
       @import "components/contentfragment/contentfragment.less"; 
       /* add header.less */ 
       @import "components/header/header.less"; 
       @import "components/image/image.less"; 
       @import "components/layout-container/layout-container.less"; 
       @import "components/text/text.less"; 
       @import "components/title/title.less";

Clientlib のページへの追加

次に、ベースページを介して、clientlib を組み込む必要があります。コアコンポーネントのページは、CSS については html の head に、JavaScript についてはページの最下部にカスタムの clientlib を組み込むための 2 つのファイルを提供します。AEM プロジェクトのアーキタイプには既に wknd.base クライアントライブラリが組み込まれています。

wknd.dependencies および、オーサリング環境の wknd.author を組み込むために、いくつかの更新をおこなう必要があります。

ui.apps モジュールで、/apps/wknd/components/structure/page の下のファイルを修正します。

  1. /apps/wknd/components/structure/page/customheaderlibs.html を更新します。

    これにより、/apps/core/wcm/components/page/v2/page/customheaderlibs.html が上書きされます。

    <!--/* 
        /apps/wknd/components/structure/page/customheaderlibs.html 
     
    */--> 
     
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
      
    <sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" 
         data-sly-call="${clientlib.js @ categories='wknd.dependencies'}"/> 
    <sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" 
         data-sly-call="${clientlib.css @ categories='wknd.base'}"/> 
          
    <!--/* Load authoring related client libraries */--> 
    <sly data-sly-test="${wcmmode.preview || wcmmode.edit}" data-sly-call="${clientLib.all @ categories='wknd.author'}"/> 
     
    <!--/* Include Context Hub */--> 
    <sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

    これにより、wknd.base クライアントライブラリの CSS および wknd.dependencies クライアントライブラリの JS が組み込まれます。通常のベストプラクティスとしては、JS はページの最下部で組み込むことが推奨されます。wknd.dependencies の JS は、ContextHub などのターゲットコンテンツをサポートするライブラリのロードに使用されるので、この場合のベストプラクティスとしては、ページの最上部でロードすることが推奨されます。作成者専用のクライアントライブラリ、wknd.author もロードされています。wcmmode の条件が指定されています。これはページが作成者の編集環境で開かれている場合にのみ、このクライアントライブラリがロードされることを示します。WCMMode の詳細については、こちらを参照してください。

    ContextHub は、パーソナライゼーションのための JS ベースのフレームワークで、ヘッダーでロードされます。このチュートリアルでは ContextHub の実装は説明されませんが、ContextHub の詳細については、こちらから参照できます。

  2. customfooterlibs.html ファイルを参照します。

    これはページの最下部に組み込まれ、これによって wknd.base クライアントライブラリの JS が組み込みまれます。これにより、/apps/core/wcm/components/page/v2/page/customfooterlibs.html が上書きされます。AEM プロジェクトのアーキタイプによって既にこのファイルが作成されているので、変更を加える必要はありません。

    <!--/*
        /apps/wknd/components/structure/page/customfooterlibs.html
    */-->
    <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
        <sly data-sly-call="${clientlib.js @ categories='wknd.base'}"/>
    </sly>
  3. AEM にデプロイします。

    Eclipse 開発ツールまたは次の Maven コマンドを使用してコードベースをデプロイし、クライアントライブラリおよび更新されたページコンポーネントをローカルの AEM インスタンスに追加します

    $ mvn -PautoInstallPackage -Padobe-public clean install
  4. クライアントライブラリが組み込まれたことを確認します。

    ベースページのコンポーネントを更新すると、WKND の記事テンプレートを介して作成したすべてのページが更新されます。 

    1. 記事テンプレートから作成したページを開きます(http://localhost:4502/editor.html/content/wknd/en/first-article.html)。更新されたフォントおよび固定幅のコンテナが確認できます。
    2. 「ページのプロパティ」メニューアイコン(右上、サイドバーアイコンの横)「公開済みとして表示」ボタンをクリックして、ページを公開済みとして表示します。
    3. これにより、wcmmode=disabled が URL パラメーターとして追加された新しいタブが開きます。サイトエディターでコンポーネントのオーサリングをサポートするための大量の Javascript が存在するので、wcmmode=disabled を使用したページの表示は、デバッグ/開発に便利です。 http://localhost:4502/content/wknd/en/first-article.html?wcmmode=disabled
    4. ページソースを参照すると、以下のタグが確認できます。

     

    /* Source of http://localhost:4502/content/wknd/first-article.html?wcmmode=disabled */
    <html>
        <head>
        ...
            <script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.js"></script>
            <link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-base.css" type="text/css">
        </head>
        <body>
            ...
                <script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-base.js"></script>
    
        </body>
    </html>

    ここで注目すべきは、CSS および Javascript が /etc.clientlibs で始まるパスから動的にロードされていることです。クライアントライブラリは組織にとって使いやすいよう、アドビのコンポーネントコードと同じディレクトリである /apps/wknd の下に保存されます。セキュリティ上の理由から、/apps パスはDispatcher の filter セクションにのみ使用すべきであるので、パブリッシュ側では、クライアントライブラリを /apps から提供しないことが重要となります。クライアントライブラリの allowProxy プロパティにより、CSS および JS が /etc.clientlibs から提供されます。

  5. wcmmode=disabled としてページを表示しているとき、ブラウザーのサイズが 992 px 以上の場合にヘッダーのスクロールが動作するかを確認します。

クライアントライブラリのデバッグ

複数のクライアントライブラリを組み込むために、カテゴリおよび埋め込みの様々な方法を使用すると、トラブルシューティングが面倒となります。AEM はそのためにいくつかのツールを公開しています。最も重要なツールの 1 つは、クライアントライブラリの再ビルドです。これにより、AEM はすべての LESS ファイルを強制的に再コンパイルし、CSS を生成します。

  • ライブラリのダンプ - AEM インスタンスに登録されているすべてのクライアントライブラリを一覧表示します。<host>/libs/granite/ui/content/dumplibs.html
  • 出力テスト - カテゴリ別を含む、clientlib の予想される HTML 出力を確認できます。 <host>/libs/granite/ui/content/dumplibs.test.html
  • ライブラリの依存関係の検証見つからないすべての依存関係または埋め込みカテゴリを強調表示します。<host>/libs/granite/ui/content/dumplibs.validate.html
  • クライアントライブラリの再ビルド - AEM はすべてのクライアントライブラリを強制的に再ビルドするか、クライアントライブラリのキャッシュを無効にできます。このツールでは、AEM が生成された CSS を強制的に再コンパイルするので、LESS を使用した開発において特に効果的です。一般的に、キャッシュを無効化した後にページの更新をおこなう方が、すべてのライブラリを再ビルドするよりも効果的です。<host>/libs/granite/ui/content/dumplibs.rebuild.html

 

aemfed を使用した開発

aemfed は オープンソースの コマンドラインツールで、 フロントエンド開発をスピードアップできます。aemfed は aemsyncBrowsersync 、および Sling Log Tracer によって提供されます。

aemfed は上位レベルにおいてファイルの変更をリッスンし、実行中の AEM インスタンスと自動的に同期します。変更に基づき、ローカルブラウザーが自動更新されるので、フロントエンド開発がスピードアップします。aemfed は Sling Log tracer とも連携し、サーバー側のすべてのエラーを直接ターミナルに自動表示します。完全なドキュメントについては、こちらから参照できます。

注意:

aemfed をグローバルインストールするための手順について、順を追って説明します。重要な最新の説明を確認するには、aemfed の正式なドキュメントを参照してください。

  1. aemfed の主な特徴は、コマンドラインに対してエラーを直接リレーできる機能です。この動作を有効にするには、Sling Log Tracer の設定を更新する必要があります。 

    http://localhost:4502/system/console/configMgr に移動し、Apache Sling Log Tracer を見つけます。「Enabled」 および 「Recording Servlet Enabled」 の設定を更新します。
     

    警告:

    Apache Sling Log Tracer のバージョン 1.0.0 以降を使用する必要があります。また、有効にするのは、開発環境、および他の実稼動以外の環境においてのみとする必要があります。 

  2. aemfed をインストールするには、npm がインストールされている必要があります。これはコマンドラインから入手可能です。

    $ npm -help 
     
    Usage: npm <command> 
     
    where <command> is one of: 
        access, adduser, audit, bin, bugs, c, cache, ci, cit, 
        completion, config, create, ddp, dedupe, deprecate, 
        dist-tag, docs, doctor, edit, explore, get, help, 
        help-search, hook, i, init, install, install-test, it, link, 
        list, ln, login, logout, ls, outdated, owner, pack, ping, 
        prefix, profile, prune, publish, rb, rebuild, repo, restart, 
        root, run, run-script, s, se, search, set, shrinkwrap, star, 
        stars, start, stop, t, team, test, token, tst, un, 
        uninstall, unpublish, unstar, up, update, v, version, view, 
        whoami

    npm がインストールされていない場合、最も簡単な方法は、Node.js をダウンロードし、インストールすることです。

  3. 次のコマンドを使用して、aemfed をグローバルインストールします。

    $ npm install aemfed --global 
     
    # (aemfed is installed globally) 
     
    $ aemfed -h 
    Usage: aemfed [OPTIONS] 
    Options: 
      -t targets           Default is http://admin:admin@localhost:4502 
      -p proxy_port        Default is 3000 
      -w path_to_watch     Default is current 
      -e exclude_filter    Anymatch exclude filter; disabled by default 
      -i sync_interval     Update interval in milliseconds; default is 100 
      -o open_page         Browser page to be opened after successful launch; default is "false". 
      -b browser           Browser where page should be opened in; this parameter is platform dependent; for example, Chrome is "google chrome" on OS X, "google-chrome" on Linux and "chrome" on Windows; default is "google chrome" 
      -h                   Displays this screen 
      -v                   Displays version of this package 
    
    注意:

    これにより、任意のディレクトリから aemfed を実行できるようになります。package.json を使用するプロジェクトへの追加方法については、aemfed のドキュメンテーションを参照してください。

  4. コマンドラインから、<src>/aem-guides-wknd ディレクトリに移動します。localhost:4502 上で実行している aem インスタンスに対して aemfed を起動するには、 次のコマンドを 実行します。

    aemfed -t "http://admin:admin@localhost:4502" -e "**/*
    jb_+(old|tmp)
    " -w "ui.apps/src/main/content/jcr_root/" 
     
    --------------------------------------- 
    [Browsersync] Proxying: http://localhost:4502 
    [Browsersync] Access URLs: 
     -------------------------------------- 
           Local: http://localhost:3000 
        External: http://192.168.1.152:3000 
     -------------------------------------- 
              UI: http://localhost:3001 
     UI External: http://localhost:3001 
     --------------------------------------
  5. プロキシ URL を使用して、作業中の AEM ページに移動します。

    http://localhost:3000/content/wknd/en/first-article.html?wcmmode=disabled

    ここで、ポート 3000 を介してプロキシ設定された、AEM と同じコンテンツが表示されます。

  6. header.less など、いくつかの .less ファイルを更新し、変更が自動的に反映されていることをブラウザーで確認します。

レスポンシブグリッドを使用したオーサリング

この時点で、AEM のレスポンシブグリッドおよびレイアウト機能を使用するために必要なすべての項目が有効になっています。異なるデバイス幅でいくつかのコンポーネントをサイズ変更し、正常に動作していることを確認します。

  1. テキストコンポーネントを追加し、レイアウトモードを使用してページ幅の半分のサイズに縮小させます。2 番目のテキストコンポーネントでも繰り返し、2 つのコンポーネントを左右に並べます。

    注意:

    現在、レイアウトはページの全幅となっており、ハンドルが見つけづらいことがあります。次の章では、レイアウトコンテナのいくつかのスタイルを使用してこれを修正します。

    テキストコンポーネントにいくつかのテキストを配置します。 

  2. 3 つの画像コンポーネントをページに追加します。次に、3 つの画像コンポーネントがページ幅の 1/3 となり、横に並べられるよう、それぞれをサイズ変更します。

    画像にいくつかの写真を配置します。

  3. レイアウトモードのままで、エミュレーターを使用して、ページをモバイル表示でプレビューします。列が縮小しただけで、スクリーンデバイスに合わせて最適化されていないレイアウトが作成されています。

    それぞれの幅をページの全幅まで拡大することで、モバイル表示で垂直に並ぶように、コンポーネントをサイズ変更します。

  4. 関連する画像を DAM にアップロードします(オプション)。

    WKND のライフスタイルデザインに合致するいくつかの画像を AEM Assets にアップロードできます。これらの画像は後で使用します。画像は、ライセンスフリーで https://unsplash.com/ から入手できます。

    次のパッケージをローカルの AEM インスタンス上にダウンロードおよびインストールできます。

    ダウンロード

    警告:

    DAM アセットを AEM 以外の、ソース管理された場所に保存することは滅多にありません。Git リポジトリに関するチュートリアルを通して DAM アセットがプロジェクトに追加されています。これは、誰かがいつでもチュートリアルを再開できるようにするためですが、ソース管理された場所に大量のアセットを保存することは推奨されていません。

ヘルプ

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

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

次の手順

チュートリアルの次のパート:AEM Sites の概要(第 4 章)- スタイルシステムを使用した開発

完了したコードを GitHub で参照するか、チュートリアルのこのパートで完了したパッケージをダウンロードしてください。

ダウンロード

アドビのロゴ

アカウントにログイン