Web AppBuilder for ArcGIS (Developer Edition) インストールガイド

Web AppBuilder for ArcGIS (Developer Edition) をインストールする手順を説明します。

Web AppBuilder for ArcGISArcGIS Online あるいは Portal for ArcGIS に組み込まれた機能として提供されており、ウィジェット(機能)やテーマ(デザイン)を組み合わせることにより、GIS やプログラミングなどの専門知識がなくても誰でも簡単に Web アプリケーションを作成できるソフトウェアです。 Developer Edition(開発者向けエディション)はこれらの機能に加え、開発者のためにウィジェットやテーマを独自に開発するためのフレームワークを提供します。また、作成したアプリケーションをダウンロードし、独自のサーバーにホストすることも可能です。

概要

ここでは、Web AppBuilder for ArcGIS (Developer Edition) (以下 Web AppBuilder) のインストール手順を説明します。

インストール

  1. Web AppBuilder の ZIP ファイルをローカルにダウンロードし、解凍します。
    サインイン ページが表示される場合は、ArcGIS for Developers 開発者アカウント(あるいは ArcGIS Online 組織向けプランのアカウント)のユーザー名およびパスワードを入力しサインインします。
  2. Web AppBuilder は Node.js 上で動作するため、インストールする端末に Node.js が必要です。Web AppBuilder のインストール ファイルには Windows バージョンの Node.js が含まれていますが、Mac や Linux など他の OS をお使いの場合は Web AppBuilder を起動する前に Node.jsをインストールする必要があります。

インストール

ArcGIS API for JavaScript の参照先を変更する(オプション)

Web AppBuilder はデフォルトでは Esri の CDN で配信されている ArcGIS API for JavaScript を参照します。そのため、インターネットに接続できない環境で Web AppBuilder を使用する場合、ArcGIS API for JavaScript の参照先を変更する必要があります。ここでは Portal for ArcGIS に内蔵されている ArcGIS API for JavaScript へ参照先を変更する手順を説明します。

  1. <Web AppBuilder のインストール ディレクトリ>\client\stemapp\env.js ファイルをテキストエディターで開きます。
  2. //apiUrl を検索します。

    API のバージョンは Web AppBuilder のバージョンにより異なります。通常、Web AppBuilder がリリースされた時点の最新バージョンの API が使われています。

  3. apiUrl= "https://<ポータル URL>/jsapi/jsapi/" に書き換え、上書き保存します。

    Portal for ArcGIS が内蔵する API を使用する際は、内蔵されている API のバージョンに注意が必要です。Web AppBuilder が使用する API のバージョンと異なるバージョンの API の利用はサポートされません。
    Web AppBuilder のバージョンと API のバージョンの関係については About release versions を参照ください。

Web AppBuilder の起動

  1. Web AppBuilder を起動します。
    • Windows 端末
      Windows をお使いの場合、解凍したフォルダーにある startup.bat ファイルをダブルクリックします。このバッチファイルはコマンド プロンプト上で Node.js サーバーを起動します。
    • その他の端末
      Windows 以外のマシンにインストールする場合は、直接 Node.js サーバーを起動するコマンドを実行します。
      コマンド プロンプトを開き、<Web AppBuilder のインストール ディレクトリ>\server のパスを指定します。続けて node server.js と入力します。

Web AppBuilder は Web ブラウザーで http://[マシン名]:3344/webappbuilder にアクセスすると起動します。コマンド プロンプト上で Node.js が起動している間はいつでも、どの Web ブラウザーからでも Web AppBuilder を開くことができます。

利用するマシンがドメインに参加しているとき、Web AppBuilder へのアクセスにドメインを含める必要がある場合があります。その際は、http://[マシン名].[ドメイン]:3344/webappbuilder のようにドメインを含めてアクセスしてください。

  1. Node.js がデフォルトで使用するポート番号は 3344 です。パラメーターを追加したり、他のポート番号を割り当てたり、Windows サービスとして起動したりしたい場合は、以下の手順を参照してください。
    • パラメーターを追加し、他のポート番号を割り当てる
      1. コマンド プロンプトを開き、Web AppBuilder のサーバー ディレクトリ(<Web AppBuilderのインストール ディレクトリ>\server)へ移動します。割り当てたいポート番号と必要に応じてプロキシの URL を入力します。
        • 64 ビット版 Windows
          node_x64.exe server.js [-port=value] [-proxy=value]
        • 32 ビット版 Windows
          node_x32.exe server.js [-port=value] [-proxy=value]
        • その他のマシン
          node server.js [-port=value] [-proxy=value]
      2. Web ブラウザーを開き、上記で設定したポート番号を指定し、Web AppBuilder を起動します。
        http://[マシン名]:[ポート番号]/webappbuilder
    • Windows サービスとして起動する
      Web AppBuilder は、startup.bat ファイルをクリックして起動させるほかに、Windows サービスとして起動させることもできます。
      1. Windows プラットフォームに Node.js をインストールします。
      2. 管理者としてコマンドプロンプトを開きます。
      3. Web AppBuilder のサーバー ディレクトリ(<Web AppBuilder のインストール ディレクトリ>\server)へ移動します。
      4. npm install コマンドを実行します。
      5. npm run-script install-windows-service コマンドを実行します。
      6. Windows の [サービス] ウィンドウを開き、ArcGISWebAppBuilder サービスを起動します。
      7. ArcGISWebAppBuilder サービスを削除するには、npm run-script uninstall-windows-service コマンドを実行します。

        プロキシを利用したい場合は、/~server/package.json ファイルを開き、"start": "node server.js""start": "node server.js -proxy=<http://your proxy>" に変更してください。

