現在表示中:

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

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

使用例

テンプレート作成者には、コンテンツ作成者がコンポーネントを操作するときの動作を設定する能力だけでなく、1 つのコンポーネントに複数の別の視覚的バリエーションを設定するための能力も必要です。

同様に、コンテンツ作成者には、コンテンツを構築して調整する能力だけでなく、コンテンツの視覚的な表示方法を選択する能力も必要です。

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

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

その後、スタイルクラスはコンポーネントの装飾ラッパー要素に挿入されるので、コンポーネント開発者は CSS ルールを作成する以外にスタイルを処理する必要はありません。

概要

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

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

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

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

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

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

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

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

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

実際にスタイルの実装で必要となるのは、AEM へのデプロイメント、および必要なテンプレートのコンポーネント内で選択することのみです。

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

aem-style-system

使用方法

機能を試してみるには、スタイルをコンポーネントに対して作成する必要があります。コアコンポーネントのリストコンポーネントWe.Retail の実装を基盤として使用し、スタイルが含まれている添付パッケージをインストールしてその機能の機能性を確認できます。

ダウンロード

注意:

デモパッケージは、スタイルシステムの使用方法を作成者に示すことを目的としており、スタイルシステムの最適な実装方法を示しているわけではありません。

このパッケージが必要となるのは、We.Retail で組み込みの例とベストプラクティスの実装が提供されるまでです。

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

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

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

コンテンツ作成者として

  1. スタイルシステムデモパッケージをインストールした後、We.Retail の英語のマスターホームページ(http://localhost:4502/sites.html/content/we-retail/language-masters/en)に移動し、ページを編集します。

  2. parsys の下部または上部でリストコンポーネントを選択します。記事のリストコンポーネントと混同しないでください。

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

    screen_shot_2017-11-15at162358

    注意:

    この例では、レイアウトスタイル(ブロックグリッド)が相互に排他的で、表示オプション(画像または日付)は組み合わせ可能です。これは、テンプレート作成者としてテンプレートで設定可能です。

テンプレート作成者として

  1. We.Retail の英語のマスターページ http://localhost:4502/sites.html/content/we-retail/language-masters/en の編集時に、ページ情報/テンプレートの編集でページのテンプレートを編集します。

    screen_shot_2017-11-15at162922
  2. コンポーネントの「ポリシー」ボタンをタップまたはクリックして、リストコンポーネントのポリシーを編集します。これを記事のリストコンポーネントと混同しないでください。

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

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

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

警告:

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

セットアップ

注意:

コアコンポーネントのバージョン 2 はスタイルシステムの活用に完全に対応しているので、追加の設定は不要です。

スタイルシステムを独自のカスタムコンポーネントで有効にする場合、またはコアコンポーネントのバージョン 1 を拡張して機能を使用する場合は、次の手順に従います。

コンポーネントが AEM のスタイルシステムと連動し、デザインダイアログに「スタイル」タブが表示されるようにするには、コンポーネント開発者はコンポーネントに次の設定をおこなうことによって製品から「スタイル」タブを含める必要があります。

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"

コンポーネントが設定されると、すべての編集可能なコンポーネントを自動的にラップする装飾要素に、ページ作成者が設定したスタイルが自動的に挿入されます。この他にコンポーネント自体でおこなう必要があることはありません。

要素名を持つスタイル

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

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

  • /apps/weretail/components/content/list@cq:styleElements=[div,section,span]

警告:

組み合わせ可能なスタイルに要素名は定義しないでください。複数の要素名を定義した場合、優先順位は次のようになります。

  1. HTL がすべてに優先します:data-sly-resource="${'path/to/resource' @ decorationTagName='span'}
  2. 次に、複数のアクティブなスタイルの中で、コンポーネントのポリシーで設定されたスタイルのリストの最初のスタイルが優先されます。
  3. 最後に、コンポーネントの cq:htmlTagcq:tagName がフォールバック値と見なされます。

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー