レイアウトモードを使用したコンポーネントのサイズの変更

アダプティブフォームのオーサリングインターフェイスを使用すると、レイアウトモードを使用してコンポーネントのサイズを変更できます。 列内に青いドットをドラッグ&ドロップし、コンポーネントの位置を決める始点と終点を定義します。 レスポンシブグリッド内のコンポーネントをタップすると、青い点が表示されます。レスポンシブグリッドは、12 個の等しい列で構成されています。代替列の白と青色の影は、1 つの列と他の列を区別します。

レイアウトモードを使用すると、デスクトップ、タブレット、スマートフォン、その他の小型デバイスなど、あらゆる種類のデバイスのコンポーネントサイズを変更できます。タブレットはデスクトップ版からレイアウト設定を自動的に引き継ぎ、小型デバイスはスマートフォンからレイアウト設定を引き継ぎます。自動的に生成された設定を上書きして、デバイスタイプごとに異なる設定を定義することもできます。

レイアウトモードへのアクセス

アダプティブフォームオーサリングインターフェイスの上部で、「プレビュー」オプションの横に表示されるドロップダウンリストから「レイアウト」を選択します。 フォームがレイアウトモードで表示されます。

  1. AEM オーサーインスタンスにログインし、Adobe Experience Managerフォームフォームとドキュメント​に移動します。

  2. 新しいアダプティブフォームを作成するか、既存のアダプティブフォームを開きます。

  3. プレビュー」オプションの横の上部に表示されるドロップダウンリストから「レイアウト」を選択します。フォームがレイアウトモードで表示されます。

    レイアウトモード

コンポーネントのサイズ変更

  1. レイアウトモードで、サイズを変更するコンポーネントをタップします。レスポンシブグリッドの開始と終了に青い点が表示されます。

  2. レスポンシブグリッド内のコンポーネントの位置を定義する青い点をドラッグ&ドロップします。

    レイアウトモードを使用したサイズ変更

    コンポーネントをタップした後に表示されるツールバーは、以下のオプションで構成されます。

    • :コンポーネントの親を選択します。
    • ブレークポイントのレイアウトを元に戻す:すべてのサイズ変更を元に戻し、コンポーネントにデフォルトのレイアウトを適用します。
    • 新しい行にフローティングする:同じ行内に複数のコンポーネントがある場合は、コンポーネントを次の行に移動します。

    また、パネルレベルで「ブレークポイントのレイアウトを元に戻すブレークポイントを元に戻す)」オプションを使用して、すべてのサイズ変更を元に戻すこともできます。

    メモ

    レイアウトモードを使用して、テーブルの列、ツールバー、ツールバーボタン、ターゲット領域のコンポーネントのサイズを変更することはできません。スタイルモードを使用して、これらのコンポーネントのサイズを変更します。

目的: 表コンポーネントと画像コンポーネントを挿入し、アダプティブフォーム内で互いに平行に配置する。

  1. アダプティブフォームの編集モードを使用して、表および画像コンポーネントを挿入します。 画像コンポーネントは、テーブルコンポーネントの後に表示されます。

  2. レイアウトモードに切り替えて、テーブルコンポーネントをタップします。コンポーネントのサイズを変更する青い点が列 1 と列 12 に表示されます。

  3. レスポンシブグリッドの列12の青い点を列6にドラッグ&ドロップします。

    テーブルの終了点を定義

  4. 同様に、画像コンポーネントを選択し、レスポンシブグリッドの列1から列7までの青い点をドラッグ&ドロップします。 テーブルと画像コンポーネントは互いに平行に表示されます。

    レイアウトモードでのテーブルと画像の並行表示

    画像コンポーネントを選択し、ツールバーにある「新しい行にフローティングする」オプションをタップして、画像コンポーネントを次の行に移動できます。

パネルのサイズ変更

個々のコンポーネントではなくパネル全体のサイズを変更する場合は、以下の手順を実行します。

  1. パネル内でサイズを変更するコンポーネントのいずれかをタップし、「親を選択」を選択して、ドロップダウンリストの最初のオプションを選択します(パネルがコンポーネントの直接の親である場合)。

    レスポンシブグリッドの開始と終了に青い点が表示されます。

  2. レスポンシブグリッド内のパネルの位置を定義する青い点をドラッグ&ドロップします。手順 1 と 2 を繰り返し、「親を選択」を選択して、サイズ変更したパネルを次の行に移動できます。

パネルの複数列レイアウトの定義

以下の手順を実行して、パネルの列数を定義します。

  1. 編集​モードで、パネルをタップし、「設定」を選択します。次に、パネルレイアウト​ドロップダウンリストから「レスポンシブ - ページ上のすべて(ナビゲーションなし)」を選択します。

  2. 保存」をタップして、プロパティを保存します。

  3. レイアウト​モードで、パネル内の任意のコンポーネントをタップし、「親を選択」を選択して、パネルを選択します。

  4. 複数列をタップし、ドロップダウンリストから列数を選択します。列数の範囲は 1 ~ 12 です。パネルが複数列のレイアウトに分割されます。

レイアウトモードでの複数列

古いレスポンシブレイアウトに対する新しいレスポンシブグリッドの有効化

AEM Forms 6.4以前のバージョンを使用して作成したフォームに対して、新しいレスポンシブグリッドを有効にして、コンポーネントのサイズを変更します。

メモ

新しいレスポンシブグリッドに切り替えると、フォームで使用するコンポーネントに対して既に定義されているレイアウトプロパティが破棄されます。

以下の手順を実行して、新しいレスポンシブグリッドを有効にします。

  1. プレビュー」オプションの横の上部に表示されるドロップダウンリストから「レイアウト」を選択します。レイアウトモードを有効にするための確認メッセージが表示されます。
  2. はい」をタップして、フォームの​レイアウト​モードを有効にします。

新しいレスポンシブレイアウトを使用して、アダプティブフォームに古いフラグメントを埋め込む

アダプティブフォームの新しいレスポンシブレイアウトを使用すると、古いレスポンシブレイアウトを持つアダプティブフォームフラグメントをフォームに追加できます。 ただし、新しいレイアウトでは、フラグメントで使用するコンポーネントに対して既に定義されているレイアウトプロパティが破棄されます。レイアウトモードに切り替えて、フラグメントで使用するコンポーネントのレイアウトプロパティを定義できます。

新しいレスポンシブレイアウトでフラグメントを古いアダプティブフォームに埋め込む

古いレスポンシブレイアウトを使用したアダプティブフォームで、新しいレスポンシブレイアウトでフラグメントを埋め込むと、フォームのレイアウトモードを有効にしてフラグメントを再埋め込みするよう求めるプロンプトが表示されます。

レイアウトモードを有効にするには、「プレビュー」オプションの横の上部に表示されるドロップダウンリストから「レイアウト」を選択し、「はい」をタップして確認します。編集​モードを選択して、フラグメントを再埋め込みします。

古いレスポンシブレイアウトを含むフォームに対するレイアウトモードの無効化

古いレスポンシブレイアウトを含むフォームのレイアウトモードを無効にするには、フォームで使用するテンプレートのプロパティを編集します。

レイアウトモードを無効にするには、以下の手順を実行します。

  1. ツール一般テンプレート​を選択し、フォームで使用するテンプレートを​編集​モードで開きます。

  2. 左側のウィンドウでドキュメントコンテナを選択し、「ポリシー」をタップします。

    レイアウトモードを無効にする

  3. レイアウト設定」タブをタップし、「レイアウトモードを無効にする」を選択します。

  4. 変更を保存」をタップして、テンプレートプロパティを保存します。

このページ