カスタムウィジェットの開発を始めるのに役立つベースウィジェット（ArcGIS Experience Builder）

はじめに

これまで、ArcGIS Experience Builder (Developer Edition) を使用したカスタムウィジェットの作成方法として、「スターターウィジェットの作成」と「マップの座標を取得」、「表示レイヤーの切り替えウィジェット」という記事をご紹介しました。

本記事では、ArcGIS Experience Builder のカスタムウィジェットを開発し始める際に役立つベースとなるウィジェットを作成したのでご紹介します。

ArcGIS Experience Builder (Developer Edition) でカスタムウィジェットを開発する際、マップウィジェットを参照した地図に関連する機能を作成する場合が多いと思います。カスタムウィジェットを作成し始める際、一からソースコードを書くこともできますが、以前に作成したものがあれば、その一部を流用して作成を始めるというケースも考えられます。今回作成したウィジェットは、ウィジェット設定パネルでマップウィジェットを設定し、ウィジェットパネルに設定パネルで設定したマップウィジェットの情報を表示するというシンプルなウィジェットです。すでにコード内でマップウィジェットを参照できるようにしていますので、このウィジェットを流用して開発を始めることで、地図に関連する機能を作成する手間を省略することができます。

インストール

ArcGIS Experience Builder のインストールガイドを参照して、ArcGIS Experience Builder (Developer Edition) のダウンロードやインストール、設定を行います。

ステップ

フォルダーの作成

1. 以下のパスに新規で `base` という名称のフォルダーを作成します。
ウィジェットフォルダーにスペースを含めることはできません。ウィジェット構築の詳細は、ウィジェットの実装を参照してください。
\client\your-extensions\widgets

ｍanifest ファイルの作成

2. 以下のパスにある `manifest.json` と `icon.svg` をコピーし、`base`フォルダーの直下に配置します。
\client\your-extensions\widgets\simple

3. コードエディター等で `base`フォルダーの `manifest.json` を開きます。

4. `manifest.json` の name プロパティを `base`、label プロパティを `ベース` に変更します。
`manifest.json` の name プロパティとウィジェットのフォルダー名は一致させる必要があります。

