ウィジェット開発のスタート

出典：ArcGIS Experience Builder - Guide - Getting started with widget development

ArcGIS Experience Builder は、React と ArcGIS Maps SDK for JavaScript を使用して構築されています。これにより、特定のワークフローに合わせて、カスタム ウィジェットを作成することができます。独自のウィジェットを作成するには、以下の基本的な理解が必要となります。

  • TypeScript は、JavaScript のスーパーセットです。TypeScript は、ウィジェットの開発に使用される言語です。
  • React は、ユーザーインターフェースを作成するための JavaScript ライブラリです。React は DOM を抽象化したもので、アプリケーションや UI を様々な状態で考え、それらの状態をレンダリングすることで、UI の一貫性を保つことを容易にしています。
  • JSX は JavaScript の拡張構文で、React を通じてウィジェットの UI のあるべき姿を記述することができます。
  • Jimu は、Experience Builder がウィジェットを作成する際に使用する JavaScript ライブラリです。

インストール

Experience Builder は、インストール用の ZIP ファイルとして提供されています。詳細については、インストール ガイドを参照してください。

ウィジェット開発環境のセットアップ

カスタム ウィジェットの開発には、使い慣れた IDE やテキスト エディタを使うことができます。Visual Studio Code は、デフォルトで TypeScript に対応しているため、良い選択肢です。

構築したカスタム ウィジェットは ArcGIS Experience Builder の client フォルダー内のディレクトリに配置されます。Visual Studio Code で client フォルダーをプロジェクトとして開きます。

  1. [ファイル] メニューをクリックします。
  2. [フォルダーを開く] をクリックします。
  3. Experience Builder の初回起動時に展開した Experience Builder フォルダー内の client フォルダーを参照します。

これにより、client フォルダー内のすべてのファイル（カスタム ウィジェットのファイルを含む）が左側のエクスプローラー タブで利用できるようになります。また Visual Studio Code は Experience Builder ライブラリの TypeScript 定義について client フォルダーのコンテンツ全体をスキャンし、カスタム ウィジェットの作成中に TypeScript の検証とオート コンプリートが有効になります。

Visual Studio Code

Visual Studio Code をテキスト エディタとして使用している場合、テキスト エディタに機能を追加するために使用できる、拡張機能のマーケット プレイスが用意されています。ArcGIS Experience Builder のカスタム ウィジェットの開発では、インストールする React 拡張機能に加えて、これらの拡張機能が推奨されます (必須ではありません)。

ウィジェット

ウィジェットは、Experience Builder で設定可能で共有可能な機能群です。基本的に、ウィジェットは jimu フレームワークによってこれらの共通のプロパティが設定された React コンポーネントです。

  • ウィジェットの設定 (id、label、configなど)
  • state や isClassLoaded などを含むウィジェットのランタイム情報
  • ローカル言語の文字列
  • データソースのインスタンスとステータス情報
  • URL パラメータ情報

ウィジェットの配置場所

カスタム ウィジェットは Experience Builder の Web 拡張機能リポジトリに配置されます。Web 拡張機能リポジトリは、client フォルダー内のフォルダーで下のコンテンツを含む manifest.json ファイルが格納されています。

{
  "name": "my-web-extension-repo",
  "type": "exb-web-extension-repo",
  "description": "This is a sample extension repository.",
  "copyright": "",
  "license": ""
}

Experience Builder (Developer Edition) には、client/your-extensions にサンプルの Web 拡張機能リポジトリが付属しています。このリポジトリを使用することも、独自のリポジトリを作成することもできます。Git のようなソース コード リポジトリ システムを使用する場合は、独自のものを使用した方がうまくいく場合があります。独自に作成する場合、Jimu モジュールの型宣言がないなど、コード エディター上でエラーが表示されることがあります。これを修正するには、tsconfig.json ファイル内の include 配列に、Web 拡張機能リポジトリのフォルダーを次のように追加します。

{
  "include": [
    "dist/widgets",
    "your-extensions",
    "types",
    "jimu-core/lib/types",
    /** Web 拡張機能リポジトリのフォルダー名を追加します **/
    "my-web-extension-repo"
  ],
}

ウィジェット ファイル

Web 拡張機能リポジトリのルート フォルダーには、widgets と themes の 2 つのフォルダーがあります。カスタム ウィジェットを作成するには、widgets フォルダー内にカスタム ウィジェットの名前で新しいフォルダーを作成してください。カスタム ウィジェットのすべてのファイルは、この新しいフォルダーに配置されます。

- my-web-extension-repo/
    - manifest.json
    - themes/
    - widgets/
        - my-custom-widget/

ウィジェット フォルダー内には、有効なウィジェットとして、manifest.json とその他の必要なファイルが含まれている必要があります。

  • manifest.json ファイルの詳細については、ウィジェット manifest を参照してください。
  • その他の必要なファイルや一般的なウィジェット開発の詳細については、ウィジェットの実装 を参照してください。
  • 必要最小限のファイルですぐに始めるには、your-extensions/widgets フォルダーにある、simple ウィジェットを参照してください。

基本的な考え方

Experience Builder 開発が初めての方で、基本的な考え方を理解したい方は、以下をチェックしてください。