Show Menu
トピック×

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

アダプティブフォームとInteractive Communication Webチャネルオーサリングインターフェイスを使用すると、レイアウトモードを使用してコンポーネントのサイズを変更できます。 列内の青い点をドラッグ&ドロップして、コンポーネントを配置する始点と終点を定義します。 レスポンシブグリッド内のコンポーネントをタップすると、青い点が表示されます。 レスポンシブグリッドは、12列の同じ列で構成されます。 別の列の白と青の色の網掛けは、1つの列を別の列と区別します。
レイアウトモードを使用すると、デスクトップ、タブレット、スマートフォン、その他の小型のデバイスなど、すべての種類のデバイスのコンポーネントのサイズを変更できます。 タブレットはデスクトップバージョンからレイアウト設定を自動的に引き継ぎ、小さいデバイスはスマートフォンからレイアウト設定を引き継ぎます。 ただし、自動的に生成された設定を上書きして、デバイスの種類ごとに異なる設定を定義することができます。
印刷チャネルをインタラクティブ通信のマスターとして Webチャネルを作成する場合 、印刷チャネルを使用してWebチャネルで自動生成されるサブフォームやフィールドも、サイズ変更に使用できるコンポーネントに含まれます。 Webチャネルは、印刷チャネル要素のレイアウトをレイアウトモードで保持します。

レイアウトモードにアクセス

アダプティブフ ォームの上部に表示されるドロップダウンリストから 、「プレビュー」オプションの横にある「インタラクティブコミュニケーションオーサリングインターフェイス」から「レイアウト」を 選択します 。 フォームがレイアウトモードで表示されます。
  1. AEM オーサーインスタンスにログインし、 Adobe Experience Manager フォーム フォームとドキュメント ​に移動します。
  2. 新しいアダプティブフォームを作成するか 、既存のアダプティブフォームまたはインタラクティブコミュニケーションを開きます。
  3. 「プレ ビュー 」オプションの横に表示されるドロップダウンリストから「レイアウト」を選 択します 。 フォームがレイアウトモードで表示されます。

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

  1. レイアウトモードで、サイズを変更するコンポーネントをタップします。 レスポンシブグリッドの開始と終了に青い点が表示されます。
  2. 青い点をドラッグ&ドロップして、レスポンシブグリッド内のコンポーネントの位置を定義します。
    コンポーネントをタップした後に表示されるツールバーは、次のオプションで構成されます。
    • 親: コンポーネントの親を選択します。
    • 改行位置に固定: 同じ行内に複数のコンポーネントがある場合は、コンポーネントを次の行に移動します。
    「ブレークポイントを元に戻す(ブレークポイントを元に戻す )」オプションを使用して、サイズ変更されたコンポーネントを含むパネルに、すべてのサイズ変更の変更を元に戻し、デフォル トのレイアウトを適用する ことができます。 サイズ変更したコンポーネントの親をタップして、オプションを表示します。
    レイアウトモードを使用して、テーブル列、ツールバー、ツールバーボタン、ターゲット領域のコンポーネントのサイズを変更することはできません。 スタイルモードを使用して、これらのコンポーネントのサイズを変更します。

目的: 表コンポーネントと画像コンポーネントを挿入し、それらをインタラクティブ通信内で互いに平行に配置する場合。
  1. Webチャネルの編集モードを使用して、テーブルと画像のコンポーネントを挿入します。 画像コンポーネントは、表コンポーネントの後に表示されます。
  2. レイアウトモードに切り替えて、表コンポーネントをタップします。 コンポーネントのサイズを変更する青い点が列1と12に表示されます。
  3. レスポンシブグリッドの列12の青い点を列6にドラッグ&ドロップします。
  4. 同様に、画像コンポーネントを選択し、レスポンシブグリッドの列1から列7までの青い点をドラッグ&ドロップします。 表と画像の構成要素は互いに平行に表示されます。
    「画像」コンポーネントを選択し、ツールバーの「 Float to new line 」オプションをタップして、画像コンポーネントを次の行に移動できます。

パネルのサイズ変更

個々のコンポーネントではなくパネル全体のサイズを変更する場合は、次の手順を実行します。
  1. パネル内でサイズを変更するコンポーネントのいずれかをタップし、「親を選択 」を選択し、パネルがコンポーネントの直接の親である場合は、ドロップダウンリストの最初のオプションを選択します。
    レスポンシブグリッドの開始と終了に青い点が表示されます。
  2. 青いドットをドラッグ&ドロップして、レスポンシブグリッド内のパネルの位置を定義します。 手順1と2を繰り返し、「親を選択」を 、サイズ変更したパネルを次の行に移動できます。

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

次の手順を実行して、パネルの列数を定義します。
  1. 編集モ ードで 、パネルをタップし、「設定 「レスポンシブ — レスポンシブ」を選択します。
  2. 」をタップして、プロパティを保存します。
  3. レイアウト モードで 、パネル内の任意のコンポーネントをタップし、「親を選択」 、パネルを選択します。
  4. 複数列 、ドロップダウンリストから列数を選択します。 列数の範囲は1 ~ 12です。 パネルが複数列のレイアウトに分割されます。

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

AEM Forms 6.4以前のバージョンを使用して作成するフォームの新しいレスポンシブグリッドを有効にし、コンポーネントのサイズを変更します。
新しいレスポンシブグリッドに切り替えると、フォームで使用されるコンポーネントに対して既に定義されているレイアウトプロパティが破棄されます。
新しいレスポンシブグリッドを有効にするには、次の手順を実行します。
  1. 「プレ ビュー 」オプションの横に表示されるドロップダウンリストから「レイアウト」を選 択します 。 レイアウトモードを有効にするための確認メッセージが表示されます。
  2. 「はい」 をタップし 、フォ ​ームのレイアウトモードを有効にします。

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

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

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

古いレスポンシブレイアウトを使用したアダプティブフォームに、新しいレスポンシブレイアウトでフラグメントを埋め込むと、フォームのレイアウトモードを有効にし、フラグメントを再度埋め込むよう求められます。
レイアウトモードを有効にするには、「プレビュ 」オプションの横に表示されるドロップダウンリストから「 Layout 」を選択し、「はい」をタ ​ップして確認します。 フラグメント を再埋め込みするには 、編集モードを選択します。

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

古いレスポンシブレイアウトを含むフォームのレイアウトモードを無効にするには、フォームで使用するテンプレートのプロパティを編集します。
レイアウトモードを無効にするには、次の手順を実行します。
  1. ツール/一 /テンプ レートを選択し 、編集モードでフォームで使用され ているテンプレートを開きます。
  2. 左側のパネルで「ドキュメントコンテナ」を選択し、「ポリシー」をタッ プします。
  3. 「レイアウト設 定」タブをタップし 、「レイアウトモードを 無効にする」を選択しま ​す。
  4. Tap to save the template properties.