はじめに
Webブラウザ上で3D地図表示を行うアプリケーションのためのJavaScriptフレームワーク Cesium JS があります。Cesium JSは、WebGLを用いてWebブラウザ上で描画するためのJavaScriptライブラリで、Cesium JSを利用して3D地図表示アプリケーションを開発するには、JavaScriptとnode.jsの知識が必要となります。
初めてJavaScript言語でアプリケーションを作成するので、その環境について調べたことを記録しておきます。
Cesium JSを用いて地球の3D表示をしたデモプログラムの画面が次です。
node.js
Cesium JSは、node.jsのパッケージとして配布されています。また、Cesium JSはCDN(Content Delivery Network)で提供されているので、node.js環境を用意しなくてもHTMLファイルからネットワーク経由でCesium JSをロードすることは可能です。ですが、Cesium JS以外のパッケージも使う場合などはnode.js環境で作るのが良いのかなと推測します。
node.jsのインストール
MacOSでは、Homebrewを利用している場合、次のコマンドでnode.jsをインストールします。
~ % brew install node
node.jsでパッケージのインストール
node.jsは、パッケージ（JavaScriptで記述されたライブラリやツール）をnpm（Node Package Manager）で管理するのが標準です。
npmは、デフォルトではローカルPCの作業ディレクトリにパッケージをインストールします。ディレクトリを変更すればパッケージを新たに入れる必要があるので、作業毎にクリーンな環境を作ることができます。また、オプション-gを指定すれば、ローカルPCに共通な場所にインストールすることもできます。
Cesium JSを使ったアプリケーションを開発するディレクトリを用意し、そこにnpmを使ってCesium JSをインストールします。
work % mkdir HelloGlobe work % cd HelloGlobe HelloGlobe % nom install cesium
インストール後、ディレクトリを見ると
HelloGlobe % ls -F -1 node_modules/ package-lock.json package.json
node_modulesディレクトリの中に、Cesium JSライブラリがインストールされていました。
HTMLとJavaScriptファイルの作成
Cesium JSを用いて3D地図表示を行うには、HTMLファイル、CSSファイルおよびJavaScriptファイルを記述する必要があります。 手元のMacには、これらのコード補完が効く編集環境として、Visual Studio Code とIntelliJ IDEA Ultimateが入っているので、どちらかを使うことにします。
ローカルWebサーバーの使用
Webブラウザで実行するアプリケーションが、ローカルPC上のJavaScriptファイルをロードすることはセキュリティ的に制限されています。そのため、node.js環境でインストールしたパッケージを使うHTMLファイルをWebブラウザで直接開いて実行すると、エラーとなってしまいます。そこで、ローカルPCに簡易なHTTPサーバーを立てて、その上でアプリケーションをWebブラウザに実行させるようにします。
node.jsでweb サーバーを探すと、express等のhttpサーバー構築用フレームワークが出てきますが、今回はhttpサーバーを作りたいのではなく、HTML、JavaScriptファイルをWebサーバー経由でWebブラウザ上で動かしたいので、出来合いのhttpサーバーを使います。
http-serverパッケージのインストール
node.jsでインストールし実行可能な出来合いのHTTPサーバーとして http-serverを使用します。
~ % npm install -g http-server
-gオプションを指定し、共通のディレクトリにインストールします。
http-serverの実行
HelloGlobe % http-server Starting up http-server, serving ./ http-server version: 14.1.1 : Available on: http://127.0.0.1:8080 http://192.168.133.101:8080 Hit CTRL-C to stop the server
デフォルトでは、カレントディレクトリをルートとしてポート8080でhttpサーバーを実行します。
