デザインモードでのコンポーネントの設定

AEM インスタンスを標準インストールすると、各種のコンポーネントをコンポーネントブラウザーですぐに使用できます。

これらに加えて、他にも様々なコンポーネントが用意されています。デザインモードを使用してこのようなコンポーネントを有効化/無効化することができます。有効にしてページ上に配置した場合は、属性パラメーターを編集して、デザインモードを使用してコンポーネントデザインの要素を設定できます。

メモ

これらのコンポーネントを編集する際は慎重におこなう必要があります。デザイン設定は、多くの場合 Web サイト全体のデザインの重要な一部であり、適切な権限および経験を持つユーザー（管理者または開発者など）のみが変更する必要があります。詳しくは、コンポーネントの開発を参照してください。

メモ

デザインモードは静的テンプレートでのみ使用できます。編集可能なテンプレートで作成されたテンプレートは、テンプレートエディターを使用して編集する必要があります。

メモ

デザインモードは、(/etc)の下にコンテンツとして保存されたデザイン設定でのみ使用できます。

AEM 6.4以降では、継続的なデプロイメントシナリオをサポートするために、/appsの下に設計を設定データとして保存することをお勧めします。 /appsに保存されたデザインは実行時に編集できず、そのようなテンプレートの管理者以外のユーザーはデザインモードを使用できません。

これには、ページの段落システムで許可されたコンポーネントの追加または削除が関係しています。段落システム（parsys）は、他のすべての段落コンポーネントを含む複合コンポーネントです。段落システムを使用すると、他のすべての段落コンポーネントを含んでいるので、作成者は、様々なタイプのコンポーネントをページに追加できます。それぞれの段落タイプはコンポーネントとして表されます。

例えば、商品ページのコンテンツに次の項目を保持する段落システムを含めることができます。

商品の画像（画像またはテキスト画像の段落として）
商品の説明（テキスト段落として）
技術データを含むテーブル（テーブル段落として）
ユーザー入力フォーム（フォーム開始、フォーム要素、フォーム終了の段落として）

メモ

について詳しくは、コンポーネントの開発およびテンプレートとコンポーネントの使用に関するガイドラインparsysを参照してください。

注意

静的テンプレートのデザインを定義する方法としては、ここで説明しているような、デザインモードを使用したデザイン編集をお勧めします。

例えば、CRX DE でデザインを変更することはベストプラクティスではなく、そのようなデザインのアプリケーションは、意図した動作とは異なることがあります。詳しくは、開発者向けドキュメントのページテンプレート - 静的を参照してください。

コンポーネントの有効化/無効化

コンポーネントを有効化または無効化するには、次の手順をおこないます。

デザインモードを選択します。
コンポーネントをタップまたはクリックします。選択すると、コンポーネントに青い枠線が表示されます。
親アイコンをクリックまたはタップします。

これで、現在のコンポーネントを格納する段落システムが選択されます。
段落システムの設定アイコンが親のアクションバーに表示されます。

このアイコンを選択してダイアログを表示します。
このダイアログを使用して、現在のページの編集時にコンポーネントブラウザーで利用できるコンポーネントを定義します。

このダイアログにはタブが 2 つあります。
- 許可されたコンポーネント
- 設定
許可されたコンポーネント

「許可されているコンポーネント」タブで、parsysで使用できるコンポーネントを定義します。
- コンポーネントは、コンポーネントグループ別にグループ化されています。それらのグループは、展開したり折りたたんだりできます。
- グループ名にチェックマークを付けることでグループ全体を選択でき、またチェックマークを外すことですべて選択解除できます。
- マイナス記号はグループの中のすべてではなく少なくとも 1 つが選択されることを示します。
- 名前でコンポーネントをフィルターするために、検索を使用できます。
- コンポーネントグループ名の右側に示されるカウントは、フィルターに関係なく、そのグループで選択されているコンポーネントの総数を表します。
ページコンポーネントごとに設定を定義します。子ページで同じテンプレートまたは（通常は整列された）ページコンポーネントを使用すると、対応する段落システムに同じ設定が適用されます。

メモ

アダプティブフォームコンポーネントは、アダプティブフォームコンテナ内で動作してフォームエコシステムを活用するように設計されています。このため、これらのコンポーネントはアダプティブフォームエディターでのみ使用する必要があり、サイトページエディターでは機能しません。

設定

「設定」タブでは、追加のオプションを定義できます（各コンポーネントへのアンカーの描画、各コンテナのセル内の余白の定義など）。
「完了」を選択して設定を保存します。

コンポーネントのデザインの設定

デザインモードを選択します。
青いボーダー付きのコンポーネントをタップまたはクリックします。この例では、ヒーロー画像コンポーネントを選択します。
ダイアログを開くには、設定アイコンを使用します。

[設計]ダイアログで、使用可能な設計パラメータに従ってコンポーネントを設定できます。

ダイアログには次の 3 つのタブがあります。
- メイン
- 機能
- スタイル
プロパティ

「プロパティ」タブを使用すると、コンポーネントの重要なデザインパラメーターを設定できます。画像コンポーネントの例では、画像の許可される最大サイズと最小サイズを定義できます。

特長

「機能」タブを使用すると、コンポーネントの追加の機能を有効または無効にできます。例えば、画像コンポーネントの場合は、画像の向き、使用可能な切り抜きオプション、および画像をアップロードできるかどうかを定義できます。

スタイル

「スタイル」タブを使用すると、CSS クラスおよびスタイルを定義して、コンポーネントで使用できます。

「追加」ボタンを使用すると、追加のエントリを複数エントリのダイアログリストに追加できます。

「Delete」アイコンを使用して、複数入力のダイアログリストからエントリを削除します。

複数エントリのダイアログリストのエントリの順序を並べ替えるには、移動アイコンを使用します。
ダイアログを保存して閉じるには、完了アイコンをクリックまたはタップします。