カスタムウィジェットの追加—ArcGIS Experience Builder

ArcGIS Enterprise 11.0 から、Experience Builder のカスタムウィジェットをポータルに追加できるようになりました。つまり、アプリを作成する際にビルダーの環境でカスタムウィジェットを選択できます。カスタムウィジェットを使用する前に、カスタムウィジェットを Web サーバー上でホストし、ポータルに登録しておく必要があります。セキュリティ上の理由から、ポータル管理者だけがカスタムウィジェットを登録できます。パブリックアプリで、パブリックに共有しているカスタムウィジェットを使用することで、匿名ユーザーがアクセスできるようになります。

注意:

ArcGIS Enterprise 11.1 にアップグレードした後、カスタムウィジェットのローカライズ言語が機能しない場合は、ローカライズ言語ファイルの最初の行が define({ であるかどうかを確認します。そうなっている場合は、そのファイルを次の方法で更新する必要があります。

以前のコード

define({

// strings

})

新しいコード

System.register([], function (_export) {return {execute: function () {_export({

// strings

})}}});

カスタムウィジェットを Web サーバー上でホスト

カスタムウィジェットを Web サーバー上でホストする操作は、他の Web アプリをホストする操作と変わりません。Web サーバーをインストールして構成する必要があります。一般的な Web サーバーとして、IIS や Apache HTTP Server などがあります。

カスタムウィジェットを Web サーバー上でホストするには、次の手順を実行してください。

ウィジェットをホストしている仮想ディレクトリへの匿名アクセスを有効にします。
ホスティング位置への匿名アクセスが可能でなければなりません。
HTTPS を有効にします。
Web サーバーで HTTPS アクセスを有効にして、混在コンテンツが作成されないようにします。 Experience Builder では、HTTPS 接続の下に HTTP を読み込むことで生成されるアクティブな混合コンテンツが許可されません。また、サーバーでは、HTTPS 接続を確立するために証明機関で発行された有効な SSL 証明書が必要です。
クロスオリジンリソース共有 (CORS) を有効にします。
Experience Builder はポータルドメイン下で動作しますが、このドメインは、カスタムウィジェットをホストしている Web サーバーのドメインとは異なる場合があります。ポータルドメインからのアクセスを許可するために、Web サーバーで CORS を有効にする必要があります。
JSON ハンドラーを Web サーバーに追加します。
各ウィジェットは、ウィジェットのプロパティを記述した JSON マニフェストファイルで構成されています。 Web サーバーの中には、デフォルトで JSON ファイルの拡張子を認識しないものもあります。この場合には、アプリケーションレベル以上のレベルで新規の MIME タイプとしてサーバーに追加する必要があります。 MIME タイプでは、.json をファイル拡張子として指定し、application/json を MIME タイプとして指定する必要があります。
カスタムウィジェットをコンパイルします。
カスタムウィジェットをホストする前に、カスタムウィジェットをコンパイルする必要があります。カスタムウィジェットを arcgis-experience-builder/client/your-extension/widgets ディレクトリにコピーする必要があります。その後、クライアントディレクトリの下にある npm run build:prod を実行する必要があります。これを実行すると、コンパイルされたウィジェットが client/dist-prod/widgets ディレクトリに表示されます。
カスタムウィジェットを Web サーバーに配置します。
client/dist-prod/widget/ フォルダーを Web サーバーにコピーすることができます。配置が終了した後、カスタムウィジェットのマニフェストファイルへの URL パスを取得する必要があります。マニフェストファイルへの URL パスの例は <server.domain.com>/<my widget>/manifest.json です。
注意:
カスタムウィジェットが import() 関数を使用してモジュールを動的に読み込む場合、動的に読み込まれたモジュールはコンパイルされ、widgets/chunks フォルダーに配置されます。ウィジェットを配置する際は、chunks フォルダーが widget フォルダー内にあることを確認する必要があります。 GitHub 上の chunks フォルダーを含むカスタムウィジェットの例を表示できます。

カスタムウィジェットの登録

各カスタムウィジェットをポータルに登録する必要があります。カスタムウィジェットを登録するには、ポータル管理者権限が必要です。

ブラウザーウィンドウで、ポータルにサインインします。
コンテンツページの [マイコンテンツ] タブをクリックします。
[アイテムの追加] をクリックして、[アプリケーション] を選択します。
[Experience Builder ウィジェット] を選択し、マニフェストファイルの URL を指定します。
マニフェストファイルへの URL パスの例は <server.domain.com>/<my widget>/manifest.json です。
[タイトル] ボックスをクリックします。
アイテムのタイトルがマニフェストファイルから自動入力されます。必要に応じて、タイトルを手動で編集できます。
[タグ] ボックスにタグを追加します。
[アイテムの追加] をクリックします。
カスタムウィジェットを、コンテンツページの [マイコンテンツ] タブで [Experience Builder ウィジェット] タイプとして使用できるようになります。

カスタムウィジェットの共有

ポータル管理者は、アクセスする必要のある組織内のグループでカスタムウィジェットを共有するか、必要に応じて組織全体またはパブリックにカスタムウィジェットを共有することができます。

注意:

アプリには、そのアプリにアクセスする権限のあるユーザーと同じ組織に登録されているカスタムウィジェットだけが読み込まれます。

[マイコンテンツ] で、カスタムウィジェットを選択して共有します。 Experience Builder を開くと、カスタムウィジェットが [ウィジェットの挿入] タブの [カスタム] グループに表示されます。

注意:

カスタムウィジェットを読み込む際に 404 エラーが発生した場合、ウィジェットがそのパッケージ名を使用するモジュールを必要としていないことを確認します。代わりに、相対パスを使用してモジュールを読み込みます。

カスタムウィジェットの更新

ポータルでカスタムウィジェットを更新することはできません。ただし、Web サーバーでホストされているカスタムウィジェットの HTML 構造と JavaScript コードを更新することができます。

このトピックへのフィードバック

注意:

カスタム ウィジェットを Web サーバー上でホスト

注意:

カスタム ウィジェットの登録

カスタム ウィジェットの共有

注意:

注意:

カスタム ウィジェットの更新

このトピックの内容

カスタムウィジェットを Web サーバー上でホスト

カスタムウィジェットの登録

カスタムウィジェットの共有

カスタムウィジェットの更新