2017年5月16日火曜日

OpenLayers4 Tutorials - 3 Create Custom Builds

● Create Custom Builds
（http://openlayers.org/en/latest/doc/tutorials/custom-builds.html）
カスタムビルドの作成

OpenLayers 多くの機能を提供する大きなライブラリです。アプリケーションがOpenLayers が提供するすべての機能を必要とし、使用することはほとんどありません。アプリケーションに必要な機能だけを持つ、アプリケーション固有の OpenLayers ビルドを作成することは、多くの場合、良い考えである理由です。

カスタムビルドを作成する代わりは、OpenLayers と一緒にアプリケーションコードをコンパイルすることです。詳細については Closure Compiler チュートリアルの Compiling Application を参照してください。

このチュートリアルは、 OpenLayers のカスタム ビルドを作成する方法について説明します。


要件

OpenLayers ビルドツールは、Node と Java 使用するので、コンピュータにNode と Java がインストールされている必要があります。Node と Java が、それぞれインストールされているか確かめるために、「node --version」と「java -version」を実行できます。必要な最小バージョン番号は、開発ガイドを参照してください。


■□ Debian8 で試します■□
Debian8（Jessie）に、最新の Node.js をインストールしてみます。

「How to Install Latest NodeJs & NPM on Debian 8/7（https://tecadmin.net/install-latest-nodejs-npm-on-debian/）」と「Installing Node.js Tutorial: Debian Linux（https://nodesource.com/blog/installing-node-js-tutorial-debian-linux/）」を参考にします。

最初に、「curl」と「python-software-properties」をインストールします。「curl（https://curl.haxx.se/）」は、コマンドライン、または、スクリプトでデータを転送するために使用されます。「python-software-properties」は、インストールしたソフトウェアのリポジトリを管理します。[「Debian -- jessie の python-software-properties パッケージに関する詳細（https://packages.debian.org/ja/jessie/python-software-properties）」より]

user@deb8-vmw:~$ su -
パスワード:
root@deb8-vmw:~# apt-get install curl python-software-propaties
root@deb8-vmw:~# curl -sL https://deb.nodesource.com/setup_7.x | bash -

次に、node.js をインストールします。一緒に NPM もインストールされます。「npm（https://www.npmjs.com/）」は、JavaScript と世界最大のソフトウェアレジストリのパッケージマネージャです。

root@deb8-vmw:~# apt-get install nodejs

それでは、node.js と npm のバージョンを確認します。

root@deb8-vmw:~# exit
ログアウト
user@deb8-vmw:~$ node -v
v7.9.0
user@deb8-vmw:~$ npm -v
4.2.0

java のバージョンを確認します。（Eclipse 4.6 "Neon" のインストール時（2017年2月28日火曜日のブログ）に Java をインストールしました。）

user@deb8-vmw:~$ java -version
java version "1.7.0_121"
OpenJDK Runtime Environment (IcedTea 2.6.8) (7u121-2.6.8-2~deb8u1)
OpenJDK 64-Bit Server VM (build 24.121-b00, mixed mode)

node.js のインストールをテストするために、webサーバを作成します。次の内容で http_sever.js を作成します。

