セクションとビュー (Section and view)
出典：ArcGIS Experience Builder - Guide - Section and view
このページでは、ArcGIS Experience Builder のセクション コンポーネントとビュー コンポーネントについて説明します。また、セクションが複数のビューのコンテナーとしてどのように機能するか、セクション内でビューがページやウィンドウとどのように同じように機能するか、ビュー ナビゲーション ウィジェットを使用してビュー間を移動する方法についても学びます。
セクションとは
セクションは、ページに追加できるレイアウト コンテナーです。セクションは、アプリケーション内のコンテンツを整理し、構造化します。セクションはモジュール レイアウトに便利で、関連するコンテンツをグループ化できます。ヘッダー、フッター、サイドバー、メイン コンテンツ エリアに使用できます。
セクションには、そのセクションの代替レイアウトやコンテンツ領域である複数のビューを含めることができます。これにより、ページを離れることなく異なるコンテンツ セットを切り替えることで、よりダイナミックなユーザー エクスペリエンスを生み出すことができます。
ビューとは
ビューはセクションに追加されるレイアウト コンテナーです。ページやウィンドウの機能に類似しますが、セクションで使用されます。ビューは、ウィジェットとコンテンツのための明確な領域を作成します。
ビューは、タブ、ワークフローのステップ、異なる情報の状態など、同じセクションで別のコンテンツやレイアウトを表示するのに便利です。ビューの切り替えは、ビュー ナビゲーション ウィジェットなどのナビゲーション コントロールを使用するか、トリガーを設定することで行います。
ビューは、関連するコンテンツへのアクセスを維持しながら、ユーザーが一度に 1 つのコンテンツ セットに集中できるようにすることで、アプリケーションを整理するのに役立ちます。これは、ユーザーがページを離れることなく異なる情報やツールの間を移動する、ガイド付きエクスペリエンス、ウィザード、またはダッシュボードに役立ちます。
ビューは異なるレイアウトやウィジェットを持つことができ、切り替え時にトランジション アニメーションを適用できます。
セクションとビューの使用方法
セクションとビューをナビゲーション ウィジェットと一緒に使うことで、インタラクティブで、整理された、モジュール化されたエクスペリエンスを作ることができます。
セクションとビューを使用するには、次の手順に従います。
- ページにセクションを追加します。
- セクションにビューを追加します。
- ビューを設定し、ビュー間のナビゲーションを設定する。
- オプションで、よりスムーズなユーザー エクスペリエンスのためにトランジション アニメーションを適用する。
セクションとビューの違い
セクションとビューはどちらもコンテンツを整理するために使用されますが、構造、レンダリング、ユーザー インタラクションが異なります。以下の表は、主な違いをまとめたものです。
| 観点 | セクション | ビュー |
|---|---|---|
| 定義 | コンテンツをグループ化し、レイアウトを管理するためにページに追加されるコンテナー | 代替コンテンツやレイアウトを表示するためにセクションに追加されるコンテナー |
| 階層 | ページレベルまたは他のビュー内に存在 | セクション内に存在 |
| コンテンツ | 複数のビューを含むことが可能 | そのビューに固有のウィジェットやコンテンツを含むことが可能 |
| ナビゲーション | ナビゲーションはセクション内のビュー間で行われる | ビューナビゲーションウィジェットやトリガーを使ってナビゲート可能 |
| レンダリング | セクション内のすべてのビューがレンダリングされるが、アクティブなビューだけが表示される | 一度に表示されるのは1つのビューのみで、他のビューは非表示になるがレンダリングはされる |
| アニメーション | ビューの切り替えにトランジション アニメーションを設定可能 | セクションのアニメーションを継承 |
| ユースケース | ページレイアウトの整理、関連するコンテンツのグループ化、モジュール化されたデザインの作成 | タブ、ワークフローのステップ、代替状態、ガイド付きエクスペリエンス |
セクションとビューの主な違いは以下の通りです。
- レンダリング：複数のページをロードする場合、最初にレンダリングされるのは現在のページのコンテンツだけです。一方、セクション内の複数のビューをロードする場合、ビュー内のすべてのコンテンツがレンダリングされますが、現在のビューのみが表示され、他のビューは非表示になります。
- アニメーション：トランジション アニメーションをセクション上で定義することができ、セクション内のビュー間のスムーズなトランジションが可能になります。
- ナビゲーション：セクションは構造を提供し、ビューはその構造の中で異なるコンテンツのセットを切り替える機能を提供します。
セクションとビューの AppConfig
AppConfig では、セクションは sections プロパティで定義され、sectionId がキーとなります。ビューは views プロパティで定義します。この構造により、アプリケーションを効果的に整理し、セクションとビューを簡単に管理し、アクセスできるようにすることができます。
sectionsプロパティには、アプリケーションに追加されたセクションを表すセクション オブジェクトの配列が含まれます。各セクション オブジェクトには、スタイルや含まれるビューのリストなどの構成の詳細が含まれます。viewsプロパティには、セクション内の各ビューの定義が含まれます。各ビュー オブジェクトは、固有の ID、保持するウィジェットやコンテンツ、そのビューに適用される特定の設定やスタイルを指定します。