カスタム ウィジェットの追加

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

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

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

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

  1. ウィジェットをホストしている仮想ディレクトリへの匿名アクセスを有効にします。

    ホスティング位置への匿名アクセスが可能でなければなりません。

  2. HTTPS を有効にします。

    Web サーバーで HTTPS アクセスを有効にして、混在コンテンツが作成されないようにします。 Experience Builder では、HTTPS 接続の下に HTTP を読み込むことで生成されるアクティブな混合コンテンツが許可されません。 また、サーバーでは、HTTPS 接続を確立するために証明機関で発行された有効な SSL 証明書が必要です。

  3. クロスオリジン リソース共有 (CORS) を有効にします。

    Experience Builder はポータル ドメイン下で動作しますが、このドメインは、カスタム ウィジェットをホストしている Web サーバーのドメインとは異なる場合があります。 ポータル ドメインからのアクセスを許可するために、Web サーバーで CORS を有効にする必要があります。

  4. JSON ハンドラーを Web サーバーに追加します。

    各ウィジェットは、ウィジェットのプロパティを記述した JSON マニフェスト ファイルで構成されています。 Web サーバーの中には、デフォルトで JSON ファイルの拡張子を認識しないものもあります。 この場合には、アプリケーション レベル以上のレベルで新規の MIME タイプとしてサーバーに追加する必要があります。 MIME タイプでは、.json をファイル拡張子として指定し、application/json を MIME タイプとして指定する必要があります。

  5. カスタム ウィジェットをコンパイルします。

    カスタム ウィジェットをホストする前に、カスタム ウィジェットをコンパイルする必要があります。 カスタム ウィジェットを arcgis-experience-builder/client/your-extension/widgets ディレクトリにコピーする必要があります。 その後、クライアント ディレクトリの下にある npm run build:prod を実行する必要があります。 これを実行すると、コンパイルされたウィジェットが client/dist-prod/widgets ディレクトリに表示されます。

  6. カスタム ウィジェットを Web サーバーに配置します。

    client/dist-prod/widget/ フォルダーを Web サーバーにコピーすることができます。 配置が終了した後、カスタム ウィジェットのマニフェスト ファイルへの URL パスを取得する必要があります。 マニフェスト ファイルへの URL パスの例は <server.domain.com>/<my widget>/manifest.json です。

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

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

  1. ブラウザー ウィンドウで、ポータルにサイン インします。
  2. コンテンツ ページの [マイ コンテンツ] タブをクリックします。
  3. [アイテムの追加] をクリックして、[アプリケーション] を選択します。
  4. [Experience Builder ウィジェット] を選択し、マニフェスト ファイルの URL を指定します。

    マニフェスト ファイルへの URL パスの例は <server.domain.com>/<my widget>/manifest.json です。

  5. [タイトル] ボックスをクリックします。

    アイテムのタイトルがマニフェスト ファイルから自動入力されます。 必要に応じて、タイトルを手動で編集できます。

  6. [タグ] ボックスにタグを追加します。
  7. [アイテムの追加] をクリックします。

    カスタム ウィジェットを、コンテンツ ページの [マイ コンテンツ] タブで [Experience Builder ウィジェット] タイプとして使用できるようになります。

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

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

注意:

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

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

注意:

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

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

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