スタイルシステム style-system

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

スタイルシステムを使用すると、テンプレート作成者がコンポーネントのコンテンツポリシーのスタイルクラスを定義し、コンテンツ作成者がページでのコンポーネントの編集時にそのスタイルクラスを選択できます。これらのスタイルは、1 つのコンポーネントの別の視覚的バリエーションとして使用することができるので、コンポーネントがより柔軟で扱いやすいものになります。

これにより、各スタイルのカスタムコンポーネントを開発したり、コンポーネントダイアログをカスタマイズしてそのようなスタイル機能を有効にする必要がなくなります。 AEMのバックエンド開発をおこなわなくても、コンテンツ作成者のニーズにすばやく簡単に対応できる、再利用可能なコンポーネントが増えます。

ユースケース use-case

テンプレート作成者は、コンテンツ作成者がコンポーネントを機能させる方法を設定する機能だけでなく、コンポーネントの様々な代替の視覚的バリエーションを設定する機能も必要です。

同様に、コンテンツ作成者は、コンテンツの構造化や配置の能力だけでなく、視覚的な表示方法の選択も必要です。

スタイルシステムでは、テンプレート作成者とコンテンツ作成者の両方の要件に対応する統一ソリューションを提供します。

  • テンプレート作成者は、コンポーネントのコンテンツポリシーでスタイルクラスを定義できます。
  • その後、コンテンツ作成者は、ページ上のコンポーネントの編集時にドロップダウンからこれらのクラスを選択して、対応するスタイルを適用できます。

次に、style クラスがコンポーネントの装飾ラッパー要素に挿入されるので、コンポーネント開発者は、CSS ルールを提供する以外にスタイルの処理に関心を持つ必要はありません。

概要 overview

スタイルシステムの使用は通常、次のように行われます。

  1. Web デザイナーは 1 つのコンポーネントに対し様々な視覚的バリエーションを作成します。

  2. HTML 開発者にはコンポーネントの HTML 出力と、実装する必要な視覚的バリエーションが提供されます。

  3. HTML 開発者は各視覚的バリエーションに対応する CSS クラスを定義します。その CSS クラスが、コンポーネントをラップする要素に挿入されます。

  4. HTML 開発者は視覚的バリエーションごとに対応する CSS コードを(オプションで JS コードも)実装し、それらは定義済みとなります。

  5. AEM デベロッパーは、提供された CSS を(オプションで JS も)クライアントライブラリに配置し、デプロイします。

  6. AEM 開発者またはテンプレート作成者は、ページテンプレートを設定し、スタイル設定された各コンポーネントのポリシーを編集します。また、定義済みの CSS クラスを追加し、スタイルごとにわかりやすい名前を付け、組み合わせが可能なスタイルを示します。

  7. 次に AEM ページ作成者は、ページエディターでコンポーネントのツールバーのスタイルメニューからデザイン済みのスタイルを選択できます。

AEMでは、実際には最後の 3 つの手順のみが実行されます。 つまり、必要な CSS と Javascript のすべての開発は AEM なしで行うことができます。

実際にスタイルを実装するには、AEMにデプロイし、目的のテンプレートのコンポーネント内で選択する必要があるだけです。

次の図は、スタイルシステムのアーキテクチャを示しています。

aem-style-system

使用方法 use

この機能のデモを行うために、コアコンポーネントのタイトルコンポーネントWKND による実装を例として使用します。

次のコンテンツ作成者として節とテンプレート作成者として節では、WKND のスタイルシステムを使用してスタイルシステムの機能をテストする方法について説明します。

スタイルシステムを独自のコンポーネントに使用する場合は、次の手順に従います。

  1. の節の説明に従って、CSS をクライアントライブラリとしてインストールします。 概要.
  2. コンテンツ作成者が使用できるようにする CSS クラスを設定します(「 」節を参照)。 テンプレート作成者として.
  3. その後、コンテンツ作成者は、「 」の節で説明しているようにスタイルを使用できます コンテンツ作成者として.

