列レイアウト

列レイアウトは、UI ビルダー ページを設計および整理するために使用されます。

このビデオでは、次の手順を実行する方法を紹介します。

列レイアウトを使用して、エクスペリエンスで役に立つ視覚的に魅力あるページを作成することができます。列レイアウトはコンポーネントを保持できる柔軟性に優れたコンテナの一種です。列レイアウトは事前設定されたシンプルなレイアウトであり、効率的で魅力的なページをすばやく設計できます。コンポーネントを追加する前に、列レイアウトを使用してページの構造を定義して設定すると便利です。

列レイアウトでは同じ幅または異なる幅の列を使用できます。

列レイアウト全体を構成し、レイアウト内の個々の列も構成できます。たとえば、列レイアウトとレイアウト内の個々の列に異なる境界線の幅と色を設定します。

注:

現在、列レイアウトで条件に基づく列の非表示/表示はサポートされていません。

列レイアウトの追加

UI ビルダー で列レイアウトを追加し、エクスペリエンスページで構造をビルドし、コンポーネントを整理します。

始める前に

必要なロール：ui_builder_admin

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 「UI ビルダー でのページの作成」の手順を実行するか、またはページを開きます。
4. コンテンツツリーで [+ コンテンツを追加] を選択します。
5. [レイアウト] タブで [基本] オプションのいずれかを選択します。
   
   列レイアウトはステージに表示されるため、コンポーネントを列に追加できます。詳細については、「コンポーネントの追加と構成」を参照してください。
6. 上または下に列レイアウトを追加します。
   • コンテンツツリーで、列レイアウト名を選択したままにするか (または右クリック)、列レイアウトのメニューアイコンを選択します。次に、リストから [前に追加] または [後に追加] を選択し、レイアウトを選択します。

     

   • ステージで列レイアウトを選択し、上部または下部のプラス記号を選択します。

     

列レイアウトの構成

UI ビルダー で列レイアウトを構成して、エクスペリエンスページに必要な適切な数の列と外観を追加します。

始める前に

必要なロール：ui_builder_admin

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 「UI ビルダー でのページの作成」の手順を実行するか、またはページを開きます。
4. ページに列レイアウトがまだ含まれていない場合は、列レイアウトの追加。
5. コンテンツツリー、ステージ、または構成パネルを使用して列を追加します (最大 6 つ)。
   • コンテンツツリーで、列名を選択したままにするか (または右クリック)、列のメニューアイコンを選択して、リストから [事前に列を追加 (Add column before)] または [事後に列を追加 (Add column after)] を選択します。

     

   • ステージで、単一列を選択し、列名の横にあるメニューアイコンを選択して、リストから [事前に列を追加 (Add column before)] または [事後に列を追加 (Add column after)] を選択します。

     

   • ステージで、列を選択したままにして (または右クリックして)、リストから [事前に列を追加 (Add column before)] または [事後に列を追加 (Add column after)] を選択します。

     

   • コンテンツツリーで列レイアウトを選択し、ステージで [+] プラスアイコンを選択して、列レイアウトの右側に列を追加します。

     

   • コンテンツツリーで列レイアウトを選択し、構成パネルで [列] の横にある [+] プラスアイコンを使用して、列レイアウトの右側に列を追加します。

     

   注:

   列は相互にネストできますが、多くの場合、ページではこのレベルの複雑さは必要ありません。
6. コンテンツツリー、ステージ、または構成パネルから列ラベルを編集して、列の名前を変更します。
   • コンテンツツリーで、列名を選択したままにするか (または右クリック)、列のメニューアイコンを選択して、[名前の変更] を選択します。
   • ステージで、列名の横にあるメニューアイコンを選択し、[名前の変更] を選択します。
   • 構成パネルで、列名の横にある情報アイコンを選択します。

     

   列の名前を変更すると、ステージとコンテンツツリーの異なる列を区別するのに役立ちます。多数の列レイアウトと列を含む複雑なページがある場合は、列の名前を変更すると便利です。
7. レイアウト内の列の幅を変更するには、(コンテンツツリーまたはステージで) 列レイアウトを選択してから、ステージ上の列の分割線を左右にドラッグして列の幅を狭くしたり広くしたりします。
   
   列の分割線をドラッグすると、列の上部の幅のパーセンテージが自動的に変化します。パーセンテージの合計は 100% になります。列のサイズを変更するときは、列内のコンポーネントに必要なスペースに注意してください。たとえば、リストおよびフォームコンポーネントは通常、幅の狭い列では適切に表示されません。
8. コンテンツツリー、ステージ、または構成パネルを使用して、レイアウト内の列を水平方向に均等に配分します。
   • コンテンツツリーで、列レイアウト名を選択したままにするか (または右クリック)、列レイアウトのメニューアイコンを選択して、リストから [列を均等に配分 (Distribute columns evenly)] を選択します。
   • ステージで、列レイアウト名の横にあるメニューアイコンを選択して、リストから [列を均等に配分 (Distribute columns evenly)] を選択します。
   • (コンテンツツリーまたはステージで) 列レイアウトを選択し、構成パネルで [列を均等に配分 (Distribute columns evenly)] を選択します。