user@deb8-vmw:~$ vim http_server.js 
var http = require('http');
http.createServer(function (req, res) {
 res.writeHead(200, {'Content-Type': 'text/plain'});
 res.end('Hello World\n');
}).listen(3000, "127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');

次のコマンドで web サーバを起動します。

user@deb8-vmw:~$ node http_server.js
Server running at http://127.0.0.1:3000/

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

http://127.0.0.1:3000/

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


■□ここまで■□


OpenLayers をダウンロード

明らかに、カスタムビルドを作成するには、OpenLayers のソースと特定のビルドスクリプトが必要です。

OpenLayers のソースとビルドスクリプトを取得するには、openlayers リポジトリのクローンを作成することができるか、または、リリースアーカイブの1つをダウンロードすることができます。NPM (the Node Package Manager)を使用して、Node パッケージレジストリから openlayers Node パッケージもダウンロードすることができます。これは、このチュートリアルで使用する方法です。

ディレクトリを作成します。

$ mkdir openlayers

NPM を使用する OpenLayers ディストリビューションをダウンロードします。

$ npm install openlayers

これは、OpenLayers の最新の安定版をダウンロードし、node_modules の下でインストールします。「openlayers」という名前のディレクトリが実際に含まれていることを確認するために、node_modules の内容のリストを作成できます。

■□ Debian8 で試します■□
openlayers ディレクトリを public_html に作成します。

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

この openlayers ディレクトリの作成理由がわからないので、ここでは、このディレクトリ内で作業します。
NPM を使用する OpenLayers ディストリビューションをダウンロードします。

user@deb8-vmw:~/public_html$ cd openlayers
user@deb8-vmw:~/public_html/openlayers$ npm install openlayers

■□ここまで■□

openlayers パッケージが依存する Node パッケージは、node_modules/openlayers/node_modules の下にインストールされます。このディレクトリには、例えば、OpenLayers が Closure に使用するユーティリティライブラリである closure-util を含める必要があります。

■□ Debian8 で試します■□
実際のディレクトリは、

/home/user/public_html/openlayers/node_modules/openlayers

なっています。最後の openlayers ディレクトリには node_modules はありませんでした。
■□ここまで■□

この時点で、OpenLayers のカスタムビルドを作成するのに必要なすべてのものが準備できました。


ビルド設定ファイルの作成

カスタムビルドを作成するには、ビルド設定ファイルの書き込みが必要です。ビルド設定ファイルのフォーマットは JSON です。これは、ビルド設定ファイルの簡単な例です。
{
 "exports": [
  "ol.Map",
  "ol.View",
  "ol.control.defaults",
  "ol.layer.Tile",
  "ol.source.OSM"
 ],
 "compile": {
  "externs": [
   "externs/bingmaps.js",
   "externs/cartodb.js",
   "externs/closure-compiler.js",
   "externs/esrijson.js",
　  "externs/geojson.js",
   "externs/oli.js",
   "externs/olx.js",
   "externs/proj4js.js",
   "externs/tilejson.js",
   "externs/topojson.js"
  ],
  "extra_annotation_name": [
   "api", "observable"
  ],
  "compilation_level": "ADVANCED",
  "manage_closure_dependencies": true,
  "rewrite_polyfills": false
 }
}

この内容で ol-custom.json という名前のファイルを作成し、node_modules/openlayers/build ディレクトリに保存します。(実際はそれを任意の場所に保存することができます。)

この設定オブジェクトの最も関連する部分は、「exports」配列です。この配列は、JavaScript コードで使用するfunctions/constructors（ファンクション/コンストラクタ）を宣言します。例えば、上記の設定ファイルは、次の JavaScript コードを使用する場合です。

var map = new ol.Map({
 target: 'map',
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 controls: ol.control.defaults({
  attributionOptions: {
   collapsible: false
  }
 }),
 view: new ol.View({
  center: [0, 0],
  zoom: 4
 })
});

この JavaScript コードは 、 OpenLayers の Examples 内にある「simple example」に対応していることに注意して下さい。

この時点で、最初の OpenLayers ビルドを作成する準備が整いました。ビルドを作成するには、次のコマンドを使用します。

$ cd node_modules/openlayers
$ node tasks/build.js build/ol-custom.json build/ol-custom.js

ビルドコマンドには時間がかかることがありますが、次のような出力がコンソールに表示されます。

info ol Parsing dependencies
info ol Compiling 364 sources

build コマンドは、node_modules/openlayers/build ディレクトリに ol-custom.js ファイルを作成するでしょう。ファイルが作成されたことを確認できます。興味がある人は、エディタで開くこともできます。

テストは、次のHTMLファイルを使用して、カスタムビルドが正常に動作することを確認できます。

<!DOCTYPE html>
<html>
　<head>
　 <meta charset="utf-8" />
　 <title>OpenLayers example</title>
　 <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
　 <style>
　  #map {
　   width: 600px;
　   height: 400px;
　  }
 　</style>
　</head>
　<body>
 　<div id="map"></div>
 　<script src="node_modules/openlayers/build/ol-custom.js"></script>
　 <script>
 　 var 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
    })
   });
  </script>
 <body>
</html>
■□ Debian8 で試します■□
ビルド設定ファイルの作成

node_modules/openlayers/build に 次の内容で  ol-custom.json という名前のファイルを作成します。

user@deb8-vmw:~/public_html/openlayers$ cd node_modules/openlayers/build/
user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers/build$ vim ol-custom.json
{
 "exports": [
  "ol.Map",
  "ol.View",
  "ol.control.defaults",
  "ol.layer.Tile",
  "ol.source.OSM"
 ],
 "compile": {
  "externs": [
   "externs/bingmaps.js",
   "externs/cartodb.js",
   "externs/closure-compiler.js",
   "externs/esrijson.js",
   "externs/geojson.js",
   "externs/oli.js",
   "externs/olx.js",
   "externs/proj4js.js",
   "externs/tilejson.js",
   "externs/topojson.js"
  ],
  "extra_annotation_name": [
   "api", "observable"
  ],
  "compilation_level": "ADVANCED",
  "manage_closure_dependencies": true,
  "rewrite_polyfills": false
 }
}
ビルドを作成するために、node_modules/openlayers/ に移動して次のコマンドを使用します。

