ウィジェット（Widget）

出典：ArcGIS Experience Builder - Guide - Widget

ウィジェット（Widget）

ArcGIS Experience Builder におけるウィジェットは、Web アプリケーション内で特定の機能を提供するモジュール型の柔軟なコンポーネントです。ウィジェットは、地図の表示、ボタンによるユーザー操作の管理、リストやチャートによるデータの可視化など、さまざまなタスクを処理できます。ウィジェットを設定することで、インタラクティブで動的な Web アプリケーションを作成できます。

Experience Builder に含まれるウィジェットには以下の2つのカテゴリがあります。

  • 標準ウィジェット（Out-of-the-box widgets）： 地図、ボタン、データ可視化ツールなど、一般的な機能を実装した事前構築済みのコンポーネント
  • カスタムウィジェット（Custom widgets）： Developer Edition を使用して開発者が作成するコンポーネントで、特定の要件に対応するための機能を実装

各ウィジェットは、動作や外観をカスタマイズするための設定が可能です。設定は次の方法で管理できます。

標準プロパティを変更するためのインターフェイスである、ビルダー環境の設定 UI 設定 UI がない場合に高度な設定オプションを編集できる、JSON エディター

ウィジェットの機能

ほとんどのウィジェットには UI がありますが、必須ではありません。ウィジェットは UI 以外にもさまざまな機能があります。

  • メッセージ アクションとデータ アクション

    ウィジェットは、メッセージアクションを通じて他のウィジェットと連携し、データアクションを通じてデータを処理できます。これによりウィジェット同士が通信し、異なるソースからのデータを処理できます。詳細は ウィジェット コミュニケーションをご覧ください。

  • 拡張機能

    ウィジェットは、拡張機能を用いることでアプリケーションライフサイクルの特定のポイントにフックできます。たとえば、AppConfigProcessor のエクステンション ポイントを使用すると、ウィジェットは実行時にアプリケーション構成を処理・変更できます。利用可能なエクステンション ポイントの詳細は、エクステンション ポイントのガイドをご覧ください。

ウィジェットの使い方

ArcGIS Experience Builder でウィジェットを使用する一般的な手順は次のとおりです。

  1. ウィジェットの追加 ページやレイアウトにウィジェットを追加します。

  2. ウィジェットの設定の構成 ウィジェットのプロパティや動作を調整します。

  3. ウィジェットの配置とスタイルの設定 レイアウト内でウィジェットを整理し、スタイルを適用します。

1. ウィジェットの追加

次のステップに従って、エクスペリエンスにウィジェットを追加します。

  1. ArcGIS Experience Builder のウィジェットパネルに移動します。
  2. 追加したいウィジェットをページまたはレイアウト セクションに ドラッグ＆ドロップします。
  3. ウィジェットがエクスペリエンスに追加され、詳細な設定が可能になります。

ウィジェットの追加について詳しくは、ウィジェットの追加ガイドをご覧ください。

2. ウィジェットの設定の構成

次のステップに従って、ウィジェットのプロパティを設定します。

  1. 設定したいウィジェットを選択します。
  2. 設定パネルを使用して、データソース、外観、動作などのウィジェットのプロパティを調整します。
  3. 設定 UI がないウィジェットの場合は、JSON エディターを使用して手動でオプションを構成します。

3. ウィジェットの配置とスタイルの設定

次のステップに従って、エクスペリエンス内でウィジェットを配置・スタイル設定をします。

  1. レイアウト内でウィジェットを移動・サイズ変更し、配置を変更します。
  2. 背景、枠線、余白などのスタイルを適用して、各ウィジェットの外観をカスタマイズします。
  3. 整列ツールや分布ツールを使用して、ユーザビリティーに配慮してウィジェットを整理します。

ウィジェットのUI構築

カスタムウィジェットを開発する際、UI を構築するには下記の方法があります。

  • Jimu-UI ライブラリ このライブラリはウィジェット開発に推奨される方法です。Experience Builderのテーマ システムと統合された事前構築済みコンポーネントを提供します。これにより、ウィジェット間で一貫したスタイルと動作が可能となります。

  • Calcite Design System Jimu-UI で必要な機能が提供されていない場合、Calcite コンポーネントを使用します。Calcite にはウィジェットの UI 構築に利用できる事前構築済みコンポーネントが含まれています。Calcite コンポーネントは @esri/calcite-components によってアクセス可能です。

ウィジェット UI の構築やコンポーネント オプションについての詳細は、ウィジェット UIをご覧ください。

データとマップの操作

ウィジェットは、下記の方法でデータやマップと連携できます。

  • データを扱う場合（例：フィーチャ レイヤー）

  • マップウィジェットを扱う場合

    • 設定画面で MapWidgetSelector と JimuLayerViewSelector を使用
    • 実行時に JimuMapViewComponent を使用

  • カスタム ウィジェット開発 カスタム ウィジェットを作成することで、ArcGIS Experience Builder の機能の拡張が可能です。カスタム ウィジェットは、ArcGIS Experience Builder Developer Edition を使用して構築します。Developer Edition は、新しいウィジェットをビルダー環境に作成・統合することができるツールと API を提供します。

ウィジェットの実装やカスタマイズの詳細については、ウィジェットの実装をご覧ください。

ウィジェットは設定可能な機能単位で、エクスペリエンスのページを作成するために使用されるビルディング ブロックです。Experience Builder は、マップ、ボタン、リストなどのすぐに使える（OOB）ウィジェットが用意されており、カスタム ウィジェットを作成することも可能です。ウィジェットは通常、ユーザーがビルダー環境で機能を設定できるように設定 UI を提供します。ウィジェットに設定可能なオプションがありますが、設定 UI が含まれていない場合は、JSON エディタを使用して設定することが可能です。

ウィジェットの実装についてはこちらをご覧ください。

app config では、widgets でウィジェットを定義します。