クライアントライブラリとフロントエンドワークフロー client-side-libraries

GitHubの tutorial/client-side-libraries-start ブランチをチェックアウトします。

$ cd aem-guides-wknd
$ git checkout tutorial/client-side-libraries-start

Maven スキルを使用して、ローカル AEM インスタンスにコードベースをデプロイします。

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

VSCode または他の IDE を使用して、ui.apps モジュールを開きます。

パス /apps/wknd/clientlibs を展開して、アーキタイプで生成された clientlib を表示します。

以下のセクションでは、これらの clientlib の詳細について説明します。

次の表に、クライアントライブラリの概要を示します。クライアントライブラリを含める方法については、こちらを参照してください。

その clientlib-site を確認します。clientlib-dependencies はソース管理から無視されます。 これは意図的なもので、ビルド時に ui.frontend モジュールによって生成されます。

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

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 モジュールで入力します。

ファイル 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 にデプロイできるようになりました。

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

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

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

ui.frontend モジュールからファイル ui.frontend/src/main/webpack/site/_variables.scss を開きます。

$brand-primary カラー変数を更新します。

//== variables.css

//== Brand Colors
$brand-primary:          $pink;

変更を保存します。

ブラウザーに戻り、AEM ページを更新して更新内容を確認します。

$brand-primary カラーの変更を元に戻し、コマンド CTRL+C を使用して webpack ビルドを停止します。

Article Page テンプレート（http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html）を参照してください。

ページ情報 ​アイコンをクリックし、メニューで「ページポリシー」を選択して​ ページポリシー ​ダイアログを開きます。

ページ情報／ページポリシー

ここには wknd.dependencies と wknd.site のカテゴリが一覧表示されていることに注目してください。デフォルトでは、ページポリシーを通じて設定される clientlib は分割されて、CSS がページヘッダーに含まれ、JavaScript が本体の末尾に含まれます。ページヘッダーで読み込まれる clientlib JavaScript を明示的にリストすることができます。以下は wknd.dependencies の場合です。

Article Page テンプレート ​を使用して作成した LA Skateparks ページ（http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html）に移動します。

ページ情報 ​アイコンをクリックし、メニューで「公開済みとして表示」を選択して AEM エディターの外部で記事ページを開きます。

http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled のページソースを表示すると、<head> に次の clientlib 参照が含まれていることがわかります。

<head>
...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-78fb9cea4c3a2cc17edce2c2b32631e2-lc.min.css" type="text/css">
...
</head>

なお、これらの clientlibs はプロキシ /etc.clientlibs エンドポイントを使用しています。また、次の clientlib がページの下部に含まれていることもわかります。

...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-7157cf8cb32ed66d50e4e49cdc50780a-lc.min.js"></script>
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-53e6f96eb92561a1bdcc1cb196e9d9ca-lc.min.js"></script>
...
</body>

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 コードによって管理されていない）が使用可能になります。

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