user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers/build$ cd ../
user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers$ node tasks/build.js build/ol-custom.json build/ol-custom.js
info ol Parsing dependencies
info ol Compiling 345 sources

次のHTMLファイル openlayers.html を作成します。

user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers$ cd ../../
user@deb8-vmw:~/public_html/openlayers$ vim openlayers.html
<!DOCTYPE html>
<html>
　<head>
　 <meta charset="utf-8" />
　 <title>OpenLayers example</title>
　 <link rel="stylesheet" href="node_modules/openlayers/css/ol.css" />
　 <style>
　  #map {
　   width: 600px;
　   height: 400px;
　  }
 　</style>
　</head>
　<body>
 　<div id="map"></div>
 　<script src="node_modules/openlayers/build/ol-custom.js"></script>
　 <script>
 　 var 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
    })
   });
  </script>
 <body>
</html>
Webブラウザのアドレス欄に

http://localhost/~user/openlayers/openlayers.html

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


user@deb8-vmw:~/public_html/openlayers/node_modules$ cd openlayers/build/
user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers/build$ ls -l
合計 1624
-rw-r--r-- 1 user user 1495423  5月  4 14:33 info.json
-rw-r--r-- 1 user user  155060  5月  4 14:34 ol-custom.js
-rw-r--r-- 1 user user     510  5月  4 11:13 ol-custom.json
drwxr-xr-x 2 user user    4096  5月  3 14:50 ol.ext
ol-custom.js は 155060B で、単純には比較できませんが ol.js は 510491B なので容量が減らされました。

■□ここまで■□


設定（config）ファイルの詳細
More on the config file

define

Closure は、コンパイル時に設定できる定数を定義できます。OpenLayers のコードは、そのような値をいくつか定義します。

これらのいくつかを false に設定すると、この設定に関連するコードの部分が「デッド（dead：無効）」、すなわち決して実行されないよう、になります。Closure Compiler ADVANCED モードではデッドコードが削除されるため、アドバンスコンパイル（advanced compiled）ファイルのサイズを小さくします。

作成したビルドファイルが完全ビルドよりもかなり小さいことに気づいたかもしれませんが、それをさらに減らすことができます。これは、レンダラとその他のオプションコードの両方がデフォルトで含まれているためです。レンダラは1つだけ必要です。オプションのコードを使用しないので、定義でプロパティを設定することで、使用しないものを除外できます。そのために、上記の設定（config）に define セクションを追加してください：

 "define": [
  "ol.ENABLE_WEBGL=false",
  "ol.ENABLE_PROJ4JS=false",
  "ol.ENABLE_RASTER_REPROJECTION=false"
 ],

そして、ビルドスクリプトを再実行します。この時点で、ビルドサイズが前より小さくなるはずです。

■□ Debian8 で試します■□
最初に作成した ol-custom.js の名前を ol-custom.js_1 に変更します。

user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers/build$ ls
info.json  ol-custom.js  ol-custom.json  ol.ext
nob61@deb8-vmw:~/public_html/openlayers/node_modules/openlayers/build$ mv ol-custom.js ol-custom.js_1
user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers/build$ ls
info.json  ol-custom.js_1  ol-custom.json  ol.ext

ol-custom.json に上記の define セクションを追加します。

user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers/build$ vim ol-custom.json 
{
 "exports": [
  "ol.Map",
  "ol.View",
  "ol.control.defaults",
  "ol.layer.Tile",
  "ol.source.OSM"
 ],
 "compile": {
  "externs": [
   "externs/bingmaps.js",
   "externs/cartodb.js",
   "externs/closure-compiler.js",
   "externs/esrijson.js",
   "externs/geojson.js",
   "externs/oli.js",
   "externs/olx.js",
   "externs/proj4js.js",
   "externs/tilejson.js",
   "externs/topojson.js"
  ],
  "extra_annotation_name": [
   "api", "observable"
  ],
  "define": [
   "ol.ENABLE_WEBGL=false",
   "ol.ENABLE_PROJ4JS=false",
   "ol.ENABLE_RASTER_REPROJECTION=false"
  ],
  "compilation_level": "ADVANCED",
  "manage_closure_dependencies": true,
  "rewrite_polyfills": false
 }
}
ビルドを作成するために、node_modules/openlayers/ に移動して次のコマンドを使用します。

user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers/build$ cd ../
user@deb8-vmw:~/public_html/openlayers/node_modules/openlayers$ node tasks/build.js build/ol-custom.json build/ol-custom.js
info ol Parsing dependencies
info ol Compiling 345 sources
user@deb8-vmw:~/public_html/openlayers_org/node_modules/openlayers$ ls -l build/
合計 1904
-rw-r--r-- 1 user user 1495423  5月  4 14:33 info.json
-rw-r--r-- 1 user user  130772  5月  9 10:30 ol-custom.js
-rw-r--r-- 1 user user  155060  5月  4 14:34 ol-custom.js_1
-rw-r--r-- 1 user user     679  5月  9 10:25 ol-custom.json
drwxr-xr-x 2 user user    4096  5月  3 14:50 ol.ext
ol-custom.js は 130772B で、前回の 155060B より少し容量が減らされました。

