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