起動

ポータル URL の指定

  1. Web AppBuilder で使用するアカウントに紐づく ArcGIS Online またはPortal for ArcGIS の URL を指定します。

    開発者アカウントをご利用の方は、ArcGIS for Developers の [Account Settings] ページにて URL をご確認ください。

  2. [続行] をクリックします。

    Web 層認証を使用している場合、次のセクションはスキップしてください。ログイン後、インストールの確認をしてください。
    ArcGIS Online または Portal for ArcGIS で OAuth2 認証を使用する場合は、次のセクションでアプリケーション ID を設定する必要があります。

アプリケーション ID の設定

上記で指定した ArcGIS Online または Portal for ArcGIS ではじめて Web AppBuilder を使用する場合、OAuth2 認証を利用できるようにするため、アプリケーション ID を設定する必要があります。
アプリケーション ID を入手するには ArcGIS Online または Portal for ArcGIS に Web AppBuilder をアイテムとして追加します。

  1. 指定したポータルへログインします。
  2. Web AppBuilder をポータルにアイテムとして追加します。
    1. [マイコンテンツ] を開きます。[アイテムの追加] をクリックし、[アプリケーション] を選択します。
    2. [アプリケーション] ダイアログが表示されたら、[URL] オプションに Web AppBuilder の URL を入力します。任意のタイトルとタグを設定し、 [アイテムの追加] をクリックします。これで Web AppBuilder はアイテムとしてポータルに追加されました。
      アイテムの追加
  3. アイテムの追加が完了すると、追加したアイテムの詳細情報のページが表示されます。
    • ArcIGS Online:[設定] タブをクリックします。[アプリケーションの登録] セクションまでスクロールし、[登録] をクリックします。
    • Portal for ArcGIS:[アプリケーションの登録] セクションまでスクロールし、[登録] をクリックします。
  4. [登録] ダイアログが表示されます。[リダイレクト URI] オプションに http://[マシン名] または https://[マシン名] を入力して、[追加] をクリックします。HTTP と HTTPS プロトコルは異なる URI として認識されることに注意してください。リダイレクトに関する問題を避けるため、両方のプロトコルを登録することを推奨しています。
    アプリケーションの登録
  5. [登録] をクリックします。これでアプリケーションの登録は完了です。
  6. Web AppBuilder の起動画面に戻ります。[アプリケーション ID] オプションに入手したアプリケーション ID を入力し、[続行] をクリックします。

    Invalid redirect_uri エラー ページが表示される場合は、以下の手順に従ってください。

    アプリケーション ID を入手する際に登録したリダイレクト URI に誤りがある場合、アプリケーション ID オプションにアプリケーション ID を入力し、[続行] をクリックすると、エラー ページが表示されることがあります。この場合、登録したアプリケーションの情報を修正する必要があります。

    1. Web AppBuilder のサーバー ディレクトリ(<Web AppBuilder のインストール ディレクトリ>\server)を開き、signininfo.json ファイルを削除します。
    2. 手順 3 に戻り、入力したリダイレクト URI を更新するか、アプリケーションを新しく登録して、新しいアプリケーション ID を入手します。
    3. 起動中の Web AppBuilder のページを再読み込みします。
    4. [アプリケーション ID] オプションにアプリケーション ID を入力し、[続行] をクリックします。
  7. [権限のリクエスト] ダイアログが表示されます。表示されたアカウント情報が正しいことを確認し [承認] をクリックします。

アプリケーション ID の設定

アプリケーション ID は OAuth2 認証に必要です。詳細は 認証をご参照ください。ログインに関する問題は、FAQs および アプリの追加とアプリの登録をご参照ください。

Web AppBuilder は、デフォルトで HTTPS をサポートするために Node.js で自己署名証明書を使用しています。
独自に用意した証明書を使用したい場合は、Web AppBuilder のサーバー ディレクトリ(<Web AppBuilder のインストール ディレクトリ>\server)にある cakey.pemcacert.pem を置き換えてください。

アプリケーション ID の登録手順の説明は以上です。これで 登録先のポータルへ OAuth2 認証を使用してサインインできるようになりました。次回からは Web AppBuilder を起動すると直接 Web AppBuilder のトップページが表示されます。

これで Web AppBuilder のインストールは終了です。

インストールの確認

ここでは Web AppBuilder が正常にインストールされていることを確認するために、アプリケーションの起動確認を行います。

  1. Web AppBuilder を起動します。
  2. トップページが表示されたら [新規作成] をクリックします。
  3. [デフォルト(2D)] を選択し、[次へ] をクリックします。
  4. 新しい Web アプリの作成ページが開きます。任意のタイトルと説明を入力して [OK] をクリックします。
  5. アプリケーションの作成のページが表示されたらインストールの確認は完了です。

インストールの確認