技術 Tips 集
ArcGIS Experience Builder (Developer Edition)
コア コンセプト
レイアウト (Layout)

レイアウト (Layout)

出典：ArcGIS Experience Builder - Guide - Layout

レイアウト (Layout)

ArcGIS Experience Builder のレイアウトは、ウィジェット、セクション、スクリーン グループなどのコンテンツが、レイアウト コンテナー内でどのように配置されるかを定義します。ページ、ビュー、ウィンドウ、さらにはウィジェット自体も、レイアウト コンテナーとして使用できます。レイアウトによって、アプリ内のコンテンツの構造や視覚的な配置が決まります。

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

レイアウトを使用すると、明確なナビゲーションと操作パターンを備えた構造的なデザインを作成し、ユーザー エクスペリエンスを向上できます。レイアウトの主な用途は次のとおりです。

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

主要な概念

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

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

レイアウトの使用方法

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

  1. レイアウトの追加 エクスペリエンスにページまたはウィンドウにレイアウトを追加します。

  2. レイアウト設定の構成 レイアウト タイプ、構造、レスポンシブ動作を設定します。

  3. レイアウトの追加と配置 ウィジェットをレイアウト内に配置し、その配置を調整します。

1. レイアウトの追加

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

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

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

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

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

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

  2. レスポンシブ動作

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

3. ウィジェットの追加と配置

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

  1. ウィジェットを追加

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

  2. 配置とサイズ調整

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

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

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

  1. レイアウト ウィジェット (例：固定パネル ウィジェット)
    レイアウト専用に設計されたウィジェットです。

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

コード例

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

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

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

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