Web マッピング アプリ開発に便利なツールをご紹介 : - Visual Studio Code で開発環境を構築 -

2658
0
03-10-2019 10:43 PM

Web マッピング アプリ開発に便利なツールをご紹介 : - Visual Studio Code で開発環境を構築 -

はじめての Web マッピングアプリケーション開発」シリーズでは、はじめて地図アプリ開発を行う開発者の方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れをシリーズで紹介してきました。

 

本シリーズ記事では、更にステップアップとして Web マッピング アプリケーション開発を行う際に知っておくと便利なツールをシリーズでご紹介していきます。

 

 

本記事では、まず Web アプリ開発環境の構築についてご紹介します。Web アプリ開発に利用できるテキスト エディターには「Sublime Text」「Atom」等、無償で使えるものが数多くあります。

 

今回は、その中から Visual Studio Code を取り上げ、インストールから開発をはじめるまでの設定について紹介します。

Visual Studio Code Microsoft 社が公開する無償のコード エディターです。JavaScript HTML をはじめとした数百の言語に対応し、コード補完やインテリセンス機能を持っています。

 

※本記事では Visual Studio Code バージョン 1.32.1 を使用しています

 

 

Visual Studio Code のインストール

Microsoft 社のサイトにアクセスし、[Download for ] をクリックしてインストーラーをダウンロードします。

 

ダウンロードした exe ファイルを実行して、インストールを開始します。ダイアログに沿って進めながらインストールを完了させます。

詳細なインストール手順や Visual Studio Code の画面構成についてはこちらの記事もご覧ください。

 

インストールが完了したら Visual Studio Code を起動します。

 

 

メニューの日本語化

メニュー画面が英語ですが、Visual Studio Code には言語パックが用意されており日本語化することもできます。

左側のバーの一番下の [Extension] ボタンをクリックして Extensions パネルを開き、検索ボックスに「Japanese Language Pack」と入力します。表示された Japanese Language Pack for Visual Studio Code エクステンションの [install] ボタンをクリックします。

 

インストールが完了したら、Visual Studio Code を再起動します。

 

 

メニューが日本語化されます。

 

 

Web アプリの作成

次に地図を表示するための HTML ファイルと JavaScript ファイルを作成します。

[フォルダーを開く] ボタンをクリックして、アプリを保存するルート フォルダーを選択します。ルート フォルダーの直下に index.html ファイルと app フォルダーを作成し、app フォルダーに main.js ファイルを作成します。

 

 

 

 

index.html には以下のコードをコピーしてファイルを保存します。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>my map</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
    <script>
      var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
      window.dojoConfig = {
        packages: [
          {
            name: "app",
            location: locationPath + "/app"
          }
        ]
      };
    </script>
    <script src="https://js.arcgis.com/4.10"></script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <script>require(["app/main"]);</script>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

 

main.js ファイルには以下のコードをコピーしてファイルを保存します。

require([
    "esri/Map",
    "esri/views/MapView"
  ], function(Map, MapView) {
 
    var map = new Map({
      basemap: "streets"
    });
 
    var view = new MapView({
      container: "viewDiv",
      map: map,
      zoom: 15,
      center: [139.745433, 35.658581]
    });
 
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

 

Web ブラウザでデバッグ

続いて作成したアプリを Web ブラウザで実行しデバッグできるようにします。Chrome 等の Web ブラウザに付随する開発者ツールでも良いですが、今回は Visual Studio Code でデバッグできるように設定してみます。

[拡張機能] ボタンをクリックし [拡張機能] 画面の検索ボックスで「Chrome」と入力します。表示された Debugger for Chrome エクステンションの [インストール] ボタンをクリックします。

 

[再読み込み] ボタンが表示されたら、[再読み込み] ボタンをクリックします。

 

[デバッグ] ボタンをクリックしてデバッグ画面を開きます。デバッグの構成ボタンをクリックし、プルダウンから [Chrome] を選択します。

 

.vscode フォルダーに launch.json ファイルが作成されます。launch.json ファイルではアプリのデバッグ方法を定義します。Web サーバーが利用可能な環境であれば URL でアプリを開くこともできますし、ローカル ファイルを開くこともできます。デバッグ時に Chrome でローカル ファイルを開くには、launch.json に以下のようにコードを追加して保存します。

{
    "name": "Launch Chrome localfile",
    "type": "chrome",
    "request": "launch",
    "file": "${workspaceFolder}/index.html"
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

※ ${workspaceFolder} には、現在 Visual Studio Code で開いているフォルダーが適用されます

 

 

デバッグ実行のプルダウン メニューに launch.json “name” 属性で指定している “Launch Chrome against localhost” ”Launch Chrome localfile” が表示されるので、”Launch Chrome localfile” を選択して実行すると、Chrome が起動し index.html ファイルが表示されます。

 

 

 

 

 

ブレーク ポイントは main.js ファイルを開きコード行番号の横をクリックして設定できます。変数の内容なども Visual Studio Code 上で確認することができます。

 

 

設定手順の紹介はしませんが、Live Server エクステンションを使用すると、簡単にローカル サーバーを実行でき、ソースコードを変更したら自動で Web ブラウザがリロードされるような機能も使用できます。ぜひ、試してみてください。

 

 

本記事では Visual Studio Code のインストールから開発を始めるまでの手順を紹介してきました。次回は TypeScript を使用したアプリ開発について紹介したいと思います。

 

【関連リンク】

 

Version history
Last update:
‎11-12-2020 11:18 PM
Updated by: