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

インストールガイド

目次 はじめに... 1 Web AppBuilder for ArcGIS (Developer Edition) インストールガイドについて... 1 Web AppBuilder for ArcGIS (Developer Edition) とは... 1 動作環境... 2 ライセンス... 2 インストール手順... 3 Web AppBuilder for ArcGIS (Developer Edition) のインストール... 3 インストールファイルのダウンロード... 3 ArcGIS API for JavaScript の参照先を変更する ( オプション )... 5 Web AppBuilder の起動... 5 ポータル URL の指定... 7 アプリケーション ID の登録... 8 インストールの確認... 14 インストールの確認... 14 アプリケーションのダウンロードとサーバーへの配置... 16 アプリケーションのダウンロードとサーバーへの配置... 16 アプリケーションのダウンロード... 16 アプリケーションを Web サーバーに配置する... 17

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

動作環境 Web AppBuilder for ArcGIS (Developer Edition) がサポートしているブラウザーは以下の通りです Web ブラウザー Firefox Google Chrome Internet Explorer 8 11 1 Microsoft Edge 2 Safari(Mac) モバイル端末 ios 6 以上 (Safari) Android 4.0 以上 ( 標準ブラウザーおよび Google Chrome) 3 1 Internet Explorer 8 および 9 は CORS をサポートしていないため Web 層認証を利用できません 2 バージョン 1.3 よりサポート 3 Android は端末によって地図表示のパフォーマンスが異なる可能性がありますので 開発の前にあらかじめ動作検証を行っていただくことを推奨します ライセンス Web AppBuilder for ArcGIS (Developer Edition) を使用するには ArcGIS Online 組織向けプランある いは Portal for ArcGIS の指定ユーザーアカウント または ArcGIS for Developers 開発者アカウント が必要です 2

インストール手順 Web AppBuilder for ArcGIS (Developer Edition) のインストール ここでは Web AppBuilder for ArcGIS (Developer Edition) ( 以下 Web AppBuilder) のインストール 手順を説明します インストールファイルのダウンロード Web AppBuilder をインストールするには インストールファイルを入手する必要があります ここではインストールファイルを開発者のためのポータルサイト ArcGIS for Developers からダウンロードする方法について説明します ArcGIS for Developers https://developers.arcgis.com/ 1. ArcGIS for Developers へアクセスし 右上にあるをクリックします サインインペー ジが表示されたら ArcGIS for Developers 開発者アカウント ( あるいは ArcGIS Online 組織向け プランの指定ユーザーアカウント ) のユーザー名およびパスワードを入力しサインインします 3

2. アカウントページが表示されます 右上にある [ ダウンロード ] をクリックします 3. ダウンロードページが表示されます ページ中ほどにある Web AppBuilder for ArcGIS のをクリックするとインストールファイルのダウンロードが始まります インストールファイルは ZIP 形式で提供されます ファイルを任意の場所に保存し ダウンロードが完了したら解凍します 4

Web AppBuilder は Node.js 上で動作するため インストールする端末に Node.js が必要です Web AppBuilder のインストールファイルには Windows バージョンの Node.js が含まれていますが Mac や Linux など他の OS をお使いの場合は Web AppBuilder を起動する前に Node.js をインストールする必要があります Node.js http://nodejs.org/ 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 の起動 ここでは Web AppBuilder の起動方法について説明します Windows 端末 Windows をお使いの場合 解凍したフォルダーにある startup.bat ファイルをダブルクリックします このバッチファイルはコマンドプロンプト上で Node.js サーバーを起動します その他の端末 Windows 以外のマシンにインストールする場合は 直接 Node.js サーバーを起動するコマンドを実行します コマンドプロンプトを開き <Web AppBuilder のインストールディレクトリ >\server のパスを指定します 続けて node server.js と入力します 5

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

