レイアウト（Layout）

出典：ArcGIS Experience Builder - Guide - Layout

レイアウト（Layout）

レイアウトは、レイアウト コンテナーにウィジェット、セクション、スクリーングループなどのコンテンツを配置する方法を定義します。レイアウト コンテナーには、ページ、ビュー、ウィンドウ、そしてウィジェットそのものでさえも含めることができます。レイアウトは、アプリケーション内のコンテンツの構造と視覚的な配置を決定します。

なぜレイアウトを使うのか？

レイアウトによって明確なナビゲーションと操作パターンが提供されることで、ユーザー エクスペリエンスを向上させる構造化的なデザインを作成するすることができます。レイアウトを使用することで次のことが可能になります。

  • コンテンツを視覚的に整理し、アプリケーションを使いやすくします。
  • 大・中・小など異なるサイズモードに対応した、レスポンシブ デザインを可能にします。
  • ウィジェットやその他の要素の、複数のコンテナーやスクリーンにおける配置方法を定義することで、再利用性と一貫性を実現します。
  • ウィジェットをレイアウト コンテナーとして機能させることで、他のウィジェットをその中へドラッグ＆ドロップできるようになります。

主要な概念

Experience Builder におけるレイアウトは、ウィジェットやセクションなど他のコンテンツを保持するコンテナーです。レイアウトに関連する主要な概念は次のとおりです。

  • ページ、ビュー、ウィンドウといったフレームワーク要素はレイアウトを持ちます。ページのレイアウトは固定、フロー、またはグリッドのうちから選択し、ビューとウィンドウのレイアウトは固定となります。
  • 構造化されたレイアウトを作成するための高度なレイアウト オプションを提供するレイアウト ウィジェット（Row、Column、Grid、Fixed など）もあります。
  • 各レイアウトには 3 つのサイズ モード（Large、Medium、Small）があります。Medium と Small はオプションで、定義されていない場合は Large モードが使用されます。
  • 各サイズ モードのレイアウトにはレイアウト アイテムが含まれ、ウィジェット、セクション、スクリーン グループなどのコンテンツを保持します。レイアウト アイテムにはスタイル オプションを設定可能です。
  • 開発者は次の 2 つの方法でレイアウトを拡張できます。
    1. Row や Column ウィジェットなどの manifest において widgetType=LAYOUT を設定してレイアウト ウィジェットを作成する。
    2. List や Card ウィジェットなどの manifest において layouts プロパティを定義し、LayoutEntry コンポーネントを使用することで、レイアウト機能を持つ通常のウィジェットを作成する。

レイアウトの使用方法

ArcGIS Experience Builder でレイアウトを使用する一般的な手順は次のとおりです。

  1. レイアウトの追加 エクスペリエンスにページを追加してください。

  2. レイアウト設定の構成 ページにウィジェット、セクション、またはスクリーンを追加します。

  3. レイアウトの追加と配置 ページのレイアウト タイプとサイズ モードを設定します。

1. レイアウトの追加

次の手順に従って、エクスペリエンスにレイアウトを追加します。

  1. Page パネルまたは Window パネルに移動し、レイアウトを追加したい領域を選択します。
  2. [レイアウトの追加] をクリックし、Row、Column、Grid、Fixed などのレイアウト タイプを選択します。
  3. レイアウトがエクスペリエンスに追加され、さらに設定できる状態になります。

2. レイアウト設定の構成

レイアウトのプロパティを設定する際は、次の項目を考慮します。

  1. レイアウト タイプと構造

    • 利用可能なレイアウト タイプ（Row、Column、Grid、Fixed など）から選択します。
    • 必要に応じてセクション、列、行の数を調整します。
    • レイアウトの配置、間隔、余白を設定します。

  2. レスポンシブ動作

    • レイアウトが異なる画面サイズに対応するよう、レスポンシブ設定を有効化または調整します。
    • デスクトップ、タブレット、モバイル ビューでプレビューし、微調整します。

3. レイアウトの追加と配置

レイアウトを設定した後、ウィジェットを追加し、必要に応じて配置を調整します。

  1. ウィジェットを追加

    • ウィジェットをレイアウトセクションにドラッグ＆ドロップします。
    • ウィジェットを希望する順序と場所に配置します。

  2. 配置とサイズ調整

    • レイアウト内でウィジェットのサイズと位置を調整します。
    • 配置や分布ツールを使用して、ウィジェットを見やすく、使いやすく整理します。

レイアウト機能を持つウィジェットの種類

レイアウト機能を持つウィジェットには、次の 2 種類があります。

  1. レイアウトウィジェット（例：Fix Panel ウィジェット） ー レイアウト専用に設計されたウィジェットです。

  2. レイアウト機能を備えたウィジェット（例：Card ウィジェット） ー 通常のウィジェットですが、レイアウト機能を含んでいます。

コード例

レイアウト ウィジェットやレイアウト機能を持つウィジェットの完全な動作コード例については、ArcGIS Experience Builder SDK Resources リポジトリをご覧ください。具体的には次のものなどがあります。

  • Dock layout widget：ドラッグ、リサイズ、インタラクティブ機能を備えたカスタムレイアウトウィジェットの完全な例。
  • Widget with layout：レイアウト機能を含む通常のウィジェットの例

これらの例には次の内容が含まれます。

  • 動作するコード：最新のベスト プラクティスに従ったテスト済みの実装
  • ドキュメント：各例を詳しく説明する README ファイル
  • ベストプラクティス：レイアウト実装の推奨パターン