OpenLayers4 Tutorials - 5 Compile Application and OpenLayers together

● Compile Application and OpenLayers together
（http://openlayers.org/en/latest/doc/tutorials/closure.html）
アプリケーションと OpenLayers を一緒にコンパイル

Closure Compiler を使用してアプリケーションをコンパイル

OpenLayers のコードは Closure Library を使用し、Closure Compiler を使用してコンパイルされます。アプリケーションに使用される OpenLayers は、 Closure を使用する必要はありません。しかし、OpenLayers アプリケーションで Closure を使用することは可能です。そして、これはこのチュートリアルの内容です。

このチュートリアルは、Closure を使用して動作するためのユーティリティを提供する、closure-util node パッケージに基づく OpenLayers アプリケーションをセットアップする方法を教えます。closure-util を使用することは、Web アプリケーションで Closure を使用する 1 つの方法ですが、他もあります。このチュートリアルは、"closure-util" 方法をちょうどカバーします。

closure-util ドキュメントは、closure-util readme ページで利用できます。このチュートリアルに従うために closure-util のマニュアルを読む必要はありませんが、必要な場合は closure-util readme ファイルが利用できます。

また、このチュートリアルにあるサンプルアプリケーションは、GitHub 上で利用できます。


Closure を使用する利点

このチュートリアルでは、Closure Compiler　を使用してアプリケーション　とOpenLayers　を一緒にコンパイルする方法を説明します。 アプリケーションコードを　OpenLayers　コードとともにコンパイルすることには多くの利点があります。

まず、コンパイラは、アプリケーションが使用しない　OpenLayers　コードを除外するため、アプリケーションで使用する　OpenLayers　コードに対してのみ「支払う」ことができます。OpenLayers のカスタムビルドを作成するときに必要な、「エクスポート」リストを書いたり管理する必要はありません。

また、アプリケーションと OpenLayers を一緒にコンパイルすることは、 OpenLayers の関数と公式の OpenLayers 3（現在は 4） API の部分ではないオブジェクトを使用ことができます。API 以外の関数およびオブジェクトを使用することは、危険な可能性がありますが、それはコンパイラが OpenLayers にはない関数またはオブジェクトを使用すると訴えるという事実によって軽減されます。


アプリケーションの設定

最初に、アプリケーションのディレクトリを作成します。このチュートリアルでは、そのディレクトリに openlayers-closure-application と名付けます。

$ mkdir openlayers-closure-application

次に、そのディレクトリに移動します。

$ cd openlayers-closure-application

アプリケーションは node アプリケーションになり、openlayers と closure-util node パッケージは npm コマンドラインツールを使用して node　パッケージレジストリからがダウンロードされます。

それで、すべての node　アプリケーションが含んでいる、アプリケーションの package.json ファイルを作成できます。このファイルは、基本的に、アプリケーションのメタデータを含んでいます。

アプリケーションの package.json ファイルを作成します。

$ npm init

npm init が尋ねる質問には、ほとんどの場合、デフォルトの回答を使用することができます。

次は、次のコマンドを使用して OpenLayers をインストールします。

$ npm install openlayers --save

-save フラグは、アプリケーションの package.json ファイル内での openlayers 依存関係を解決しません。依存関係が追加されたことを確認する package.json を編集できます。

closure- util は openlayers パッケージの依存関係なので、openlayers と共にインストールされている必要があります。closure-util がインストールされていることを確認するのに次を使用します。

$ ./node_modules/openlayers/node_modules/.bin/closure-util

command argument is required

Usage: node closure-util <command> [options]

command     
  update-compiler     Update the Compiler
  update-library      Update the Library
  update              Update both the Library and the Compiler
  build               Build with Closure Compiler
  serve               Start the development server

Options:
   -l LEVEL, --loglevel LEVEL   Log level  [info]

■□ Debian8 で試します■□
/home/user/public_html に openlayers-closure-application ディレクトリを作成し移動します。

user@deb8-vmw:~$ cd public_html/
user@deb8-vmw:~/public_html$ mkdir openlayers-closure-application
user@deb8-vmw:~/public_html$ cd openlayers-closure-application

プロジェクトディレクトリ new-project の依存関係を管理するために、npm init で package.json を作成します。

user@deb8-vmw:~/public_html/openlayers-closure-application$ npm init
user@deb8-vmw:~/public_html/openlayers-closure-application$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install Glt;pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (openlayers-closure-application)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: user
license: (ISC)
About to write to /home/nob61/public_html/openlayers-closure-application/package.json:

{
  "name": "openlayers-closure-application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "user",
  "license": "ISC"
}


Is this ok? (yes) 

次のコマンドを使用して OpenLayers をインストールします。

user@deb8-vmw:~/public_html/openlayers-closure-application$ npm install openlayers --save

closure-util がインストールされていることを確認するのに次を使用します。

user@deb8-vmw:~/public_html/openlayers-closure-application$ ./node_modules/.bin/closure-util