{
  //*** UPDATE ***//
  // "name": "simple",
  // "label": "Simple",
  “name”: “base”,
  “label”: “ベース”,
  "type": "widget",
  "version": "1.x.0",
  "exbVersion": "1.x.0",

設定パネルの実装

設定パネルを実装すると、エクスペリエンス（アプリ）の作成者がウィジェットをカスタマイズすることができます。設定パネルは、ArcGIS Experience Builder でウィジェットを選択すると、右側のサイドバーに表示されます。パネルを作成するには、React.PureComponent をベースクラスとして使用する React コンポーネントを作成します。

5. `base` フォルダーに、空のオブジェクトを含む config.json ファイルを作成します。
・後で、ウィジェットの設定パラメーターをこのオブジェクトに追加してウィジェットの設定値を保存することができます。

{
}

6. `base` フォルダー内に src フォルダーを作成します。

7. src フォルダー内に、setting という名前のフォルダーを作成します。

8. setting フォルダー内に setting.tsx ファイルを作成します。

9. setting/setting.tsx ファイルを開き、以下の import 文を記述します。

/** @jsx jsx */
import { React, jsx } from "jimu-core";
import { AllWidgetSettingProps } from "jimu-for-builder";

10. コンポーネントを実装するためのコードを追加します。

export default class Setting extends React.PureComponent<AllWidgetSettingProps<any>, any> {
  render() {
    return <div className="widget-setting-demo"> </div>;
  }
}

マップビューデータソースの選択を有効にする

ArcGIS Experience Builder では、一つのページ上に複数のマップウィジェットを配置できます。このため、カスタムウィジェットには、作成者が使用するマップウィジェットを選択できる設定パネルのセクションが必要です。

11. setting/setting.tsx ファイルに jimu ライブラリの MapViewSelector と設定パネルの UI を整えるためのSettingSection と SettingRowをインポートします。

import { MapWidgetSelector } from "jimu-ui/advanced/setting-components";
import { SettingSection, SettingRow } from 'jimu-ui/advanced/setting-components';

12. render 関数の前に onMapWidgetSelected 関数を定義します。

// *** ADD ***

 onMapWidgetSelected = (useMapWidgetIds: string[]) => {

   this.props.onSettingChange({

     id: this.props.id,

     useMapWidgetIds: useMapWidgetIds

   });

 };

 render() {

   return <div className="widget-setting-demo"> </div>;

 }

13. render 関数の return() 文の中に、マップウィジェットの選択機能を持つ MapViewSelectorタグを含む UI を追加します。

render() {
   return <div className="widget-setting-demo">
            <SettingSection className="map-selector-section"
                title={"ソース"}
                role="group"
                aria-label={"ソース"}>
                <SettingRow label={"マップ ウィジェットの選択"} />
                <SettingRow>
                    <MapWidgetSelector
                        useMapWidgetIds={this.props.useMapWidgetIds}
                        onSelect={this.onMapWidgetSelected}
                    />
                </SettingRow>
            </SettingSection>
   </div>
 }

ウィジェットパネルの実装

ウィジェットのメインロジックは、widget.tsx で実装する必要があります。このファイルは、React.PureComponent クラスを拡張します。

14. src フォルダー内に、runtime という名前のフォルダーを作成します。

15. runtime フォルダーに、widget.tsx という名前のファイルを作成します。以下のコードを追加して、React.PureComponent クラスを拡張します。

/** @jsx jsx */
import { React, AllWidgetProps, jsx } from "jimu-core";

export default class Widget extends React.PureComponent<AllWidgetProps<any>, any> {
   render() {
     return (
       <div className="widget-starter jimu-widget">
       </div>
     );
   }
}

16. widget.tsx ファイルに設定パネルで設定したマップウィジェットの情報を取得するためのクラスやコンポーネントをインポートします。

/** @jsx jsx */
import { React, AllWidgetProps, jsx } from "jimu-core";
/** ADD **/
import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis";

17. render 関数の前にデフォルトの state を設定します。

export default class Widget extends React.PureComponent<AllWidgetProps<any>, any> {
    /** ADD **/
    state = {
        jimuMapView: null
    };

    render() {

18. JimuMapView のデータソースが変わるたびに state を更新するファンクションを追加します。

    state = {
        jimuMapView: null
    };


    /** ADD **/
    activeViewChangeHandler = async (jmv: JimuMapView) => {
        if (jmv) {
            this.setState({
                jimuMapView: jmv
            });
        }
    };

19. render 関数で JSX マークアップに JimuMapViewComponent を追加します。

追加したコードの最初の 3 行 ({this.props.hasOwnProperty...) は JSX での条件式の使い方です。これはエクスペリエンスの設定パネルで有効なマップウィジェットを選択した場合に、JimuMapViewComponent を追加するという処理です。

render() {
   return (
     <div className="widget-starter jimu-widget">
       {/* *** ADD *** */}
       {this.props.hasOwnProperty("useMapWidgetIds") &&
         this.props.useMapWidgetIds &&
         this.props.useMapWidgetIds[0] && (
           <JimuMapViewComponent
             useMapWidgetId={this.props.useMapWidgetIds?.[0]}
             onActiveViewChange={this.activeViewChangeHandler}
           />
         )
       }
     </div>
   );
}

20. 手順 20 までで設定自体は完了ですが、正しくマップウィジェットが設定されているかを確認するために、マップウィジェットに設定されている Web マップのタイトルをウィジェット上に表示するようにします。

     <div className="widget-starter jimu-widget">
       {/* *** ADD *** */}
       {this.props.hasOwnProperty("useMapWidgetIds") &&
         this.props.useMapWidgetIds &&
         this.props.useMapWidgetIds[0] && (
           <JimuMapViewComponent
             useMapWidgetId={this.props.useMapWidgetIds?.[0]}
             onActiveViewChange={this.activeViewChangeHandler}
           />
         )
       }
       {/* *** ADD *** */}
       <p>
           設定されている Web マップ
       </p>
       <p>{this.state.jimuMapView?.view.map.portalItem.title} </p>
     </div>

ウィジェットのテスト

コードの変更が完了したら、ArcGIS Experience Builder を実行してエクスペリエンスを表示することで、ウィジェットをテストできます。

21. npm start で client フォルダー、server フォルダーを実行し、スクリプトを起動（起動している場合は再起動）します。

22. Web ブラウザーでArcGIS Experience Builder を表示します。例：https://localhost:3001

23. ArcGIS Experience Builder で [新規作成] をクリックして、新しいエクスペリエンスページを作成します。

24. [空白の全画面]のテンプレートの [作成] をクリックします。

25. ウィジェットリストから[マップ]ウィジェットをビルダー画面にドラッグし、任意の Web マップを設定パネルから設定します。

26. ウィジェットリストから今回作成した [Base] ウィジェットをビルダー画面にドラッグし、設定パネルのドロップダウンリストから [マップ1] を選択します。

27. 追加した [ベース] ウィジェットの「設定されている Web マップ」の下にマップウィジェットに設定した Web マップのタイトルが表示されたら成功です。

以上が、今回作成したベースウィジェットの説明になります。

まとめ

今回は、ArcGIS Experience Builder (Developer Edition) を使用してカスタムウィジェットの開発を始める際に役立つ、カスタムウィジェットのベースとなるウィジェットを紹介しました。今回紹介したウィジェットはESRIジャパンのGitHub に公開しており、こちらからダウンロードすることができます。このウィジェットを使用して効率的にカスタムウィジェットの開発を始めてください。

カスタムウィジェットの開発を始めるのに役立つベースウィジェット（ArcGIS Experience Builder）