ArcGIS Developers 開発リソース集 > 技術 Tips 集 > ArcGIS Experience Builder (Developer Edition) > チュートリアル > スターターウィジェットの作成

スターターウィジェットの作成

出典：ArcGIS Experience Builder - Tutorials - Create Starter Widget

[概要]

ここでは、ウィジェットの基本実装の構築方法について学習します。

ArcGIS Experience Builder では、さまざまなウィジェットから選択し、対話形式でアプリケーションを構築できます。これらのアプリケーションはエクスペリエンスと呼ばれます。ユーザーにより多くのオプションを提供する場合は、独自のカスタムウィジェットを作成し、ArcGIS Experience Builder に追加できます。作成するウィジェットのタイプは、求める機能によって異なります。マップと対話するウィジェットを作成することも、ArcGIS の外部で処理を実行するウィジェットを作成することもできます。ウィジェットを作成してインストールすると、ArcGIS Experience Builder によって自動的にウィジェットが検出され、ユーザーが使用できるようになります。

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

[前提条件]

ArcGIS Experience Builder をダウンロード、インストール、および構成してください。

[ステップ]

[新しいフォルダーを作成する]

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

ファイルブラウザーで、ArcGIS Experience Builder を解凍したフォルダーに移動します。

ArcGIS Experience Builder の開発者向け追加機能のインストール方法の詳細については、インストールガイドを参照してください。
ArcGISExperienceBuilder フォルダーで、次のパスを展開します
```
  /client/your-extensions/widgets
```
widgets フォルダーに、starter-widget という新しいフォルダーを作成します。パスは以下のようになります
```
  /client/your-extensions/widgets/starter-widget
```
ウィジェットフォルダーにスペースを含めることはできません。ウィジェットの構築については、こちらのドキュメントを参照してください。

[マニフェストファイルの作成]

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

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

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

[コンポーネントの実装]

ウィジェットのメインロジックは、widget.tsx の React コンポーネントに実装します。このファイルは単一の関数 React コンポーネントをエクスポートします。

ArcGIS Experience Builder では、関数スタイルまたはクラススタイルのコンポーネントを使用でき、このチュートリアルでは関数スタイルのコンポーネントを使用します。この 2 つのタイプの詳細については、React ドキュメントを参照してください。

starter-widget フォルダーに、src という新しいフォルダーを作成します。このフォルダーの中に、runtime という別のフォルダーを作成します。
runtime フォルダーに、widget.tsx という名前のファイルを作成します。以下のコードを追加して、React コンポーネントを作成します。

最初の行は、jimu-core モジュールから Reactをインポートしています。

ウィジェットを実装するには、React コンポーネントとなる関数を作成する必要がある。この関数は、ユーザーに表示される JSX（この例では、div 要素といくつかのテキスト）、HTML のような構文を返します。

 import { React, type AllWidgetProps } from 'jimu-core'

 const Widget = (props: AllWidgetProps<any>) => {
   return <div className="widget-starter jimu-widget">This is your starter widget!</div>
 }
 export default Widget

ターミナルで、client フォルダーで実行中の npm start スクリプトを停止 (ctrl + c) し、再スタートします。

ウィジェットをテストする

フォルダーとメインファイルを配置したら、ArcGIS Experience Builder を実行して新しいページにウィジェットを追加して、ウィジェットをテストできます。ビルダーは自動的にウィジェットを検出し、利用可能にします。

Web ブラウザーで ArcGIS Experience Builder にアクセスします。例： https://localhost:3001
Experience Builder タブが開かなかった場合は、https://localhost:3001 にアクセスしてください。「無効な SSL 証明書」の問題が発生した場合は「続行」をクリックします。
ArcGIS Experience Builder で [新規作成] をクリックして、新しいエクスペリエンスページを作成します。
空白のスクロール テンプレートの [作成] ボタンをクリックします。
ウィジェットの挿入パネルが開きます。そこから、新しいスターターウィジェットをエクスペリエンスにドラッグしてください。

ウィジェットは、ウィジェット一覧の下部にある「カスタム」セクションに配置されます。作成したウィジェットには無効を示すアイコンが表示されているかもしれませんが、まだアイコンを作成していないため、それは問題ありません。ウィジェットが表示されない場合、元のセットアップ手順に従って、client フォルダーで npm start を実行したか再確認してください。
マップ ウィジェットをエクスペリエンスにドラッグします。
ツールバーで、[保存] をクリックし、次に [プレビュー] をクリックすると、カスタムウィジェットを含むエクスペリエンスが新しいブラウザタブで開きます。

完成版のウィジェットと比較する場合はこちらをご参照ください。ウィジェットに機能を追加するには、次のチュートリアルに進んでください。

スターター ウィジェットの作成