出典:ArcGIS Experience Builder - Guide - Data sources
データ ソースは、ウィジェットがどのようにデータにアクセスするかを定義します。例えば、データがリモートサーバーからのものである場合、ウィジェットはクライアント側にクエリするために、データ ソース クラスを使用します。ウィジェットでデータが生成された場合、それ自身をデータ ソース クラスに入れることで、別のウィジェットで使用することができます。
高レベルでは、データ ソースはスキーマといくつかのレコードを持ち、子/親データ ソースを持つ場合があります。さらに、すべてのデータ ソースは、それを識別するのに役立つ型、ID、ステータスがあります。
DataSource
インターフェースは jimu-core
パッケージで定義されており、これは以下のメソッドとプロパティのいくつかを定義しています。
id
: データ ソースID。type
: どのタイプのデータ ソースを使っているかチェックするため、ウィジェットで使っているプロパティ。fetchSchema
: すべてのデータ ソースは、スキーマを返すためにこのメソッドを実装しなければなりません。これは、リモート データ サービスで定義されたスキーマです。例えば、ユーザーがExperience Builder でデータ ソースを追加した場合、データ ソースのスキーマはアプリ構成に保存されません。代わりに、最新のデータ ソース スキーマを取得するために fetchSchema
メソッドが呼び出されます。getSchema
: ウィジェットがデータ ソースのスキーマとフィールドにアクセスするために使用するメソッドです。getRecords
: ウィジェットがデータ ソースのデータレコードにアクセスするために使用するメソッドです。getStatus
: ウィジェットはこのメソッドを使用してデータ ソースのステータスを取得します。これらのステータスには、NotReady
、Unloaded
、Loading
、Loaded
および LoadError
があります。NotReady
はウィジェットの出力データ ソース専用です。出力データ ソースのインスタンスが作成されても、そのインスタンスは使用する準備ができていません。出力データ ソースを生成するウィジェットはデータ ソースを使用可能な状態にするアクション (DataSourceChanged) を送る必要があります。データ ソースのステータスが準備できていない場合、クエリは空の結果を返します。その他のクエリ可能なデータ ソースでは、既定のステータスは Unloaded
です。データが要求されると Loading
に変更され、最後に Loaded
または LoadError
に変更されます。1 つのデータ ソースには、サブ データ ソースを含めることができます。その結果、使いやすくするために複数のデータ ソースを含めることができます。このようなデータ ソースを DataSourceSet
と呼びます。WebMapDataSource
は DataSourceSet
です。DataSourceSet
も、isDataSourceSet プロパティをtrue に設定していれば、データ ソースの一種です。データ ソースは DataSourceManager
で管理し、データ ソースの作成や取得を行います。
複数のウィジェットが 1 つのデータ ソースに接続する場合、ウィジェットはデータ ソースのローカル ビューを表示したい場合があります。このシナリオでは、データ ビューを使用します。データ ビューとデータ ソースの関係は、リレーショナル データベースのビューとテーブルの関係に非常に似ています。Experience Builder のデータ ソースは、クライアント側の実際のリモート データ ソースのビューですが、データ ソースはテーブル、データ ビューはビューと考えることができます。アプリ作成者は、データ ソースからデータ ビューを作成し、ビルダーでデータ ビューにウィジェットを接続することができます。API レベルでは、データ ビューは DataSource
クラスを使用して管理されるため、データ ビューは、属性の違いだけでデータ ソースと同じインターフェイスと振る舞いを持ちます。
データ ソースの使用を簡単にするために、DataSourceComponent
コンポーネントが定義されています。これは useDataSource
プロパティを受け取り、コールバックを通じてデータ ソース オブジェクトとそのステータス情報を返します。また、子として関数を受け入れ、データ ソース オブジェクトとデータ ソース内のデータをレンダリングするための情報を取得するために使用することができます。DataSourceComponent
コンポーネントは、オプションの query
プロパティを受け入れることもでき、クエリが変更されたときにデータをリロードします。
フィーチャ サービスのような最も一般的に使用されるデータ形式をサポートするために、API には QueriableDataSource
インターフェイスと抽象クラス AbstractQueriableDataSource
があります。このインターフェイスには、url
、load
、query
などのプロパティがあります。ロードとクエリの違いは、ロードはレコードのプロパティとデータ ソースのステータスを更新し、クエリはレコードのみをクエリして返すことです。
具体的には、Experience Builder で FeatureLayerDataSource
データ ソースを定義して、フィーチャ レイヤーにアクセスします。データ ソースがスタンドアロンのフィーチャ レイヤーから作成された場合、オブジェクトには layer
プロパティはありません。Webmap/Webscene に含まれるフィーチャ レイヤーから作成された場合、オブジェクトには layer
プロパティがあり、これは ArcGIS Maps SDK for JavaScript の FeatureLayer オブジェクトです。FeatureLayerDataSource
の実際のデータは、リモート データベースからのものと、クライアント側のフィーチャのコレクションからのものがあり、どちらもクエリをサポートしています。クライアント側のデータについては、データ ソースがスタンドアロン フィーチャ レイヤーから作成された場合でも、クエリをサポートするためにレイヤー オブジェクトが作成されます。
一般的にデータ ソースは2つの場所に保存され、データ ソースオブジェクトは DataSourceManager
に保存・管理され、データ ソース情報は redux アプリ ストアに保存されます。ataSourceComponent
を使う場合、コンポーネントは DataSourceManager
を呼び出してオンデマンドでデータ ソースを作成し、コールバック プロップを使ってデータ ソース オブジェクトとdataSourceInfo
を返します。dataSourceInfo
では、データ ソースの instanceStatus
, status
, selectedIds
などを返すことができます。
ArcGIS server サービスの多くは、MapServiceDataSource
、FeatureServiceDataSource
など、アクセスしやすいようにデータ ソースにマッピングされています。 ArcGIS Maps SDK for JavaScript の WebMap
と WebScene
は、jimu-arcgis
パッケージ内で WebMapDataSource
と WebSceneDataSource
としてラップされています。
データ ソースは、子データ ソースを持つことができます。そのため、使いやすいように複数のデータ ソースを含めることがあります。このようなデータ ソースを DataSourceSet
と呼びます。WebMapDataSource
は DataSourceSet
です。isDataSourceSet
プロパティが true に設定されていれば、DataSourceSet
もデータ ソースの一種です。getChildDataSources
を使って親データ ソースから子データ ソースを取得したり、parentDataSource
を使って子データ ソースから親データ ソースを取得することができます。
複数のウィジェットが 1 つのデータ ソースに接続している場合、ウィジェットはデータ ソースのローカル ビューを見たいと思うかもしれません。このような場合には、データ ビューを使用します。データ ビューとデータ ソースの関係は、リレーショナル データベースのビューとテーブルの関係によく似ています。Experience Builder のデータ ソースは、クライアント側の実際のリモート データ ソースのビューですが、データ ソースはテーブル、データ ビューはビューと考えることができます。アプリ作成者は、データ ソースからデータ ビューを作成し、ビルダー内のデータビューにウィジェットを接続することができます。APIレベルでは、データ ビューは DataSource
クラスを使用して管理されているため、データ ビューは、いくつかのプロパティの違いがあるだけで、データ ソースと同じインターフェイスと動作を持っています。データ ビューのベースとなるデータ ソースはメインデータ ソースと呼ばれ、getMainDataSource
を使ってデータビューからデータ ソースを取得したり、getDataViews
を使ってメインデータ ソースのすべてのビューを取得することができます。
選択状態は、メイン データ ソースとそのすべてのデータ ビューの間で共有されます。選択されたレコードはデータ ソースの選択ビューに保存され、選択されたレコード ID は redux app store のデータ ソース ID の下に保存されます。選択ビューは、メイン データ ソースの特別なデータビューで、${mainDataSourceId}-sclection
で識別されます。
複数のウィジェットが異なるデータを取得するために異なるデータビューを使用することができますが、異なるウィジェットが同じデータ ソースまたは同じデータビューに接続する必要があっても、ウィジェット内のドロップダウンリストなど、ウィジェット内の異なるデータを取得する必要があるシナリオがあります。この場合、ウィジェットはローカルデータ ソースまたはデータビューを作成することができ、ローカルデータ ソースまたはデータビューに適用されたフィルタは、関連するデータ ソースまたはデータビューに影響を与えません。DataSourceComponent
を使用して localId
を渡すか、DataSourceManager().getinstance().createLocalDataSource
を使用してローカルデータ ソースまたはデータビューを使用することができます。
ほとんどの場合、データはリモート データベースにあるので、データ ソース インスタンスはリモートからデータを取得してデータ ソース インスタンスに保存するだけです。しかし、一部のデータ ソースでは、ウィジェットの出力データ ソースや選択ビューのデータ ソースのように、データがクライアント側で生成される場合があります。これらのシナリオでは、データ ソースのデータは、データ ソース インスタンスの DsourceRecords
に格納されます。getSourceRecords
と setSourceRecords
を使用して、それを取得および更新することができます。
ウィジェットはデータ ソースを使用することができ、またデータ ソースを生成することもできます。生成されたデータ ソースをウィジェット出力データ ソースと呼びます。ウィジェットは、他のウィジェットがその出力データ ソースを使用できるように、設定ページで this.props.onSettingChange
を呼び出して、出力データ ソースをアプリの設定に保存する必要があります。出力データ ソースは、アプリの設定の dataSources
に保存されます。他のウィジェットは、出力データ ソースを使用する場合とユーザーが追加したデータ ソースを使用する場合に違いを見てはいけません。
内部的には、ウィジェットが出力データ ソースを生成し、ウィジェットがレンダリングされるときに、出力データ ソースと出力データ ビューが作成されます。出力データ ビューは ${outputDataSourceId}-output
で識別されます。出力データソースを使用するウィジェットは出力ビューを使用しています。出力データソースが作成されると、そのステータスは NotReady
になります。出力データ ソースを生成するウィジェットは、データが準備できたらデータ ソースを更新し、データ ソースのステータスを Unloaded
に変更して、他のウィジェットが使用できるようにする必要があります。出力データ ソースのデータを更新する方法は、出力データ ソースがどのように生成されたかによります。ウィジェットは、リモート サービスに接続するサーバー サイドの出力データ ソースを生成することができます。この場合、outputDs.updateQueryParams(queryParams, widgetId)
、outputDs.load(queryParams, { widgetId })
または <DataSourceComponent useDataSource={Immutable({ dataSourceId: outputDsId, mainDataSourceId: outputDsId })} query={queryParams}>
を使用してデータ ソースを更新できます。ウィジェットは、クライアント サイドにデータを保存するクライアント サイドの出力データ ソースを生成することができます。この場合、生成されたデータの種類に応じて、outputDs.setSourceFeatures(features, options)
または outputDs.setSourceRecords(records)
を使用してデータを更新できます。ウィジェットが生成したデータにジオメトリがある場合、setSourceFeatures
を使用することをお勧めします。この方法では、フィーチャのレンダラーを指定できるためです。ウィジェットが生成したデータにジオメトリがない場合、どちらの方法でも問題ありません。
出力データソース JSON の originDataSources
は、元のデータ ソースと出力データ ソースの関係を維持するために使用されます。例えば、ウィジェットの出力データ ソースにスキーマが定義されていない場合、元のデータ ソースのスキーマが使用されます。ウィジェットは、このプロパティと id
、type
などの一般的なプロパティを更新する必要があります。クエリ ウィジェットとチャート ウィジェットの両方が出力データ ソースを生成します。出力データ ソース JSON に必要なプロパティを確認するために、これらのウィジェットの出力データ ソース JSON を参考にすることができます。
ウィジェットがデータを読み込む必要がある場合、推奨される方法は <DataSourceComponent>
コンポーネントまたは dataSource.load()
を使用することです。なぜなら、データ ソース フレームワークはデータ キャッシュとページネーションの問題を管理するのに役立つからです。データを読み込むのではなく、フィルタリングしたいだけの場合は、dataSource.updateQueryParams()
を使用できます。
フィーチャ レイヤーには多くのフィールドが含まれている場合がありますが、ほとんどの場合、ウィジェットはそれらのフィールドのうちのいくつかのデータのみを必要とします。多くの場合、ウィジェットは多くのデータ レコードをクエリして表示する必要があります。この種のウィジェットに推奨される方法は、設定で構成されたフィールドを onSettingChange
メソッドを介して useDataSources
に保存し、その後 <DataSourceComponent>
を使用してデータをクエリおよびレンダリングすることです。この方法を取ると、保存されたフィールドのみがクエリされます。複数のウィジェットが同じデータ ソースを使用する場合、すべての保存されたフィールドが一緒にクエリされます。しかし、一部のウィジェットは1つのレコードと多くのフィールドを表示する必要がある場合があります。この場合、推奨される方法は、record ID を使用して dataSource.query()
を使用してレコードをクエリし、複数のウィジェットが同じデータ ソースに接続する際に過剰なフィールドをクエリしないようにすることです。dataSource.query(queryParam)
を使用してデータをクエリする場合、queryParam
オブジェクトの outFields
プロパティを設定してクエリしたいフィールドを指定できます。
URL から作成されたデータ ソースがデータをクエリする必要がある場合、データ ソースはクエリをリモート サーバーに送信します。しかし、データ ソースがマップ レイヤーから作成され、マップ ウィジェットがクライアント サイド クエリを有効にしている場合、データソースはバックエンド サービスにクエリを送信する代わりに、MapView
からデータをクエリしようとします。MapView
または対応する LayerView
がクライアント サイド クエリの準備ができていない場合、データ ソースは依然としてクエリをリモート サーバーに送信します。MapView
または LayerView
が準備できていない理由はいくつかあります。例えば、クエリ内のジオメトリが現在のマップ範囲にない場合や、LayerView
にすべてのフィーチャが含まれていない場合です。クライアント サイド クエリを実行する前に、LayerView
はクエリ パラメーター内の outFields
を LayerView
のフィールドに追加し、その後クエリを実行します。LayerView
にフィールドを追加しすぎるとパフォーマンスの問題が発生する可能性があるため、notAddFieldsToClient
を使用して LayerView
にフィールドを追加しないようにすることができます。
データアクションの参照
RepeatedDataSourceProvider
が提供するデータ ソースをリピートデータ ソースと呼びます。データ ソースを提供するウィジェットのすべての子ウィジェットは、リピート データ ソースを受け取ります。これは React’s Context と似ています。ウィジェットは this.props.repetedDataSource
でリピート データ ソースにアクセスできます。リピート データ ソースは、データ ソースの id
、record
、recordIndx
を取得します。
どのウィジェットでも、RepeatedDataSourceProvider
を使用してリピート データ ソースを提供することができます。Experience Builder の List
ウィジェットは、リピート データ ソースを提供する良い例です。リピート データ ソースを使用するには、ウィジェットのマニフェストファイルに supportRepeat
プロパティを追加します。
データ ソースは、ウィジェットがデータにアクセスする方法を定義します。公開されたエクスペリエンスのすべてのデータ ソースは、アプリの config.json の dataSources
プロパティに保存されます。config.json は server/public/apps/
フォルダにあります。以下のスニペットでは、この dataSources
プロパティに WEB_MAP
タイプのデータ ソースが 1 つあります。
"dataSources": {
"dataSource_1": {
"type": "WEB_MAP",
"itemId": "cb5329a59a354904a035de57f85112d3",
"id": "dataSource_1",
"label": "US Breweries",
"portalUrl": "https://www.arcgis.com"
}
},
ウィジェットでのデータ ソースの使用は、app config で useDataSources
というプロパティで宣言されます。
"useDataSources": [
{
"dataSourceId": "dataSource_1"
}
],
ウィジェットでは、データ ソースを選択できる設定 UI を提供することをお勧めします。これを実現するには、DataSourceSelector
コンポーネントを使用して、設定 UI でデータ ソースを選択します。詳細については、設定 UI の作成をご確認ください。実行時には、DataSourceComponent
を使用して、データ ソースオブジェクトとデータ ソース情報を取得します。情報には以下のものが含まれます。
選択されたデータ ソースの id/index は、datasource.selectRecord
または datasource.selectRecordById
を使って、クエリ パラメータとして URL に入れることができます。
jimu-arcgis
パッケージでは、データ ソースとして WebMap/WebScene をラッピングしています。WebMap にアクセスするには WebMapDataSource
を、WebScene には WebSceneDataSource
を使用します。これらのデータ ソースの使用方法については、MapView サンプルをご確認ください。WebMap/WebScene オブジェクトに加えて、これらのオブジェクトに含まれるすべてのレイヤーもデータ ソースとしてラップされているため、getChildDataSources
を呼び出してすべてのレイヤーのデータ ソースを取得することができます。サポートされているレイヤーとサービスは、SupportedLayerServiceTypes
と SupportedServiceTypes
で定義されています。
ワークフローの中には、FeatureLayer を直接操作するような軽量のエクスペリエンスを作成する必要があるものもあります。このような場合、FeatureLayerDataSource
クラスを使用します。独立したフィーチャーマップを使用するウィジェットは、layer
プロパティを持たない FeatureLayerDataSource
オブジェクトを取得しますが、Web マップや Web シーンからフィーチャ マップを使用すると、layer
プロパティを持つ FeatureLayerDataSource
オブジェクトが返されます。Layer
オブジェクトは、ArcGIS Maps SDK for JavaScript のものです。
const getLayerObject = (ds: FeatureLayerDataSource) => {
return ds.layer; // this can be null
}
ウィジェットが同じデータを共有することは、一般的なワークフローです。例えば、Map と List の2つのウィジェットを使った体験談です。リスト ウィジェットでフィーチャが選択されると、マップでも対応するフィーチャが選択されます。これを実現する最も簡単な方法は、両方のウィジェットに同じデータ ソースを使用することです。例えば、リスト ウィジェットでアイテムが選択されると、ウィジェットは datasource.selectRecord() を呼び出し、アプリ ストアのデータ ソースのステータスを更新します。これにより、マップ ウィジェットは現在選択されているアイテムを適宜レンダリングすることができます。また、現在選択されているアイテムが URL に配置されるため、現在のアプリの状態を他の人と共有することが可能になります。