ウィジェット (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. ウィジェットの追加
次のステップに従って、エクスペリエンスにウィジェットを追加します。
- ArcGIS Experience Builder のウィジェット パネルに移動します。
- 追加したいウィジェットをページまたはレイアウト セクションにドラッグ＆ドロップします。
- ウィジェットがエクスペリエンスに追加され、詳細な設定が可能になります。
2. ウィジェットの設定の構成
次のステップに従って、ウィジェットのプロパティを設定します。
- 設定したいウィジェットを選択します。
- 設定パネルを使用して、データソース、外観、動作などのウィジェットのプロパティを調整します。
- 設定 UI がないウィジェットの場合は、JSON エディターを使用して手動でオプションを構成します。
3. ウィジェットの配置とスタイルの設定
次のステップに従って、エクスペリエンス内でウィジェットを配置・スタイル設定をします。
- レイアウト内でウィジェットを移動・サイズ変更し、配置を変更します。
- 背景、枠線、余白などのスタイルを適用して、各ウィジェットの外観をカスタマイズします。
- 整列ツールや分布ツールを使用して、ユーザビリティーに配慮してウィジェットを整理します。
ウィジェットのUI構築
カスタム ウィジェットを開発する際、UI を構築するには下記の方法があります。
Jimu-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 を提供します。