コンテンツ作成者として as-a-content-author

  1. WKND プロジェクトをインストールした後、WKND の英語のマスターホームページ(http://<host>:<port>/sites.html/content/wknd/language-masters/en)に移動し、ページを編集します。

  2. ページの下方の​ タイトル ​コンポーネントを選択します。

    作成者にとってのスタイルシステム

  3. リスト ​コンポーネントのツールバーで「スタイル」ボタンをタップまたはクリックしてスタイルメニューを開き、コンポーネントの外観を変更します。

    スタイルの選択

    note note
    NOTE
    この例では、カラー ​スタイル(グレー)は相互排他的ですが、スタイル ​オプション(アンダーライン右揃え最小間隔)は組み合わせることができます。これは、テンプレート作成者としてテンプレートで設定可能です。

テンプレート作成者として as-a-template-author

  1. WKND の英語のマスターホームページ(http://<host>:<port>/sites.html/content/wknd/language-masters/en)の編集時に、ページ情報/テンプレートの編集 ​でページのテンプレートを編集します。

    テンプレートを編集

  2. コンポーネントの「ポリシー」ボタンをタップまたはクリックして、タイトル ​コンポーネントのポリシーを編集します。

    ポリシーを編集

  3. プロパティの「スタイル」タブで、スタイルがどのように設定されているかを確認できます。

    プロパティの編集

    • グループ名: ​スタイルは、コンポーネントのスタイルの設定時にコンテンツ作成者に表示されるスタイルメニュー内にまとめてグループ化できます。
    • スタイルは組み合わせ可能です。 そのグループ内の複数のスタイルを一度に選択できます。
    • スタイル名: コンポーネントのスタイルの設定時にコンテンツ作成者に表示されるスタイルの説明。
    • CSS クラス: スタイルに関連付けられた CSS クラスの実際の名前。

    ドラッグハンドルを使用して、グループの順序とグループ内のスタイルを調整します。 追加または削除アイコンを使用して、グループ内のグループまたはスタイルを追加または削除します。

CAUTION
コンポーネントポリシーのスタイルプロパティとして設定されている CSS クラス(および必要な JavaScript)を動作可能にするには、クライアントライブラリとしてデプロイする必要があります。

セットアップ 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"
NOTE
編集ダイアログの「スタイル」タブは、デフォルトでは有効になっていません。

要素名を持つスタイル styles-with-element-names

開発者は cq:styleElements 文字列配列プロパティを使用して、コンポーネントのスタイルに使用できる要素名のリストを設定することもできます。次に、デザインダイアログ内のポリシーの「スタイル」タブで、テンプレート作成者は、各スタイルに設定する要素名を選択することもできます。 これにより、ラッパー要素の要素名が設定されます。

このプロパティは cq:Component ノードに設定されます。次に例を示します。

  • /apps/<yoursite>/components/content/list@cq:styleElements=[div,section,span]
CAUTION
組み合わせ可能なスタイルには要素名を定義しないでください。 複数の要素名を定義する場合の優先順序は次のとおりです。
  1. HTL(data-sly-resource="${'path/to/resource' @ decorationTagName='span'})が他のすべての要素よりも優先されます。
  2. 次に、複数のアクティブなスタイルの中で、コンポーネントのポリシーで設定されたスタイルのリストの最初のスタイルが優先されます。
  3. 最後に、コンポーネントの cq:htmlTag または cq:tagName がフォールバック値と見なされます。

スタイル名を定義するこの機能は、レイアウトコンテナやコンテンツフラグメントコンポーネントなどの非常に一般的なコンポーネントに意味を追加できます。

例えば、レイアウトコンテナに <main><aside><nav> のようなセマンティクスを指定できます。

recommendation-more-help
5f6f1f67-8db1-40cb-84e9-024e65b9fc4c