インストール ガイド

ArcGIS Maps SDK for JavaScript のライブラリを Windows® Server の IIS（インターネット インフォメーション サービス）上に配置して Web アプリからアクセスできる環境を作るまでの流れを紹介します。API の詳細についてはインストールおよびセットアップ方法を参照してください。なお、IIS 以外の Web サーバーや Linux 上の Web サーバー（Apache Tomcat® など）へインストールする場合も基本的な流れは変わりません。

Esri がホストしている CDN にインターネット経由で参照する場合には、ライブラリをインストールする必要はありません。

ライブラリのダウンロード

ライブラリとヘルプ ドキュメントは ArcGIS Maps SDK for JavaScript リファレンスの Downloads ページからダウンロードできます。ダウンロードしたいバージョンの [API] ボタンをクリックするとダウンロードが開始します。

※ バージョンによってはインストール方法が本手順とは異なる場合があります。詳しくはダウンロード フォルダ内にあります install.html をご参照ください。

[Documentation] ボタンをクリックすると https://developers.arcgis.com/javascript/ で公開されているヘルプ ドキュメントとサンプル一式をダウンロードできます。

Web サーバー（IIS）に配置

  1. ダウンロードしたライブラリの zip ファイルを解凍します。
  2. \arcgis_js_v429_api\arcgis_js_api\javascript\4.30\ とすべてのコンテンツをコピーして Web サーバー上に配置します。例 : (C:\inetpub\wwwroot\javascript\api\4.30\)

必要条件

ArcGIS Maps SDK for JavaScript ライブラリおよびドキュメントのデフォルトのホスティング構成は、いずれも HTTPS です。

インストールのテスト

以下のサンプルは、ArcGIS Maps SDK for JavaScript のダウンロード版に含まれています。 ArcGIS Maps SDK for JavaScript のダウンロード版から /arcgis_js_v430_api/arcgis_js_api/javascript/4.30/ およびそのすべてのコンテンツを Web サーバにコピーした後、サポートされている Web ブラウザでアプリケーション https://www.example.com/javascript/4.30/index.html を開くことにより、API をテストすることができます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Test local installation of ArcGIS Maps SDK for JavaScript</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 93%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="./esri/themes/light/main.css" />
    <script src="./init.js"></script>

    <script>
      require(["esri/Basemap", "esri/layers/TileLayer", "esri/Map", "esri/views/SceneView"], function (
        Basemap,
        TileLayer,
        Map,
        SceneView
      ) {
        // --------------------------------------------------------------------
        // If you do not have public internet access, change the layer URL to
        // point to your own locally accessible cached service.
        // --------------------------------------------------------------------
        const layer = new TileLayer({
          url: "https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
        });
        const customBasemap = new Basemap({
          baseLayers: [layer],
          title: "My Basemap"
        });
        const myMap = new Map({
          basemap: customBasemap
        });
        const view = new SceneView({
          container: "viewDiv",
          map: myMap
        });

        checkThisOne("./esri/views/3d/environment/resources/stars.wsv", "wsv mimetype");
        checkThisOne("./esri/t9n/basemaps.json", "json mimetype");
        checkThisOne("./esri/themes/base/icons/fonts/CalciteWebCoreIcons.ttf", "ttf mimetype");
        checkThisOne("./esri/themes/base/icons/fonts/CalciteWebCoreIcons.woff", "woff mimetype");

        function checkThisOne(url, desc) {
          fetch(url, {
            method: "HEAD"
          })
            .then(function (response) {
              if (response.ok) {
                logDiv.innerHTML += "* OK: " + desc + "<br/>";
                if (response.status !== 200) {
                  logDiv.innerHTML += "&nbsp;&nbsp;&nbsp;&nbsp;status: " + response.status + "<br/>";
                }
                return response.blob();
              } else {
                // response not ok
                logDiv.innerHTML +=
                  "* HTTP error " + response.status + ' for <a href="' + url + '">' + url + "</a><br/>";
                alert("Problem accessing " + desc);
              }
            })
            .catch(function (error) {
              logDiv.innerHTML += '* BAD: <a href="' + url + '">' + url + "</a><br/>";
            });
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="logDiv"></div>
  </body>
</html>

以下のスクリーンショットのような結果が表示されます。(X.YZの部分は4.30となります。)