ウィジェット (Widget)
出典：ArcGIS Experience Builder - Guide - Widget
ウィジェット (Widget)
ArcGIS Experience Builder におけるウィジェットは、Web アプリケーション内で特定の機能を提供するモジュール型の構成可能なコンポーネントです。ウィジェットは、地図の表示、ボタンによるユーザー操作の処理、リストやチャートによるデータの可視化など、さまざまなタスクを処理できます。開発者はウィジェットを設定することで、インタラクティブで動的な Web アプリケーションを作成できます。
Experience Builder に含まれるウィジェットには以下の 2 つのカテゴリーがあります。
- 標準ウィジェット (Out-of-the-box widgets)： Experience Builder に付属する事前構築済みのコンポーネントで、マップ、ボタン、データ可視化ツールなどの一般的な機能を提供します。
- カスタム ウィジェット (Custom widgets)： Developer Edition を使用して開発者が作成するコンポーネントで、特定の要件に対応するための機能を実装します。
各ウィジェットは、動作や外観をカスタマイズするための設定できます。設定は次の方法で管理できます。
- 標準プロパティを変更するためのインターフェイスである、ビルダー環境の設定 UI
- 設定 UI がない場合に高度な設定オプションを編集できる、JSON エディター
ウィジェットの機能
ほとんどのウィジェットには UI がありますが、必須ではありません。ウィジェットは UI 以外にもさまざまな機能を提供できます。
メッセージ アクションとデータ アクション
ウィジェットは、メッセージ アクションを通じて他のウィジェットと連携し、データ アクションを通じてデータを処理できます。これによりウィジェット間で通信し、複数のデータ ソースから取得したデータを処理できます。詳細は ウィジェット間の通信をご覧ください。拡張機能
ウィジェットは拡張機能を使用して、アプリケーションのライフサイクル内の特定のタイミングで処理を実行できます。たとえば、AppConfigProcessor拡張ポイントを使用すると、ウィジェットは実行時にアプリケーション構成を処理・変更できます。利用可能な拡張ポイントの詳細は、拡張ポイントのガイドをご覧ください。
ウィジェットの使用方法
ArcGIS Experience Builder でウィジェットを使用する一般的な手順は次のとおりです。
ウィジェットの追加 ページやレイアウトにウィジェットを追加します。
ウィジェットの設定の構成 ウィジェットのプロパティや動作を調整します。
ウィジェットの配置とスタイルの設定 レイアウト内でウィジェットを整理し、スタイルを適用します。
1. ウィジェットの追加
次の手順に従って、エクスペリエンスにウィジェットを追加します。
- ArcGIS Experience Builder のウィジェット パネルに移動します。
- 追加するウィジェットをページまたはレイアウト内の領域にドラッグ アンド ドロップします。
- ウィジェットがエクスペリエンスに追加され、詳細を設定できるようになります。
2. ウィジェット設定の構成
次の手順に従って、ウィジェットのプロパティを設定します。
- 設定したいウィジェットを選択します。
- 設定パネルを使用して、データ ソース、外観、動作などのウィジェットのプロパティを調整します。
- 設定 UI がないウィジェットの場合は、JSON エディターを使用して手動でオプションを構成します。
3. ウィジェットの配置とスタイルの設定
次の手順に従って、エクスペリエンス内でウィジェットを配置し、スタイルを設定します。
- レイアウト内でウィジェットを移動したり、サイズ変更したりして、配置を変更します。
- 背景、枠線、余白などのスタイルを適用して、各ウィジェットの外観をカスタマイズします。
- 整列ツールや均等配置ツールを使用して、ユーザビリティーに考慮してウィジェットを整理します。
ウィジェットの UI 構築
カスタム ウィジェットを開発する際、UI を構築するには下記の方法があります。
Jimu-UI ライブラリー
このライブラリーはウィジェット UI の開発に推奨される選択肢です。Experience Builder のテーマ システムと統合された事前構築済みコンポーネントを提供します。これにより、ウィジェット間でスタイルと動作の一貫性を確保できます。Calcite Design System
jimu-uiで必要な機能が提供されていない場合、Calcite コンポーネントを使用します。Calcite にはウィジェットの UI 構築に利用できる事前構築済みコンポーネントが含まれています。Calcite コンポーネントは@esri/calcite-componentsから利用できます。
データとマップの操作
ウィジェットは、下記の方法でデータやマップと連携できます。
データを扱う場合 (例：フィーチャ レイヤー)
- 設定画面で DataSourceSelector を使用します。
- 実行時に DataSourceComponent を使用します。
- 詳細は ウィジェットでのデータの使用をご覧ください。
マップ ウィジェットを扱う場合
- 設定画面で MapWidgetSelector と JimuLayerViewSelector を使用します。
- 実行時に JimuMapViewComponent を使用します。
カスタム ウィジェット開発
カスタム ウィジェットを作成することで、ArcGIS Experience Builder の機能の拡張が可能です。カスタム ウィジェットは、ArcGIS Experience Builder Developer Edition を使用して構築します。Developer Edition は、新しいウィジェットをビルダー環境に作成・統合することができるツールと API を提供します。