9. コンテンツツリーまたはステージを使用して、列レイアウト内の列 (その内容を含む) を並べ替えます。
   • コンテンツツリーで、列を選択し、別の位置にドラッグします (青い横線は、列をドロップできる場所を示します)。

     

   • ステージで列ヘッダーを選択し、列を別の位置にドラッグして、マゼンタの縦線で定義されたドロップゾーンに列をドロップします。

     

   列をコンテンツツリーで並べ替えるとステージが更新され、ステージで並べ替えるとコンテンツツリーが更新されます。
10. コンテンツツリー、ステージ、または構成パネルの列間のスペースを指定します。
    • コンテンツツリーで、列レイアウト名を選択したままにするか (または右クリック)、列レイアウトのメニューアイコンを選択して、リストから [レイアウト] を選択し、[列ギャップ] でサイズオプションを選択します。
    • ステージで、列レイアウト名の横にあるメニューアイコンを選択して、リストから [レイアウト] を選択し、[列ギャップ] でサイズオプションを選択します。
    • 列レイアウトを (コンテンツツリーまたはステージで) 選択し、構成パネルの [列ギャップ] でサイズオプションを選択します。

      

11. ツリーアイコンを選択して、コンテンツの別のレイヤーに移動します。たとえば、列から親の列レイアウトや子コンポーネント移動します。
    
12. コンテンツツリーまたはステージから列を削除します。
    • コンテンツツリーで、列名を選択したままにするか (または右クリック)、列のメニューアイコンを選択して、リストから [列を削除] を選択します。
    • ステージで、単一列を選択し、列名の横にあるメニューアイコンを選択して、リストから [列を削除] を選択します。
    • コンテンツツリーで列レイアウトを選択し、構成パネルで [列] の横にある [-] マイナスアイコンを使用して、列レイアウトの右側から列を削除します。
    列間隔の編集については、「列のコンポーネント間のギャップを設定する」を参照してください。

列のコンポーネント間のギャップを設定する

UI ビルダー で、列に複数のコンポーネントが含まれている場合、コンポーネント間のギャップを設定します。

始める前に

必要なロール：ui_builder_admin

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 「UI ビルダー でのページの作成」の手順を実行するか、またはページを開きます。
4. ページに列レイアウトがまだ含まれていない場合は、列レイアウトの追加。
5. 1 つの列内に 2 つのコンポーネントを追加します
   1. コンテンツツリーで列を特定し、列名の下にある [+ コンテンツを追加] を選択します。
   2. ツールボックスウィンドウで、コンポーネント (アバター など) を選択します。
   3. コンテンツツリーで、追加したコンポーネントの名前の上にマウスを移動し、[メニューを開く] (縦に並んだ 3 つのドット) アイコンを選択して、[後に追加] を選択します。
      
   4. ツールボックスウィンドウで、別のコンポーネント (ボタン など) を選択します。
6. [保存] を選択します。
7. コンテンツツリーで、2 つのコンポーネントを追加した列を選択します。
8. 構成パネルの [ギャップ] で、サイズのオプションを選択します。
   
9. 正確なギャップサイズをピクセル単位で指定するには、[ギャップ] フィールドの上にマウスを移動し、[カスタム値を使用] (鉛筆) アイコンを選択して、数値 (300px など) を入力します。
   
10. 列のコンポーネントの配置を積み重ねるか横に並べるかを変更するには、[方向] で [行] または [列] アイコンを選択します。
    

    列のコンポーネントの順序と配置を逆にするには、[方向] の [詳細] (横 3 つのドット) アイコンを選択し、[逆にする (Reverse)] オプションを選択します。

    

詳細な列レイアウトオプションの設定

スタック幅と列レイアウト高さを含む、詳細な列レイアウトオプションを UI ビルダーで設定します。

始める前に

必要なロール：ui_builder_admin

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 「UI ビルダー でのページの作成」の手順を実行するか、またはページを開きます。
4. ページに列レイアウトがまだ含まれていない場合は、列レイアウトの追加。
5. コンテンツツリーで 2 つ以上の列を含む列レイアウトを選択します。
   
6. スタック幅を設定するには、構成パネル > [レイアウト] に移動し、[詳細レイアウトオプションを表示] を選択します。
   注:

   スタック幅を設定すると、幅の狭いブラウザーウィンドウ、タブレット、またはモバイルデバイスでの列レイアウトを含むページの外観を制御できます。

   
7. [下に列をスタック] に幅を入力します。
8. [保存] を選択します。
9. 更新されたスタック幅をテストするには、[プレビュー] の横にある矢印を選択し、[URL パスを開く] を選択します。
10. 指定したスタック幅よりもブラウザウィンドウの幅を小さくして、右側の列が最初の列より下に移動することを確認します。
11. URL パスで開いたブラウザタブを閉じます。
12. 列レイアウトの高さを制御するには、コンテンツツリーで 2 つ以上の列を含む列レイアウトを選択し、[構成パネル] > [レイアウト] に移動して、[詳細レイアウトオプションを表示] を選択します。
    注:

    高さの設定は、リストコンポーネントなどの高さを設定できるコンポーネントが列レイアウトに含まれている場合に便利です。
13. [サイジング] で、1 つ以上のオプション ([高さ]、[最小高]、[最大高]) に数値を入力し、サイズ単位 (px、%、em など) を設定します。
    
14. [保存] を選択します。
15. 更新されたサイジングをテストするには、[プレビュー] の横にある矢印を選択し、[URL パスを開く] を選択します。
16. ブラウザウィンドウの高さを縮小および拡大して、指定した値をテストします。
17. URL パスで開いたブラウザタブを閉じます。