スタイルシステムを使用した開発 developing-with-the-style-system
個々のスタイルを実装し、Experience Manager のスタイルシステムを使用してコアコンポーネントを再利用する方法について説明します。 このチュートリアルでは、ブランド固有の CSS とテンプレートエディターの高度なポリシー設定を使用してコアコンポーネントを拡張するためのスタイルシステムに対応する開発について説明します。
前提条件 prerequisites
ローカル開発環境のセットアップに必要なツールと手順を確認します。
また、AEMプロジェクトに組み込まれているクライアントサイドライブラリの基本事項と様々なフロントエンドツールを理解するためのクライアントサイドライブラリとフロントエンドワークフローチュートリアルも確認することをお勧めします。
スタータープロジェクト
チュートリアルの作成元となるベースラインコードをチェックアウトします。
-
GitHubの
tutorial/style-system-startブランチをチェックアウトします。code language-shell $ cd aem-guides-wknd $ git checkout tutorial/style-system-start -
Maven スキルを使用して、ローカル AEM インスタンスにコードベースをデプロイします。
code language-shell $ mvn clean install -PautoInstallSinglePackagenote note NOTE AEM 6.5 または 6.4 を使用している場合は、任意の Maven コマンドに classicプロファイルを追加します。code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
いつでも、完成したコードを GitHub で確認したり、ブランチ tutorial/style-system-solution に切り替えてローカルにチェックアウトしたりできます。
目的
- スタイルシステムを使用して、ブランド固有の CSS を AEM コアコンポーネントに適用する方法を理解します。
- BEM 表記と、それを使用してスタイルのスコープを慎重に設定する方法について学びます。
- 編集可能なテンプレートを使用して詳細なポリシー設定を適用します。
作ろうとしているもの what-build
この章では、スタイルシステム機能を使用して、Article ページで使用される タイトル コンポーネントと テキスト コンポーネントのバリエーションを作成します。
タイトルコンポーネントで使用できるアンダーラインスタイル
背景 background
スタイルシステムにより、開発者およびテンプレート編集者はコンポーネントの複数の視覚的バリエーションを作成できます。次に、作成者はページを構成する際に、使用するスタイルを決定できます。チュートリアルではこの後、ローコードアプローチでコアコンポーネントを使用しつつ、スタイルシステムを使用していくつかの独自のスタイルを実現します。
スタイルシステムの大まかな考え方は、コンポーネントの表示について、作成者が様々なスタイルを選択できるようにすることです。「スタイル」は、コンポーネントの外側の div に挿入された追加の CSS クラスをベースに実現されます。これらのスタイルクラスに基づいて、CSS ルールがクライアントライブラリに追加され、コンポーネントの外観が変更されるようになります。
スタイルシステムに関する詳細なドキュメントについては、こちらを参照してください。スタイルシステムを理解するための優れたテクニカルビデオも用意されています。
アンダーラインスタイル - タイトル underline-style
タイトルコンポーネント は、ui.apps モジュールの一部として /apps/wknd/components/title 下のプロジェクトにプロキシ化されています。 見出し要素（H1、H2、H3 など）のデフォルトスタイルは、既に ui.frontend モジュールに実装されています。
WKND Article デザインには、アンダーライン付きのタイトルコンポーネント用の独自スタイルが含まれています。スタイルシステムを使用すれば、 作成者は、2 つのコンポーネントを作成したりコンポーネントダイアログを修正したりせずに、アンダーラインスタイルを追加することができます。
タイトルポリシーの追加
タイトルコンポーネントのポリシーを追加して、コンテンツ作成者が特定のコンポーネントに適用するアンダーラインスタイルを選択できるようにします。 それには、AEM 内のテンプレートエディターを使用します。
-
Article Page テンプレート（http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html）に移動します。
-
構造 モードのメインの レイアウトコンテナ で、許可されたコンポーネント にリストされている タイトル コンポーネントの横にある ポリシー アイコンを選択します。
-
次の値を持つタイトルコンポーネントのポリシーを作成します。
ポリシータイトル*：WKND Title
プロパティ／「スタイル」タブ／新しいスタイルを追加
アンダーライン :
cmp-title--underline
「完了」をクリックして、タイトルポリシーの変更を保存します。
note note NOTE 値 cmp-title--underlineは、コンポーネントの HTML マークアップの外側の div に CSS クラスを設定します。
アンダーラインスタイルの適用
作成者の場合は、特定のタイトルコンポーネントにアンダーラインスタイルを適用します。
-
AEM サイトエディターで LA Skateparks の記事（http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html）に移動します。
-
編集 モードで、タイトルコンポーネントを選択します。絵筆 アイコンをクリックし、アンダーライン スタイルを選択します。
note note NOTE この時点では、 underlineスタイルが実装されていないので、目に見える変化はありません。次の演習では、このスタイルを実装します。 -
ページ情報 アイコン／公開済みとして表示 をクリックして、AEM エディターの外部でページを調べます。
-
ブラウザーの開発者ツールを使用して、タイトルコンポーネントの周囲のマークアップで CSS クラス
cmp-title--underlineが外側の div に適用されていることを確認します。
code language-html <div class="title cmp-title--underline"> <div data-cmp-data-layer="{"title-b6450e9cab":{"@type":"wknd/components/title","repo:modifyDate":"2022-02-23T17:34:42Z","dc:title":"Vans Off the Wall Skatepark"}}" id="title-b6450e9cab" class="cmp-title"> <h2 class="cmp-title__text">Vans Off the Wall Skatepark</h2> </div> </div>
アンダーラインスタイルの実装 - ui.frontend
次に、AEM プロジェクトの ui.frontend モジュールを使用してアンダーラインスタイルを実装します。ui.frontend モジュールにバンドルされている webpack 開発サーバーを使用して、AEM のローカルインスタンスにデプロイする 前に スタイルをプレビューします。
-
ui.frontend モジュール内から
watchプロセスを起動します。code language-shell $ cd ~/code/aem-guides-wknd/ui.frontend/ $ npm run watchこれにより、
ui.frontendモジュールの変更を監視して AEM インスタンスに同期するプロセスが起動されます。 -
IDE に戻り、
ui.frontend/src/main/webpack/components/_title.scssから_title.scssファイルを開きます。 -
cmp-title--underlineクラスをターゲットとする新しいルールを導入します。code language-scss /* Default Title Styles */ .cmp-title {} .cmp-title__text {} .cmp-title__link {} /* Add Title Underline Style */ .cmp-title--underline { .cmp-title__text { &:after { display: block; width: 84px; padding-top: 8px; content: ''; border-bottom: 2px solid $brand-primary; } } }note note NOTE スタイルを常にターゲットコンポーネントで使用する範囲に収めることは、ベストプラクティスと見なされます。これにより、ページの他の領域が余分なスタイルの影響を受けることを回避できます。 すべてのコアコンポーネントは、BEM 記法に準拠しています。 ベストプラクティスとして、コンポーネントのデフォルトスタイルを作成する際は、外部の CSS クラスを指定します。また、HTML 要素ではなく、コアコンポーネントの BEM 記法で指定されたクラス名を指定することが推奨されます。 -
ブラウザーと AEM ページに戻ります。アンダーラインスタイルが追加されていることがわかります。
-
AEM エディターで、アンダーライン スタイルのオンとオフを切り替えて、変更が視覚的に反映されていることを確認できるようになりました。
引用ブロックスタイル - テキスト text-component
次に、同様の手順を繰り返して、テキストコンポーネントに独自のスタイルを適用します。テキストコンポーネントは、ui.apps モジュールの一部として、/apps/wknd/components/text 下のプロジェクトにプロキシ化されています。段落要素のデフォルトスタイルは、ui.frontend に既に実装されています。
WKND Article デザインには、引用ブロック付きのテキストコンポーネントに固有のスタイルが含まれています。
テキストポリシーの追加
次に、テキストコンポーネントのポリシーを追加します。
-
Article Page テンプレート（http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page-template/structure.html）に移動します。
-
構造 モードのメイン レイアウトコンテナ で、許可されたコンポーネント の一覧にある テキスト コンポーネントの横の ポリシー アイコンを選択します。
-
以下の値でテキストコンポーネントのポリシーを更新します。
ポリシータイトル*：コンテンツテキスト
プラグイン／段落スタイル／段落スタイルを有効にする
「スタイル」タブ／新しいスタイルを追加
引用ブロック：
cmp-text--quote
「完了」をクリックして、テキストポリシーの変更を保存します。
引用ブロックスタイルの適用
-
AEM サイトエディターで LA Skateparks の記事（http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html）に移動します。
-
編集 モードで、テキストコンポーネントを選択します。コンポーネントを編集して、引用要素を含めます。
-
テキストコンポーネントを選択し、 絵筆 アイコンをクリックし、 引用ブロック スタイルを選択します。
-
ブラウザーの開発者ツールを使用して、マークアップを調べます。 クラス名
cmp-text--quoteがコンポーネントの外側の div に追加されていることがわかります。code language-html <!-- Quote Block style class added --> <div class="text cmp-text--quote"> <div data-cmp-data-layer="{"text-60910f4b8d":{"@type":"wknd/components/text","repo:modifyDate":"2022-02-24T00:55:26Z","xdm:text":"<blockquote>&nbsp; &nbsp; &nbsp;&quot;There is no better place to shred then Los Angeles&quot;</blockquote>\r\n<p>- Jacob Wester, Pro Skater</p>\r\n"}}" id="text-60910f4b8d" class="cmp-text"> <blockquote> "There is no better place to shred then Los Angeles"</blockquote> <p>- Jacob Wester, Pro Skater</p> </div> </div>
引用ブロックスタイルの実装 - ui.frontend
次に、AEM プロジェクトの ui.frontend モジュールを使用して引用ブロックスタイルを実装します。
-
まだ実行していない場合は、ui.frontend モジュール内から
watchプロセスを起動します。code language-shell $ npm run watch -
ui.frontend/src/main/webpack/components/_text.scss内のファイルtext.scssを次のように更新します。code language-css /* Default text style */ .cmp-text {} .cmp-text__paragraph {} /* WKND Text Quote style */ .cmp-text--quote { .cmp-text { background-color: $brand-third; margin: 1em 0em; padding: 1em; blockquote { border: none; font-size: $font-size-large; font-family: $font-family-serif; padding: 14px 14px; margin: 0; margin-bottom: 0.5em; &:after { border-bottom: 2px solid $brand-primary; /*yellow border */ content: ''; display: block; position: relative; top: 0.25em; width: 80px; } } p { font-family: $font-family-serif; } } }note caution CAUTION この場合、生の HTML 要素は、スタイルのターゲットになります。 これは、テキストコンポーネントがコンテンツ作成者にリッチテキストエディターを提供しているからです。 RTE コンテンツに対して直接スタイルを作成する場合は、慎重に行う必要があります。また、スタイルを厳密にスコープ設定することがさらに重要です。 -
もう一度ブラウザーに戻ると、引用ブロックスタイルが追加されていることがわかります。
-
webpack 開発サーバーを停止します。
固定幅 - コンテナ（ボーナス） layout-container
コンテナコンポーネントは、Article Page テンプレートの基本構造を作成し、コンテンツ作成者がページにコンテンツを追加するためのドロップゾーンを提供するために使用されています。コンテナはスタイルシステムを使用して、レイアウトをデザインするためのさらに多くのオプションをコンテンツ作成者に提供することもできます。
Article Page テンプレートの メインコンテナ は、2 つのオーサリング可能なコンテナを含んでおり、幅は固定されています。
Article Page テンプレートのメインコンテナ.
メインコンテナ のポリシーはデフォルト要素を main として設定します。
メインコンテナ を固定値にする CSS が ui.frontend/src/main/webpack/site/styles/container_main.scss で ui.frontend モジュールに設定されています。
main.container {
padding: .5em 1em;
max-width: $max-content-width;
float: unset!important;
margin: 0 auto!important;
clear: both!important;
}
main HTML 要素をターゲティングするのではなく、スタイルシステムを使用してコンテナポリシーの一部として 固定幅 スタイルを作成できました。 スタイルシステムを使用すると、ユーザーは 固定幅 コンテナと 流動幅 コンテナの間で切り替えることができます。
- ボーナスチャレンジ - 前の演習で学んだ知見を活かし、スタイルシステムを使用してコンテナコンポーネントの 固定幅 および 流動幅 スタイルを実装します。
おめでとうございます。 congratulations
おめでとうございます。Article Page のスタイルがほぼ設定され、AEM スタイルシステムを使用する実践的な体験ができました。
次の手順 next-steps
ダイアログで作成されたコンテンツを表示するカスタム AEM コンポーネントを作成するためのエンドツーエンドの手順を学び、コンポーネントの HTL に入力するビジネスロジックをカプセル化する Sling モデルの開発について調べます。
完成したコードを GitHub で確認するか、コードをレビューして Git ブランチ tutorial/style-system-solution でローカルにデプロイします。
- github.com/adobe/aem-wknd-guides リポジトリのクローンを作成します。
tutorial/style-system-solutionブランチをチェックアウトします。