ArcGIS Experience Builder は、モダンな Web アプリ構築のための新しいビルダーで、コードを記述することなく Web アプリケーションを作成することができます。豊富なウィジェット セットから必要なツールを選択したり、独自のテンプレートをデザインしたり、2D コンテンツや 3D コンテンツを操作したりすることができます。Developer Edition (開発者向けエディション)は、これらの機能に加え、ウィジェットやテーマを独自に開発するなどのアプリをカスタマイズするためのフレームワークを提供します。また、作成したアプリケーションをダウンロードして、Web サーバーなどの独自のサーバーにホストすることが可能です。
ArcGIS Experience Builder (Developer Edition) で使用されている技術は、ArcGIS Maps SDK for JavaScript 4.x に加えて、React + Redux といったフレームワークや Bootstrap 4 などのコンポーネントライブラリ等を使用しています。開発に必要な情報は ArcGIS Experience Builder (Developer Edition) のコア コンセプト (Core concepts) を参照してください。
ArcGIS Experience Builder (Developer Edition) は、ArcGIS Online および ArcGIS Enterprise 10.6 以降をサポートしています。
Experience Builder (Developer Edition) は server と client の 2 つのサービスを使用しています。
両方のサービスを実行しておくことで、Experience Builder での更新を自動的に反映することができます。
ここでは、Experience Builder (Developer Edition) の server と client のインストール手順について説明します。また、インターネットに接続していない環境で Experience Builder をインストールする必要がある場合は、offlineでのインストール手順を参照してください。
はじめに Client ID を作成する必要があります。Client ID は、このあとの server サービスを起動して立ち上がるアプリケーションで指定します。 Client ID の作成は、ArcGIS Developers 、もしくは ArcGIS Online/ArcGIS Enterprise を使用して作成します。ご使用の環境に応じて作成を行ってください。
ArcGIS Developers を使用している場合は、以下の手順を行います。
インストール手順については Esri が公開しているインストール動画 (英語)でも確認することができます。
OAuth 2.0
タブをクリックします。+ New Application
をクリックし、アプリケーションの詳細を入力して、新しいアプリケーションを登録します。Redirect URLs
のセクションまでスクロール ダウンします。+ Add URI
をクリックして、https://localhost:3001/
を追加します。
ArcGIS Online または ArcGIS Enterprise を使用している場合は、以下の手順を行います。
※ インストール手順については Esri が公開しているインストール動画 (英語)でも確認することができます。
マイ コンテンツ
タブに移動して、新しいアイテム
をクリックし、アプリケーション
を選択します。アプリケーション タイプ
で 他のアプリケーション
を選択します。保存
をクリックします。
タイトル
- 例えば、Experience Builder credentials
などの任意のタイトルをを入力します。フォルダー
- アイテムを保存する任意のフォルダーを選択します。タグ
- Experience Builder
のような内容を入力します。サマリー
- アイテムのサマリーを入力します。設定
タブをクリックします。アプリケーションの登録の項目までスクロールして、更新
をクリックします。登録情報
ダイアログ ボックスで、次のように、リダイレクト URI
に https://localhost:3001/
と入力し、追加
をクリックして、更新
をクリックします。アプリケーション ID は、このあとの手順で使用するため、コピーなどをして控えておきます。
Client ID の作成が完了したら以下の手順で server サービスのインストールを行います。
Experience Builder は、Node.js を使用します。長期サポート (LTS) バージョン v12 以上がサポートされています。お使いの OS に対応した最新の Node.js LTS バージョンをダウンロードしてインストールを行ってください。
npm ci
と入力し、Enter キーを押して、必要なモジュールをインストールします。
npm start
と入力して server を起動します。カスタムポートを使用するには、次のようにオプションとしてポートを指定します。: npm start -- --port 81 --https_port 443
.
サブディレクトリ(例:https://localhost:3001/subfolder)でサーバーを実行するには、次のように path オプションを指定します: npm start -- --path /subfolder
.
https://localhost:3001/
を指定して Experience Builder をブラウザで開きます。Experience Builder は、Node.js の自己署名証明書を使用して HTTPS をサポートしています。この証明書を信頼して Experience Builder を実行することもできますし、独自の証明書を使用することもできます。独自の証明書を使用するには、server/cert ディレクトリのこれら 2 つのファイル server.key と server.cert を置き換えます。また、次のように証明書ファイル (server.cert および server.key) が存在するフォルダへのカスタムパスを指定することもできます。:npm start – –cert_folder <フォルダパス>
Safari で、PKI、Kerberos、IWA、または LDAP 認証タイプを使用して Experience Builder Developer Edition にサインインするには、Safari の開発メニューにある「Cross-Origin Restrictions を無効にする」を選択する必要があります。
Experience Builder の開発では、ローカルの Experience Builder で使用しているカスタム ウィジェットやテーマをバンドルしてロードするため webpack を起動する必要があります。webpack を起動するために client サービスをインストールする必要があります。
npm ci
と入力し、Enter キーを押して、必要なモジュールをインストールします。
npm start
と入力して client を起動します。
https://localhost:3001
で表示した Experience Builder 上で使用することが可能となります。/client/your-extensions ディレクトリに新しいファイルやフォルダを作成した場合は、client サービスの再起動が必要になります。
同じマシンで複数のバージョンの Developer edition を持つことができます。お使いのマシンがシステム要件を満たしていることを確認してください。
インターネットに繋がらない環境では、ArcGIS API JavaScript (JSAPI) CDN にアクセスすることはできません。このシナリオでは、JSAPI をダウンロードしてローカルにインストールする必要があります。
Experience Builder は、Node.js 12+.x 以上のバージョンで動作します。
Experience Builder のインストール環境に Node.js (v12+.x) をダウンロードしてインストールを行います。
Experience Builder の機能強化や新機能をサポートするために、最新版の ArcGIS API JavaScript をインストールすることが推奨されています。Esri が公開しているオフライン インストール動画(英語)](https://youtube.com/watch?v=1rO1cZNEr0E) を参照してください。ホストされた JSAPI のために、サーバーで CORS サポートを設定することが推奨されます。例えば、Windows OS の場合、HTTPSレスポンスヘッダーにAccess-Control-Allow-Original
アクションを追加することができます。
(例えば、Windows OS c:\Users\exbuser)
、またはターミナル(例えば、macOS /Users/installExB)
で、ユーザーフォルダを開き、npm config get cache
と入力します。npm config get cache
の実行で表示された npm-cache のフォルダのパスをコピーして、そのディレクトリを Windows のエクスプローラーか Mac の場合は Finder で開きます。npm install --offline
と入力して Enter キーを押します。npm install -- offline
と入力して Enter キーを押します。<install folder>/client/dist
で開きます。ARCGIS_JS_API_URL
をローカルで JSAPI を参照している URL に更新する必要が4箇所あります。例えば、以下の各ファイルで var ARCGIS_JS_API_URL = 'https://js.arcgis.com/4.16/'
を var ARCGIS_JS_API_URL = 'https://exb.esri.com/4.16/'
に置き換えてください。
<install folder>/client/dist/index.html
<install folder>/client/dist/experience/index.html
<install folder>/client/dist/template/index.html
<install folder>/client/dist/builder/index.html
Experience Builder (Developer Edition) を使用するために Client ID が必要になります。Client ID を作成するために ArcGIS Online または ArcGIS Enterprise に接続します。
ここでは、ArcGIS Online または ArcGIS Enterprise を使用した Client ID の作成手順について示します。
ArcGIS Online または ArcGIS Enterprise ポータルにログインし、コンテンツ ページの マイ コンテンツ
タブに移動して、新しいアイテム
をクリックし、アプリケーション
を選択します。
アプリケーション タイプ
で 他のアプリケーション
を選択します。
ダイアログボックスで、以下のパラメータを入力し、保存
をクリックします。
タイトル
- 例えば、Experience Builder credentials
などの任意のタイトルをを入力します。フォルダー
- アイテムを保存する任意のフォルダーを選択します。タグ
- Experience Builder
のような内容を入力します。サマリー
- アイテムのサマリーを入力します。
設定
タブをクリックします。アプリケーションの登録の項目までスクロールして、更新
をクリックします。
登録情報
ダイアログ ボックスで、次のように、リダイレクト URI
に https://localhost:3001/
と入力し、追加
をクリックして、更新
をクリックします。アプリケーション ID は、このあとの手順で使用するため、コピーなどをして控えておきます。
次の URL https://localhost:3001/
を指定して Experience Builder をブラウザで開きます。
ポータルの URL には、ArcGIS Online または ArcGIS Enterprise の組織サイトの URL を指定し、5. で作成した アプリケーション ID を指定します。すべてを指定したらサイン インをクリックします。
サイン イン後の流れについては、2. server サービスのインストールのステップ5 以降を参照してください。
お使いの OS に対応した最新の Node.js LTSバージョンをダウンロードし、インストールしてください。
Windows のコマンドプロンプトを管理者権限で開きます。
Experience Builder の /server
ディレクトリにディレクトリを変更 (cd
) します。
npm ci
コマンドを実行し、依存関係をインストールします。
npm run install-windows-service
のコマンドを実行します。
Windows サービスアプリを開き、Experience Builder サービス(デフォルト名:exb-server)を起動します。
Experience Builder サービスを削除するには、 npm run uninstall-windows-service
というコマンドを実行します。