■□ここまで■□


Externs

Closure ドキュメントでは、「externs」はコンパイルされるコードで使用される外部名であることを説明しています。コンパイラは、document　などのビルトインの externs を含んでいます。OpenLayers コードの externs ディレクトリは、ライブラリのいくつかの部分で使用されているそれらのすべてのファイルを含んでいます。たとえば、Bing Maps を使用する場合は、設定（config）ファイルの externs セクションで Bing externs ファイルを含める必要があります。

oli.js と olx.js は、OpenLayers API の externs ファイルです。たとえば olx.js は、OpenLayers コンストラクタオプションの外部定義を含んでいます。closure-compiler.js は、特定のコンパイラのバージョンで発生する問題を修正します。カスタムビルドを作成するときは、externs としてこれら 3 つのファイルを常に使用する必要があります。


その他のコンパイラオプション

上記の設定（config）ファイルでその他のコンパイラオプションが２つあります。manage_closure_dependencies と rewrite_polyfills が常に使用される必要があります。

名前変更レポートやマニフェストの出力、ソースマップなど、必要に応じて他のコンパイラオプションのいずれかをここで指定できます。closure-util に有効なオプションの完全なリストがあります。

build.js は、現在、出力ファイルを入力するために必要で、コンパイラからそれに出力を書き込むことに注意して下さい。js_output_file コンパイラオプションを使用しません。設定（config）ファイルでこれを指定すると、コンパイラ出力はありません、そのため、 build.js の出力ファイルは空になります。


さらに複雑な例

次に、さらに複雑な例: heatmaps-earthquakes を試してみましょう。ビルド設定ファイルは、このようになります。

{
 "exports": [
  "ol.layer.Heatmap",
  "ol.source.Vector",
  "ol.format.KML",
  "ol.layer.Heatmap#getSource",
  "ol.source.Vector#on",
  "ol.source.Vector.Event#feature",
  "ol.Feature#get",
  "ol.Feature#set",
  "ol.layer.Tile",
  "ol.source.Stamen",
  "ol.Map",
  "ol.View",
  "ol.layer.Heatmap#setRadius",
  "ol.layer.Heatmap#setBlur"
 ],
 "compile": {
  "externs": [
   "externs/bingmaps.js",
   "externs/cartodb.js",
 　　"externs/closure-compiler.js",
   "externs/esrijson.js",
   "externs/geojson.js",
  　"externs/olx.js",
   "externs/oli.js"
   "externs/proj4js.js",
   "externs/tilejson.js",
   "externs/topojson.js"
  ],
  "define": [
   "ol.ENABLE_WEBGL=false",
   "ol.ENABLE_PROJ4JS=false",
   "ol.ENABLE_RASTER_REPROJECTION=false"
  ],
  "compilation_level": "ADVANCED",
  "manage_closure_dependencies": true,
  "rewrite_polyfills": false
 }
}
出力（書き出し）は、heatmaps-earthquakes example の JavaScript コードで発生する命令でここに与えられます。この例では、ol. 関数とコンストラクタだけでなく、ol 名前空間が直接使用されない prototype メソッドを使用します。コードに、例えば vector.getSource().on() があります。これは、layer.Heatmap の getSource メソッドと source.KML の on メソッドを使用しているため、これがエクスポートされなけらばならないことを意味します。同様に、event.feature.get() は、source.Vector.Event の feature プロパティと Feature の get　メソッドを使用していることを意味します。これらの名前のいずれかが残っていれば、コンパイルは正常に完了しますが、欠落している名前はわかりにくくなり、スクリプトを実行しようとすると「property undefined[プロパティが定義されていません]」というエラーが発生します。


コードのメンテナンス

OpenLayers を Node パッケージからインストールした場合、最新のバージョンにアップグレードするために npm を使用できます。Github のリポジトリ[Github repo]をクローンした場合、単に最新コードにプルすることは十分ではありません、なので、使用されるいくつかのパッケージ、例えばコンパイラ、はアップグレードする必要もあります。npm update よりも、npm install を使用してこれを実行します。


結論

このチュートリアルは、カスタムビルドを作成するために必要な情報を与えています、すなわち、アプリケーションに合わせてビルドします。ビルド設定ファイルで使用できるビルドスクリプトとプロパティの詳細については tasks の readme を参照してください。
投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)