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

はじめに

ウィジェットの基本実装の方法を学習する手段の第一歩として、Experience Builder を使用したチュートリアルの Create a starter widget のサンプルの解説を翻訳して紹介します。

ArcGIS Experience Builder を使用すると、さまざまなウィジェットを選択して、インタラクティブにアプリケーションを構築することができます。これらのアプリケーションは、エクスペリエンスと呼ばれます。ユーザーにより多くのオプションを提供したい場合は、独自のカスタムウィジェットを作成して、ArcGIS Experience Builder に追加することができます。作成できるウィジェットの種類は、必要な機能によって異なります。マップと相互に連動するウィジェットや ArcGIS の外部で操作を実行するウィジェットなどが作成できます。ウィジェットを作成してインストールすると、ArcGIS Experience Builder は自動的にウィジェットを検出して、ユーザーが利用できるようにします。

このチュートリアルでは、新しいウィジェットの作成に必要なフォルダとファイルを作成します。これらのファイルは、他のウィジェットチュートリアルのスターターとして使用できます。

インストール

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

ステップ

新しいフォルダの作成

新しいウィジェットを作成するための最初のステップは、ウィジェットファイルを配置するためのフォルダを作成することです。

1. エクスプローラーなどで ArcGIS Experience Builder を解凍したフォルダに移動します。

ArcGIS Experience Builder のフォルダ構成の詳細については、インストールガイドを参照してください。

2. ArcGIS Experience Builder フォルダで、次のパスを展開します。

　/client/your-extensions/widgets

3. widgets フォルダに、starter-widget という名前の新しいフォルダを作成します。フォルダのパスは次のようになります。

ウィジェットフォルダにスペースを含めることはできません。ウィジェットの構築の詳細は、ウィジェットの実装を参照してください。

　/client/your-extensions/widgets/starter-widget

manifest ファイルの作成

ウィジェットのプロパティを定義するには、manifest ファイルが必要です。これらは、ArcGIS Experience Builder のロード時に読み込まれます。

manifest.json の name プロパティがウィジェットのフォルダ名と一致することが重要です。

4. starter-widget フォルダに、manifest.json という名前のファイルを作成します。ウィジェットを定義するために、以下の JSON オブジェクトを追加します。

{
   "name": "starter-widget",
   "type": "widget",
   "version": "1.1.0",
   "exbVersion": "1.1.0",
   "author": "Your Name",
   "description": "A hello world starter widget",
   "copyright": "",
   "license": "",
   "properties": {},
   "supportedLocales": ["en"],
   "defaultSize": {
      "width": 800,
      "height": 500
   }
}

ベースクラスの実装

ウィジェットのメインロジックは widget.tsx に実装されている必要があります。このファイルは BaseWidget クラスを実装する必要があります。

5. starter-widget フォルダ内に src という新しいフォルダを作成します。このフォルダの中に、runtime という名前のフォルダを作成します。

6. runtime フォルダに widget.tsx という名前のファイルを作成します。以下のコードを追加して BaseWidget クラスを実装します。

1行目は　jimu-core モジュールから AllWidgetProps、BaseWidget、jsx をインポートしています。
ウィジェットを実装するには　BaseWidget クラスを拡張する必要があります。body では、render 関数がシンプルな div 要素としてテキストを返します。レンダー関数は、JSX（ユーザーに表示される HTML のような構文）を返す React の特別な概念です。

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

export default class Widget extends BaseWidget<AllWidgetProps<any>, any> {
   render() {
     return (
       <div className="widget-starter jimu-widget">
         This is your starter widget!
       </div>
     );
   }
}

7. ターミナルで、停止 (ctrl + c) して、npm start で /client フォルダで実行されているスクリプトを再起動します。

ウィジェットのテスト

フォルダを作成してファイルを配置したら、ArcGIS Experience Builder を実行して新しいページにウィジェットを追加してテストします。ビルダーは自動的にウィジェットを検出し、使用可能な状態にします。

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

9. ビルダーで [新規作成] をクリックして、新しいエクスペリエンスページを作成します。

10. 空白のスクロールテンプレートの [作成] をクリックします。

11. ウィジェットの挿入パネルが開きます。そこから、新しい starter-widget ウィジェットをエクスペリエンスにドラッグします。

ウィジェットに無効なアイコンが含まれている可能性があります。それは問題ありません、まだ、それを作成していません。
ウィジェットが表示されない場合は、セットアップ手順に従って、/client フォルダで npm start を実行したことを再確認してください。

12. ArcGIS Experience Builder ツールバーで、[保存] をクリックしてから [プレビュー] をクリックすると、エクスペリエンスがカスタムウィジェットと共に新しいブラウザタブで開きます。

おめでとうございます、これで完了です。

ウィジェットを完成したウィジェットと比較してみてください。ウィジェットに機能を追加するには、次のチュートリアルをチェックしてください。

チャレンジ

エクスペリエンスページにマップウィジェットを追加します。

13. ウィジェットの挿入ボタンをクリックして、マップウィジェットをエクスペリエンスにドラッグします。

14. プレビュー領域でマップウィジェットをクリックしてから、ウィジェットの設定パネルでマップの選択をクリックします。

15. データの選択パネルで、新しいデータの追加をクリックします。

16. データの追加モーダルで、ArcGIS Online タブを選択し、Web マップ「eb1be6543e304b4d81ed55439c412c2c」を検索します。検索結果をクリックして選択し、終了をクリックします。(この Web マップには、意図的に操作レイヤーがないことに注意してください)。

17. 選択データパネルで新しく追加された LA Parks and Trails Map をクリックして、Web マップを選択します。

他のウィジェットを探す

ここに移動して、より多くのウィジェットを探索してください。

まとめ

今回は、Experience Builder を使用した Create a starter widget のサンプルを翻訳して紹介しました。次のステップとして、Get map coordinates や Add layers to a map のチュートリアルも併せて参照してください。また、その他にもカスタムウィジェットには、多くのサンプルコードが ArcGIS Experience Builder の Sample Code や GitHub も公開していますので、こちらも併せて参照していただければと思います。

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