スタイルシステム style-system
スタイルシステムを使用すると、テンプレート作成者がコンポーネントのコンテンツポリシーのスタイルクラスを定義し、コンテンツ作成者がページでのコンポーネントの編集時にそのスタイルクラスを選択できます。これらのスタイルは、1 つのコンポーネントの別の視覚的バリエーションとして使用することができるので、コンポーネントがより柔軟で扱いやすいものになります。
これにより、各スタイルのカスタムコンポーネントを開発したり、コンポーネントダイアログをカスタマイズしてそのようなスタイル機能を有効にする必要がなくなります。 AEMのバックエンド開発をおこなわなくても、コンテンツ作成者のニーズにすばやく簡単に対応できる、再利用可能なコンポーネントが増えます。
ユースケース use-case
テンプレート作成者は、コンテンツ作成者がコンポーネントを機能させる方法を設定する機能だけでなく、コンポーネントの様々な代替の視覚的バリエーションを設定する機能も必要です。
同様に、コンテンツ作成者は、コンテンツの構造化や配置の能力だけでなく、視覚的な表示方法の選択も必要です。
スタイルシステムでは、テンプレート作成者とコンテンツ作成者の両方の要件に対応する統一ソリューションを提供します。
- テンプレート作成者は、コンポーネントのコンテンツポリシーでスタイルクラスを定義できます。
- その後、コンテンツ作成者は、ページ上のコンポーネントの編集時にドロップダウンからこれらのクラスを選択して、対応するスタイルを適用できます。
次に、style クラスがコンポーネントの装飾ラッパー要素に挿入されるので、コンポーネント開発者は、CSS ルールを提供する以外にスタイルの処理に関心を持つ必要はありません。
概要 overview
スタイルシステムの使用は通常、次のように行われます。
-
Web デザイナーは 1 つのコンポーネントに対し様々な視覚的バリエーションを作成します。
-
HTML 開発者にはコンポーネントの HTML 出力と、実装する必要な視覚的バリエーションが提供されます。
-
HTML 開発者は各視覚的バリエーションに対応する CSS クラスを定義します。その CSS クラスが、コンポーネントをラップする要素に挿入されます。
-
HTML 開発者は視覚的バリエーションごとに対応する CSS コードを（オプションで JS コードも）実装し、それらは定義済みとなります。
-
AEM デベロッパーは、提供された CSS を（オプションで JS も）クライアントライブラリに配置し、デプロイします。
-
AEM 開発者またはテンプレート作成者は、ページテンプレートを設定し、スタイル設定された各コンポーネントのポリシーを編集します。また、定義済みの CSS クラスを追加し、スタイルごとにわかりやすい名前を付け、組み合わせが可能なスタイルを示します。
-
次に AEM ページ作成者は、ページエディターでコンポーネントのツールバーのスタイルメニューからデザイン済みのスタイルを選択できます。
AEMでは、実際には最後の 3 つの手順のみが実行されます。 つまり、必要な CSS と Javascript のすべての開発は AEM なしで行うことができます。
実際にスタイルを実装するには、AEMにデプロイし、目的のテンプレートのコンポーネント内で選択する必要があるだけです。
次の図は、スタイルシステムのアーキテクチャを示しています。
使用方法 use
この機能のデモを行うために、コアコンポーネントのタイトルコンポーネントの WKND による実装を例として使用します。
次のコンテンツ作成者として節とテンプレート作成者として節では、WKND のスタイルシステムを使用してスタイルシステムの機能をテストする方法について説明します。
スタイルシステムを独自のコンポーネントに使用する場合は、次の手順に従います。
- の節の説明に従って、CSS をクライアントライブラリとしてインストールします。 概要.
- コンテンツ作成者が使用できるようにする CSS クラスを設定します（「 」節を参照）。 テンプレート作成者として.
- その後、コンテンツ作成者は、「 」の節で説明しているようにスタイルを使用できます コンテンツ作成者として.
コンテンツ作成者として as-a-content-author
-
WKND プロジェクトをインストールした後、WKND の英語のマスターホームページ（
http://<host>:<port>/sites.html/content/wknd/language-masters/en）に移動し、ページを編集します。 -
ページの下方の タイトル コンポーネントを選択します。
-
リスト コンポーネントのツールバーで「スタイル」ボタンをタップまたはクリックしてスタイルメニューを開き、コンポーネントの外観を変更します。
note note NOTE この例では、カラー スタイル（黒、白、グレー）は相互排他的ですが、スタイル オプション（アンダーライン、右揃え、最小間隔）は組み合わせることができます。これは、テンプレート作成者としてテンプレートで設定可能です。
テンプレート作成者として as-a-template-author
-
WKND の英語のマスターホームページ（
http://<host>:<port>/sites.html/content/wknd/language-masters/en）の編集時に、ページ情報／テンプレートの編集 でページのテンプレートを編集します。
-
コンポーネントの「ポリシー」ボタンをタップまたはクリックして、タイトル コンポーネントのポリシーを編集します。
-
プロパティの「スタイル」タブで、スタイルがどのように設定されているかを確認できます。
- グループ名： スタイルは、コンポーネントのスタイルの設定時にコンテンツ作成者に表示されるスタイルメニュー内にまとめてグループ化できます。
- スタイルは組み合わせ可能です。 そのグループ内の複数のスタイルを一度に選択できます。
- スタイル名： コンポーネントのスタイルの設定時にコンテンツ作成者に表示されるスタイルの説明。
- CSS クラス： スタイルに関連付けられた CSS クラスの実際の名前。
ドラッグハンドルを使用して、グループの順序とグループ内のスタイルを調整します。 追加または削除アイコンを使用して、グループ内のグループまたはスタイルを追加または削除します。
セットアップ setup
コアコンポーネントのバージョン 2 以降はスタイルシステムの活用に完全に対応しているので、追加の設定は不要です。
以下の手順は、独自のカスタムコンポーネントに対してスタイルシステムを有効にする場合、または編集ダイアログのオプションの「スタイル」タブを有効にする場合にのみ必要です。
デザインダイアログの「スタイル」タブを有効にする enable-styles-tab-design
コンポーネントが AEM のスタイルシステムと連動し、デザインダイアログに「スタイル」タブが表示されるようにするには、コンポーネント開発者がコンポーネントに次の設定をおこなって「スタイル」タブを組み込む必要があります。
path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"sling:resourceType = "granite/ui/components/coral/foundation/include"
コンポーネントが設定されると、AEMが編集可能なすべてのコンポーネントを自動的にラップする装飾要素に対して、ページ作成者が設定したスタイルがAEMによって自動的に挿入されます。 この他にコンポーネント自体で行う必要があることはありません。
編集ダイアログの「スタイル」タブを有効にする enable-styles-tab-edit
AEM バージョン 6.4.7.0 で、編集ダイアログのオプションとして「スタイル」タブが利用できるようになりました。「デザインダイアログ」タブとは異なり、編集ダイアログのタブは、スタイルシステムが機能するのに必須ではなく、コンテンツ作成者がスタイルを設定するためのオプションの代替インターフェイスです。
編集ダイアログのタブは、デザインダイアログのタブと同様の方法で組み込むことができます。
path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"sling:resourceType = "granite/ui/components/coral/foundation/include"
要素名を持つスタイル styles-with-element-names
開発者は cq:styleElements 文字列配列プロパティを使用して、コンポーネントのスタイルに使用できる要素名のリストを設定することもできます。次に、デザインダイアログ内のポリシーの「スタイル」タブで、テンプレート作成者は、各スタイルに設定する要素名を選択することもできます。 これにより、ラッパー要素の要素名が設定されます。
このプロパティは cq:Component ノードに設定されます。次に例を示します。
/apps/<yoursite>/components/content/list@cq:styleElements=[div,section,span]
- HTL（
data-sly-resource="${'path/to/resource' @ decorationTagName='span'}）が他のすべての要素よりも優先されます。 - 次に、複数のアクティブなスタイルの中で、コンポーネントのポリシーで設定されたスタイルのリストの最初のスタイルが優先されます。
- 最後に、コンポーネントの
cq:htmlTagまたはcq:tagNameがフォールバック値と見なされます。
スタイル名を定義するこの機能は、レイアウトコンテナやコンテンツフラグメントコンポーネントなどの非常に一般的なコンポーネントに意味を追加できます。
例えば、レイアウトコンテナに <main>、<aside>、<nav> のようなセマンティクスを指定できます。