クライアントライブラリとフロントエンドワークフロー

ui.frontend モジュールを開き、src/main/webpack/site に移動します。

ファイル main.scss を開きます

main.scss は、 ui.frontend モジュールの Sass ファイルへのエントリポイントです。 これには、プロジェクト内の様々な Sass ファイル全体で使用される一連のブランド変数を含む _variables.scss ファイルが含まれます。 また、_base.scss ファイルも含まれ、HTML 要素の基本スタイルを定義します。 正規表現には、src/main/webpack/components にあるの個々のコンポーネントのスタイルが含まれます。別の正規表現には、src/main/webpack/site/styles にあるファイルが含まれます。

main.ts ファイルを調べます。これには main.scss のほか、プロジェクトで .js または .ts ファイルを収集するための正規表現が含まれます。 このエントリポイントは、ui.frontend モジュール全体で webpack 設定ファイルによって使用されます。

src/main/webpack/site/styles の下にあるファイルを調べます。

これらのファイルは、ヘッダー、フッター、メインコンテンツコンテナなど、テンプレート内のグローバル要素のスタイルを設定します。 これらのファイルの CSS ルールは、様々な HTML 要素（header、main、および footer）をターゲットにします。 これらの HTML 要素は、前の章のページとテンプレートのポリシーによって定義されています。

src/main/webpack の下の components フォルダーを展開してファイルを調べます。

各ファイルは、アコーディオンコンポーネントといったコアコンポーネントにマッピングされます。スタイルルールを使用して特定の CSS クラスを容易にターゲット設定できるよう、各コアコンポーネントはブロック要素修飾子または BEM 表記で作成されます。 /components の下にあるファイルは、コンポーネントごとに異なる BEM ルールを使用して、AEM プロジェクトアーキタイプによってスタブ化されています。

WKND の基本スタイル wknd-base-styles-src-v3.zip をダウンロードし、ファイルを​ 解凍 ​します。

チュートリアルの進行を促進するために、コアコンポーネントと記事ページテンプレートの構造に基づく WKND ブランドを実装する Sass ファイルがいくつか用意されています。

ui.frontend/src の内容を前の手順からのファイルで上書きします。ZIP された内容で、次のフォルダーを上書きします。

/src/main/webpack
         /components
         /resources
         /site
         /static

WKND スタイルの実装の詳細を確認するために、変更されたファイルを検査します。

コマンドラインターミナルを開き、ui.frontend モジュールを npm install コマンドを使用してインストールします。

$ cd ~/code/aem-guides-wknd/ui.frontend
$ npm install

NOTE

新しいクローンやプロジェクトの生成の後と同様に、npm install の実行は 1 回だけ必要です。

ui.frontend/package.json を開き、スクリプト****開始 ​コマンドに --env writeToDisk=true を追加します。

{
  "scripts": {
    "start": "webpack-dev-server --open --config ./webpack.dev.js --env writeToDisk=true",
  }
}

監視 ​モードで webpack 開発サーバーを起動するには、次のコマンドを実行します。

$ npm run watch

これは ui.frontend モジュールからソースファイルをコンパイルし、http://localhost:4502 で AEM と変更を同期します。

+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies
http://admin:admin@localhost:4502 > OK
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
http://admin:admin@localhost:4502 > OK

コマンド npm run watch で最終的に clientlib-site および clientlib-dependencies を AEM と自動的に同期される ui.apps モジュールで入力します。

NOTE

また、JS と CSS を縮小する npm run prod プロファイルがあります。Maven 経由で webpack ビルドがトリガーされるたびに行われる標準的なコンパイルです。ui.frontend モジュールについて詳しくは、こちらを参照してください。

ファイル site.css を ui.frontend/dist/clientlib-site/site.css 下で検査します。これは、Sass ソースファイルに基づくコンパイル済み CSS です。

ui.frontend/clientlib.config.js ファイルを調べます。これは aem-clientlib-generator という npm プラグインの設定ファイルで、/dist の内容をクライアントライブラリに変換し、ui.apps モジュールに移動させます。

ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css でファイル site.css を ui.apps モジュールで検査します。これは、ui.frontend モジュールからの site.css ファイルと同一コピーである必要があります。ui.apps モジュールで AEM にデプロイできるようになりました。

NOTE

clientlib-site は、npm または maven を使用してビルド時にコンパイルされているため、ui.apps モジュールでソース管理から安全に無視できます。ui.apps 下の .gitignore ファイルを検査します。

AEM の LA スケートパークに関する記事を http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html で開きます。

これで、記事の更新されたスタイルが表示されます。ブラウザーでキャッシュされた CSS ファイルをクリアするには、ハード更新が必要な場合があります。

外観がモックアップにかなり近づいてきました。

NOTE

ui.frontend コードをビルドして AEM にデプロイするための上記の手順は、Maven ビルドが mvn clean install -PautoInstallSinglePackage プロジェクトのルートからトリガーされたときに自動的に実行されます。

http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled で LA スケートパークの記事ページのページソースをコピーします。

IDE を再度開きます。 AEM からコピーしたマークアップを src/main/webpack/static の下にある ui.frontend モジュールの index.html に貼り付けます。

コピーしたマークアップを編集して、clientlib-site および clientlib-dependencies への参照をすべて削除します。

<!-- remove -->
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.css" type="text/css">
...
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-site.js"></script>

webpack 開発サーバーがこれらのアーティファクトを自動的に生成するので、これらの参照を削除します。

ui.frontend モジュール内から次のコマンドを実行して、新しいターミナルから webpack サーバーを起動します。

$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm start

> aem-maven-archetype@1.0.0 start code/aem-guides-wknd/ui.frontend
> webpack-dev-server --open --config ./webpack.dev.js

これにより、http://localhost:8080/ で新しいブラウザーウィンドウが開き、静的マークアップが表示されます。

src/main/webpack/site/_variables.scss ファイルを編集します。$text-color ルールを次のように置き換えます。

- $text-color:              $black;
+ $text-color:              $pink;

変更を保存します。

ブラウザーで http://localhost:8080 に自動的に反映された変更が表示されるはずです。

/aem-guides-wknd.ui.frontend/webpack.dev.js ファイルを確認します。webpack-dev-server の起動に使用する Webpack 設定が含まれます。 ローカルで実行されている AEM のインスタンスからパス /content と /etc.clientlibs をプロキシします。これにより、画像や他の clientlib（ui.frontend コードによって管理されていない）が使用可能になります。

CAUTION

静的マークアップの画像ソースは、ローカル AEM インスタンス上のライブ画像コンポーネントを指しています。 画像のパスが変更された場合、AEM が起動されていない場合、ブラウザーがローカルの AEM インスタンスにログインしていない場合は、画像が壊れて表示されます。 外部リソースに渡す場合は、画像を静的な参照で置き換えることもできます。

コマンドラインに CTRL+C と入力すると、webpack サーバーを​ 停止 ​できます。