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

169
0
3 weeks ago
Labels (1)

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

はじめに

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

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

 

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

RyukiHIRAMATSU_0-1719288371859.png

 

インストール

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 (Developer Edition)

開発リソース集(ArcGIS Experience Builder (Developer Edition)

スターター ウィジェットの作成 (ArcGIS Experience Builder)

Create a starter widget

Get map coordinates

Add layers to a map

ArcGIS Experience Builder (Sample Code)

arcgis-experience-builder-sdk-resources (Esri GitHub)

Labels (1)
Version history
Last update:
3 weeks ago
Updated by:
Contributors