ポート番号の割り当て Node.js がデフォルトで使用するポート番号は 3344 です 他のポート番号を割り当てたい場合は以下の手順に従ってください 1. コマンドプロンプトを開き Web AppBuilder のサーバーディレクトリ ( <Web AppBuilder のインストールディレクトリ >\server ) を指定します 割り当てたいポート番号と必要に応じてプロキシの URL を入力します 64 ビット版 Windows node_x64.exe server.js [ ポート番号 =value] [ プロキシ =value] 32 ビット版 Windows node_x32.exe server.js [ ポート番号 =value] [ プロキシ =value] その他のマシン node server.js [ ポート番号 =value] [ プロキシ =value] 2. Web ブラウザーを開き 上記で設定したポート番号を指定し Web AppBuilder を起動します http://[ マシン名 ]:[ ポート番号 ]/webappbuilder Windows サービスとして起動する Web AppBuilder を Windows サービスとして起動することができます 1. Windows プラットフォームに Node.js をインストールします 2. 管理者としてコマンドプロンプトを開きます 3. Web AppBuilder のサーバーディレクトリ ( <Web AppBuilder のインストールディレクトリ >\server ) を指定し npm install コマンドを実行します 4. npm run-script install-windows-service コマンドを実行します 5. Windows の [ サービス ] ウィンドウを開き ArcGISWebAppBuilder サービスを起動します ArcGISWebAppBuilder サービスを削除するには npm run-script-uninstall-windows-service コマンドを実行します ポータル URL の指定 Web AppBuilder を起動後 Web AppBuilder で使用するアカウントに紐づく ArcGIS Online または Portal for ArcGIS の URL を指定します 開発者アカウントをご利用の方は ArcGIS for Developers の [Account Settings] ページにて URL をご確認ください ArcGIS for Developers: Account Settings https://developers.arcgis.com/en/account/profile/ 7

アプリケーション ID の登録 上記で指定した ArcGIS Online または Portal for ArcGIS で初めて Web AppBuilder を使用する場合 OAuth2 認証を利用できるようにするため アプリケーション ID を入力する必要があります アプリケーション ID を入手するには ArcGIS Online Portal for ArcGIS ArcGIS for Developers のいずれかに Web AppBuilder をアプリケーションとして追加 登録する必要があります 1. はじめに Web AppBuilder を ArcGIS Online Portal for ArcGIS ArcGIS for Developers のいずれかにアプリケーションとして追加します いずれも基本的な操作は同じです 1 ArcGIS Online Portal for ArcGIS ArcGIS for Developers のいずれかにサインインし [ マイコンテンツ ] を開きます をクリックし [ アプリケーション ] を選択します 8

2 [ アプリケーション ] ウィンドウが表示されたら URL オプションに Web AppBuilder の URL を入力し Web マッピングを選択します 任意のタイトルとタグを設定し を クリックします これで Web AppBuilder はアプリケーションとしてアイテム追加されました 2. 続いて 追加したアプリケーションの登録を行い アプリケーション ID を入手します 1 アイテムの追加が完了すると 追加したアイテムの詳細情報のページが表示されます [ アプリケーションの登録 ] セクションまでスクロールし [ 登録 ] をクリックします 9

2 [ 登録 ] ウィンドウが表示されます リダイレクト URI オプションに OAuth2 認証を利用して サインインした後にリダイレクトする URI を入力し をクリックします すべての リダイレクト URI を追加したら をクリックします http と https プロトコルは異なる URI として認識されます リダイレクトに関する問題 を避けるため 両方のプロトコルを登録することをお勧めします 3 これでアプリケーションの登録は完了です [ アプリケーションの登録 ] セクションにアプリケー ション ID が表示されたか確認します 10

3. Web AppBuilder の起動画面に戻ります アプリケーション ID オプションに手順 2 で入手したアプ リケーション ID を入力し をクリックします 4. [ 権限のリクエスト ] ダイアログが表示されます 表示されたアカウント情報が正しいことを確認し をクリックします アプリケーション ID の登録手順の説明は以上です これで登録先の ArcGIS ポータル (ArcGIS Online Portal for ArcGIS) あるいは ArcGIS for Developers へ OAuth2 認証を使用してサインインできるようになりました 次回からは Web AppBuilder を起動すると直接 Web AppBuilder のトップページが表示されます 11

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