command argument is required

Usage: /usr/bin/nodejs closure-util <command> [options]

command     
  update-compiler     Update the Compiler
  update-library      Update the Library
  update              Update both the Library and the Compiler
  build               Build with Closure Compiler
  serve               Start the development server

Options:
   -l LEVEL, --loglevel LEVEL   Log level  [info]

■□ここまで■□


OpenLayers マップを作成

次に、OpenLayers マップを作成する JavaScript ファイルを作成していきます。これは、アプリケーションのエントリポイントを定義するファイルです。

まず、アプリケーションのルートに src ディレクトリを作成します。

$ mkdir src

次に、以下の内容のファイル main.js を src に追加します。

goog.provide('app');

goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');

/**
 * @type {ol.Map}
 */
app.map = new ol.Map({
 target: 'map',
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 view: new ol.View({
  center: [0, 0],
  zoom: 4
 })
});

goog.provide('app') は、アプリケーションの名前空間 app を作成します。次の goog.require ステートメントは、アプリケーションが使用する OpenLayers コンストラクタと名前空間を定義します。OpenLayers のアプリケーションでの操作と同様、コードの残りの部分は OpenLayers マップを作成するだけです。

■□ Debian8 で試します■□
アプリケーションのルートに src ディレクトリを作成します。

user@deb8-vmw:~/public_html/openlayers-closure-application$ mkdir src

次に、以下の内容のファイル main.js を src に追加します。

user@deb8-vmw:~/public_html/openlayers-closure-application$ cd src
user@deb8-vmw:~/public_html/openlayers-closure-application/src$ vim main.js

goog.provide('app');

goog.require('ol.Map');
goog.require('ol.View');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');

/**
 * @type {ol.Map}
 */
app.map = new ol.Map({
 target: 'map',
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 view: new ol.View({
  center: [0, 0],
  zoom: 4
 })
});

■□ここまで■□


アプリケーションをコンパイル

次に、Closure Compiler と closure-util を使用して、アプリケーションと OpenLayers を一緒にコンパイルします。このため、入力ファイルとして closure-util コマンドに渡す、JSON の config ファイルを作成する必要があります。

最小設定ファイルはこのようになります。

{
 "lib": [
  "node_modules/openlayers/src/**/*.js",
  "node_modules/openlayers/build/ol.ext/**/*.js",
  "src/**/*.js"
 ],
 "compile": {
  "closure_entry_point": "app",
  "externs": [
   "node_modules/openlayers/externs/bingmaps.js",
   "node_modules/openlayers/externs/cartodb.js",
   "node_modules/openlayers/externs/closure-compiler.js",
   "node_modules/openlayers/externs/esrijson.js",
   "node_modules/openlayers/externs/geojson.js",
   "node_modules/openlayers/externs/proj4js.js",
   "node_modules/openlayers/externs/tilejson.js",
   "node_modules/openlayers/externs/topojson.js"
  ],
  "define": [
   "ol.ENABLE_WEBGL=false"
  ],
  "js": [
   "node_modules/openlayers/externs/olx.js",
   "node_modules/openlayers/externs/oli.js"
  ],
  "extra_annotation_name": [
   "api", "observable"
  ],
  "rewrite_polyfills": "false",
  "compilation_level": "ADVANCED",
  "warning_level": "VERBOSE",
  "output_wrapper": "(function(){%output%})();",
  "use_types_for_optimization": true
 }
}

上記のコンテンツの config.json ファイルをアプリケーションディレクトリのルートに作成します。

この時点で、コードをコンパイルするたに closure-util が使用できます。

$ ./node_modules/openlayers/node_modules/.bin/closure-util build config.json app.js

app.js ファイルの結果は、興味があるなら、エディタで表示でき、アプリケーションコード（main.js）の縮小版とアプリケーションコードが使用する OpenLayers コードが含まれています。

これは、詳細コンパイルチェックを有効した config.json のバージョンです。

{
 "lib": [
  "node_modules/openlayers/src/**/*.js",
  "node_modules/openlayers/build/ol.ext/**/*.js",
  "src/**/*.js"
 ],
 "compile": {
  "closure_entry_point": "app",
  "externs": [
   "node_modules/openlayers/externs/bingmaps.js",
   "node_modules/openlayers/externs/cartodb.js",
   "node_modules/openlayers/externs/closure-compiler.js",
   "node_modules/openlayers/externs/esrijson.js",
   "node_modules/openlayers/externs/geojson.js",
   "node_modules/openlayers/externs/proj4js.js",
   "node_modules/openlayers/externs/tilejson.js",
   "node_modules/openlayers/externs/topojson.js"
  ],
  "define": [
   "ol.ENABLE_WEBGL=false"
  ],
  "js": [
   "node_modules/openlayers/externs/olx.js",
   "node_modules/openlayers/externs/oli.js"
  ],
  "jscomp_error": [
   "*"
  ],
  "jscomp_off": [
   "unknownDefines",
   "lintChecks",
   "analyzerChecks"
  ],
  "extra_annotation_name": [
   "api", "observable"
  ],
  "compilation_level": "ADVANCED",
  "warning_level": "VERBOSE",
  "output_wrapper": "(function(){%output%})();",
  "use_types_for_optimization": true
 }
}

