Grid コンポーネント
Grid は、ページを安定した再利用可能なレスポンシブ領域に分割するレイアウトコンポーネントです。ダッシュボード、詳細ページ、メイン領域とサイドバー、等幅カードの配置に適しています。各領域には Form、Common Panel、ProTable、DataList などを配置できます。
1. サンプル：キャンペーン運用ダッシュボード
Spark Sample の Grid ページでは、よく使う 3 種類の配置を確認できます。
| 行 | 列幅 | 用途 |
|---|---|---|
| Equal Thirds | 8 + 8 + 8 | 3 枚の等幅 KPI カード |
| Main and Sidebar | 16 + 8 | キャンペーン詳細と確認用サイドバー |
| Equal Halves | 12 + 12 | スケジュールとオーディエンス |
Screen
└── Grid
├── Row → 8/24 + 8/24 + 8/24
├── Row → 16/24 + 8/24
└── Row → 12/24 + 12/24
このサンプルは初期値だけを使うため、バックエンド API は不要です。実データが必要な場合は、列内に Data Form、DataList、ProTable を配置してください。
2. 3 階層の構造
- Grid：行全体の水平方向の配置と垂直方向の揃え方を管理します。
- Grid Row：1 行を表し、列間隔と折り返し後の行間隔を管理します。
- Grid Column：24 列の一部を占有し、業務コンポーネントを格納します。
次の順序で追加します。
Grid → Grid Row → Grid Column → Common Panel / Form / データコンポーネント
3. Grid を追加する
- Page Designer でページを開き、Screen を選択します。
- Screen の Grid 子要素領域に Grid を追加します。
- Grid の Rows に Grid Row を追加します。
- Row の Columns に 1 つ以上の Grid Column を追加します。
- 各列の Span Columns を設定します。
- 列の Panels に Common Panel、Form、ProTable などを追加します。
- 保存後、デザインプレビューと実行画面を確認します。
新しい Grid Column は初期状態で 24/24 を占有するため、追加直後から全幅で表示されます。
4. 24 列グリッド
Span Columns は 1～24 で設定します。
| レイアウト | 値 |
|---|---|
| 全幅 | 24 |
| 2 等分 | 12 + 12 |
| 3 等分 | 8 + 8 + 8 |
| 4 等分 | 6 + 6 + 6 + 6 |
| メイン領域とサイドバー | 16 + 8 または 18 + 6 |
同じ行の合計は通常 24 にします。24 未満では空き領域が残り、Horizontal Alignment に従って配置されます。24 を超えると、後続の列は次の行へ折り返されます。Column Gap は見た目の間隔なので、24 から差し引く必要はありません。
5. 間隔と配置
Grid Row では次を設定します。
| プロパティ | 範囲 | 内容 |
|---|---|---|
| Column Gap | 0～64 | 列間の水平間隔（px） |
| Row Gap | 0～64 | 折り返した行の垂直間隔（px） |
外側の Grid では次を設定します。
- Horizontal Alignment：
start、end、center、space-between、space-around - Vertical Alignment：
top、middle、bottom
列幅の合計が 24 の場合は空き領域がないため、水平配置の違いが見えないことがあります。比較するときは一時的に 8 + 8 にしてください。垂直配置は、同じ行の列高が異なる場合に確認できます。
6. 列の最小高さ
Minimum Column Height は 0～1200px です。
0：内容に合わせて自動的に高さを決定します。通常はこちらを使用します。- 1 以上：指定値以上の高さを確保します。内容が増えた場合はさらに伸び、切り取られません。
同じ行のカードを揃えたい場合は、各列に同じ最小高さを設定します。最大高さではありません。
7. 列内のコンポーネント
- Common Panel + Form：タイトル付きの詳細カードや KPI カード
- Form：追加のカードタイトルが不要な入力領域
- ProTable / DataList：メイン一覧、フィルター、サイド領域
- Tree：通常は Screen の Navigation Tree を使い、一般コンテンツとして必要な場合だけ列に配置
Grid は外側の領域幅を決めます。Form の Controls Per Row と Form Grid Split は、その領域の内部で改めて計算されます。
8. サンプルを再現する
- Grid を追加し、
startとtopを設定します。 - Column Gap と Row Gap が
16の Row を追加します。 8 + 8 + 8の 3 列を追加し、最小高さを156にします。16 + 8の行を追加し、最小高さを228にします。12 + 12の行を追加し、最小高さを176にします。- 各列に Common Panel と読み取り専用 Form を配置します。
- 保存し、画面幅を狭くしてモバイルの積み重ね表示を確認します。
9. レスポンシブ動作
PC では 24 列の設定どおりに表示されます。スマートフォンや狭い画面では、フォームやカードが細くなりすぎないよう、設定順に 1 列へ積み重なります。Page JSON と Span Columns は変更されず、画面が広くなると元の配置に戻ります。
10. バックエンドとインタラクション
Grid 自体は通信を行わないレイアウト専用コンポーネントです。Java バックエンドが必要になるのは、子のデータコンポーネントまたは Interaction が業務データを使う場合だけです。ページリクエストには環境とレンダリングモードが自動付与されます。詳しくはページリクエストコンテキストとバックエンドデバッグを参照してください。
操作は Grid Row や Grid Column ではなく、実際に処理を担当するボタン、フィールド、カード、データコンポーネントに設定します。
11. トラブルシューティング
- 列が折り返される：Span Columns の合計が 24 を超えていないか確認します。
- Horizontal Alignment が変化しない：空き領域を作るため、一時的に
8 + 8で試します。 - Vertical Alignment が変化しない：高さの異なる 2 列で確認します。
- Form のラベル幅がおかしい：Grid Column の幅を確定してから Form の内部分割を設定します。
- プレビューと実行画面が異なる：ページを保存し、現在の
versionIdを使用しているか確認します。