Invalid redirect_uri エラーページが表示されるアプリケーション ID を入手する際に登録したリダイレクト URI に誤りがある場合 アプリケーション ID オプションにアプリケーション ID を入力し [ 続行 ] をクリックすると エラーページが表示されることがあります この場合 登録したアプリケーションの情報を修正する必要があります 1. Web AppBuilder のサーバーディレクトリ ( <Web AppBuilder のインストールディレクトリ >\server ) を開き signininfo.json ファイルを消去します 2. 登録したアプリケーションのリダイレクト URI を更新するか アプリケーションを新しく登録しなおし 新しいアプリケーション ID を入手します 3. 起動中の Web AppBuilder のページを再読み込みします 4. アプリケーション ID オプションにアプリケーション ID を入力し [ 続行 ] をクリックします 13

インストールの確認 インストールの確認 ここでは Web AppBuilder が正常にインストールされていることを確認するために アプリケーションの 起動確認を行います 1. インストール手順の [Web AppBuilder の起動 ] セクションを参考に Web AppBuilder を起動しま す 2. Web AppBuilder が起動し トップページが表示されたらをクリックします 3. [ 新規アプリケーションの作成 ] ウィンドウが表示されます タイトルと説明を入力し を クリックします 14

4. [ 新規アプリケーションの作成 ] ページが表示されたらインストールの確認は完了です 15

アプリケーションのダウンロードとサーバーへの配置 アプリケーションのダウンロードとサーバーへの配置 Web AppBuilder は作成したアプリケーションをダウンロードし 独自のサーバーにホストすることが可 能です ここではその手順を紹介します アプリケーションのダウンロード 1. Web AppBuilder を起動し トップページを開きます このページには作成したアプリケーションの 一覧が表示されます マウスをホバーし アプリケーションを選択すると メニューが表示されます 2. ダウンロードしたいアプリケーションを選択し [ その他 ] をクリックします 表示されたメニ ューの中から [ ダウンロード ] を選択します 16

3. アプリケーションは ZIP ファイルでダウンロードされます 保存ダイアログが表示されたら 任意の フォルダーを指定し [ 保存 ] をクリックします これで アプリケーションはローカルドライブに保 存されます アプリケーションを Web サーバーに配置する 1. ダウンロードしたアプリケーションを解凍します 2. ルートフォルダーにある config.json ファイルを開き 以下の項目を編集します 1 プロキシ デフォルトではプロキシは設定されていません 必要に応じて 使用するプロキシを httpproxy プ ロパティに設定します 2 アプリケーション ID アプリケーションが使用している ArcGIS Online のアイテムにアクセスする際に ユーザーが OAuth 2.0 を使用して ArcGIS Online へログインできるようにします アプリケーションを ArcGIS Online へ追加 登録し 取得したアプリケーション ID を appid プロパティに設定します 3. アプリケーションを Web サーバーへ配置します 4. 最後にアプリケーションが正しく起動するか確認します 日本語環境では文字化けが原因で 正常にウィジェットが起動しないことがあります 詳しい情報は以 下をご参照ください ( サポートサイトへのログインが必要です ) 17

Web AppBuilder for ArcGIS (Developer Edition): ウィジェットが読み込めない https://esrij-esri-support.custhelp.com/app/answers/detail/a_id/6194 18

Web AppBuilder for ArcGIS (Developer Edition) インストールガイド第 4 版 2016 年 5 月 9 日 ESRI ジャパン株式会社 http://www.esrij.com/ Copyright(C) Esri Japan. 無断転載を禁ず 本書に記載されている社名 商品名は 各社の商標および登録商標です 本書に記載されている内容は改良のため 予告なく変更される場合があります 本書の内容は参考情報の提供を目的としており 本書に含まれる情報はその使用先の自己の責任において利用して頂く必要があります