■□ Debian8 で試します■□
次の内容で config.json ファイルをアプリケーションディレクトリのルートに作成します。

user@deb8-vmw:~/public_html/openlayers-closure-application/src$ cd ../
user@deb8-vmw:~/public_html/openlayers-closure-application$ vim config.json

{
 "lib": [
  "node_modules/openlayers/src/**/*.js",
  "node_modules/openlayers/build/ol.ext/**/*.js",
  "src/**/*.js"
 ],
 "compile": {
  "closure_entry_point": "app",
  "externs": [
   "node_modules/openlayers/externs/bingmaps.js",
   "node_modules/openlayers/externs/cartodb.js",
   "node_modules/openlayers/externs/closure-compiler.js",
   "node_modules/openlayers/externs/esrijson.js",
   "node_modules/openlayers/externs/geojson.js",
   "node_modules/openlayers/externs/proj4js.js",
   "node_modules/openlayers/externs/tilejson.js",
   "node_modules/openlayers/externs/topojson.js"
  ],
  "define": [
   "ol.ENABLE_WEBGL=false"
  ],
  "js": [
   "node_modules/openlayers/src/ol/typedefs.js",
   "node_modules/openlayers/externs/olx.js",
   "node_modules/openlayers/externs/oli.js"
  ],
  "extra_annotation_name": [
   "api", "observable"
  ],
  "rewrite_polyfills": "false",
  "compilation_level": "ADVANCED",
  "warning_level": "VERBOSE",
  "output_wrapper": "(function(){%output%})();",
  "use_types_for_optimization": true
 }
}

コードをコンパイルするたに closure-util 実行します。

user@deb8-vmw:~/public_html/openlayers-closure-application$ ./node_modules/.bin/closure-util build config.json app.js
info closure-util Reading build config
info closure-util Getting Closure dependencies
info closure-util Compiling 345 sources
info closure-util Writing compiled code to app.js
user@deb8-vmw:~/public_html/openlayers-closure-application$ ls
app.js  config.json  node_modules  package.json  src

■□ここまで■□


アプリケーションの HTML ファイルを作成

この時点で、先に進めることができ、アプリケーションのシンプルな HTML を作成することができます。ルート アプリケーション ディレクトリに以下の内容の index.html ファイルを作成します。

<!doctype html>

<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" type="text/css">
  <title>Simple example</title>
  <style>
   #map {
    width: 600px;
    height: 400px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
  <script src="app.js" type="text/javascript"></script>
 <body>
</html>

ページに 、コンパイルの結果ファイルである app.js ファイルを参照するスクリプト タグが含まれていることに注意してください。

完了です!

■□ Debian8 で試します■□
次の内容の index.html ファイルを作成します。

user@deb8-vmw:~/public_html/openlayers-closure-application$ vim index.html

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" type="text/css">
  <title>Simple example</title>
  <style>
   #map {
    width: 600px;
    height: 400px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
  <script src="app.js" type="text/javascript"></script>
 <body>
</html>

Webブラウザのアドレス欄に

http://localhost/~user/openlayers-closure-application/

と入力して Enter キーを押します。

■□ここまで■□


デバッグ モードでアプリケーションを実行

ボーナスとして、元のアプリケーションと OpenLayers スクリプトがページに1 つずつ読み込まれる「デバッグ」モードでアプリケーションを実行する closure-util の使用方法を示します。

closure-util の開発サーバーを起動します。

$ ./node_modules/openlayers/node_modules/.bin/closure-util serve config.json

次に、index.html ファイルのスクリプトタグを次のように変更します。

<script src="@?main=src/main.js" type="text/javascript"></script>

ブラウザでページを再読み込みすると、より簡単にデバッグするためにスクリプトがこの時点で個別に読み込まれることがわかります。

■□ Debian8 で試します■□
closure-util の開発サーバーを起動します。

user@deb8-vmw:~/public_html/openlayers-closure-application$ ./node_modules/.bin/closure-util serve config.json
info closure-util Reading build config
info closure-util Listening on http://localhost:3000/ (Ctrl+C to stop)

index.html ファイルのスクリプトタグを次のように変更します。

user@deb8-vmw:~/public_html/openlayers-closure-application$ vim index.html

---
  <!-- <script src="app.js" type="text/javascript"></script> -->
  <script src="@?main=src/main.js" type="text/javascript"></script>
---

Webブラウザのアドレス欄に

http://localhost:3000/

と入力して Enter キーを押します。

スクリプトが個別に読み込まれることは確認できませんでした。
■□ここまで■□