ページ(Page)

出典:ArcGIS Experience Builder - Guide - page

ページとは

ArcGIS Experience Builder では、ページはレイアウトの表現であり、物理的な HTML の Web ページではありませんが、そのように動作します。ページは、エクスペリエンス内でコンテンツを整理するための基盤です。

エクスペリエンスには最低 1 ページが必要で、複数ページも可能です。ページは 2 つのレイアウト タイプでデザインできます。

ウィジェットセクションスクリーンなどのページ コンテンツは、固定レイアウトやフロー レイアウトなどのレイアウト ルールに基づいて配置されます。さまざまな画面サイズに対応できるよう、レイアウトは3つのサイズ モード大画面中画面小画面)に設定できます。この構成により、さまざまな機器に対応したカスタマイズ設計が可能になります。

アプリの設定では、ページは pages プロパティで定義され、その構造は pageStructure プロパティで概説されます。

ページの使用方法

ArcGIS Experience Builder でページを使用する一般的な手順は次のとおりです。

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

  2. ページにコンテンツを追加 ページにウィジェット、セクション、またはスクリーンを追加します。

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

1. ページの追加

エクスペリエンスにページを追加するには、以下の手順に従ってください。

  1. ArcGIS Experience Builder のページ パネルに移動します。
  2. ページの追加ボタンをクリックしてください。
  3. ページのレイアウト タイプを選択します。
    • フルスクリーン アプリ:このレイアウトはアプリケーションのインターフェイスに似ており、固定レイアウトやグリッド レイアウトをサポートしています。
    • スクロール ページ:このレイアウトは従来の Web ページに似ており、縦スクロールが可能です。

2. ページにコンテンツを追加

ページにコンテンツを追加するには、以下の手順に従ってください。

  1. ページ パネルで、コンテンツを追加したいページを選択します。
  2. ウィジェット パネルからウィジェット、セクション、スクリーンをページにドラッグ&ドロップします。
  3. エクスペリエンス ビルダーで利用可能なレイアウト オプションを使用して、必要に応じてコンテンツを配置します。

3. ページ レイアウトの設定

ページ レイアウトを設定するには、以下の手順に従ってください。

  1. ページ パネルで、設定したいページを選択します。
  2. ページのサイズ モードを設定します。
    • 大画面:デスクトップやラップトップなどの大画面用に設計されています。
    • 中画面:タブレットなどの中型スクリーン用に設計されています。
    • 小画面:スマートフォンなどの小さな画面用に設計されています。

ページ レイアウト タイプ

Experience Builder には、それぞれ異なるユーザー エクスペリエンスを提供するように設計された、ページ用の 2 つの主要なレイアウト タイプ(フルスクリーン アプリスクロール ページ)があります。

フルスクリーン アプリ

フルスクリーン アプリのページレイアウトは、アプリケーションのインターフェイスに似せてデザインされています。より没入感のあるエクスペリエンスを提供し、ユーザーは気が散ることなくコンテンツに接することができます。レイアウトは、さまざまな画面サイズや向きに合わせてカスタマイズできます。

フルスクリーン アプリのページ レイアウトは、2つのレイアウト タイプをサポートしています。

レイアウト タイプ 説明
固定 幅と高さが固定されているため、さまざまなデバイスでコンテンツの一貫性が保たれます。特定のデザインとレイアウトを必要とするアプリケーションに適しています。
グリッド コンテンツをより柔軟に配置することができます。さまざまな画面サイズや向きに対応できるため、レスポンシブ デザインを必要とするアプリケーションに適しています。グリッド レイアウトは、さまざまなコンテンツ タイプや配置に合わせてカスタマイズできます。

スクロール ページ

スクロールページ レイアウトは、従来の Web ページに似せてデザインされています。標準的な Web サイトと同じように、ユーザーがコンテンツを縦にスクロールできるようになっています。このレイアウトは、ストーリーテ リングやステップ バイ ステップのガイド、長編コンテンツなど、より直線的な情報の流れを必要とするエクスペリエンスに適しています。

ページ サイズ モード

ArcGIS Experience Builder では、ページの 3 つのサイズ モードがサポートされているため、開発者はさまざまな画面サイズや向きに適応するレスポンシブ デザインを作成できます。3 つのサイズ モードは次のとおりです。

モード 説明
大画面 このモードは、デスクトップやラップトップなどの大画面用に設計されています。より多くのコンテンツやウィジェットを収容できるレイアウトを提供します。
中画面 このモードは、タブレットなどの中型スクリーン向けにデザインされています。タッチ インタラクションにコンテンツを最適化するレイアウトを提供します。
小画面 このモードは、スマートフォンなどの小さな画面向けに設計されています。コンパクトなレイアウトで、モバイル端末でもコンテンツにアクセスしやすく、ナビゲートしやすくなっています。

Experience Builderは、選択したサイズ モードに基づいてレイアウトとコンテンツを自動的に調整します。開発者は、各モードのデザインと動作をカスタマイズして、すべてのデバイスで一貫したユーザー エクスペリエンスを実現できます。

ヘッダーとフッター

Experience Builder では、ヘッダーとフッターは、追加のコンテキストまたはナビゲーション オプションを提供するためにページに追加できるオプションのコンポーネントです。ロゴ、タイトル、ナビゲーションリンク、その他の関連情報などの要素を含めることができます。

ヘッダーとフッターはページ設定でオン/オフでき、内容はすべてのページで同じになります。ヘッダーとフッターは、すべてのページに表示されるように設定することも、エクスペリエンス内の特定のページにのみ表示されるように設定することもできます。また、エクスペリエンスの全体的なデザインに合わせてスタイルやカスタマイズも可能です。ヘッダーとフッターは、ページ設定でオンまたはオフにできます。

ページ構成とその設定方法については、ページの追加と管理のドキュメントをご覧ください。