Edited at

deck.gl の始め方 インストールから。


deck.glとは

UBER が手掛けた WebGL 製のマップ&データビジュアライズフレームワークで、情報の可視化に最適です。

まずは、美しいdeck.glのexampleをご覧ください。

https://deck.gl/#/examples/overview

deckgl_example.PNG

こんなの作ってみたい!!!!!

そこでdeck.gl についての記事を検索。

「deck.glを試す」

https://qiita.com/sugasaki/items/d3a0276c52120e0db976

この記事自体は良記事なのだが、いろいろショートカットしているところもあり、わからない!ということで、今回記事にまとめます。

windowsで deck.gl の環境構築をおこなってみた。


0. deckglのソースをダウンロード

GitHubから、右側にある"clone or download"ボタンより、download.ZIP を選択し、deckglのソースをダウンロードして、任意のフォルダに展開しよう。

公式サイト

https://github.com/uber/deck.gl

しかし、deckglをgithubからダウンロードすれば、すぐに使い始められるわけではない。


その他にインストールするもの


1. Node.js

JavaScript は、もともとブラウザー側で解釈して、実行するクライアントサイドの言語である。Node.js を使うとローカル上で JavaScript 環境を構築できる。deckglはローカルサーバーを立てて、そこで処理を行い描画するため、Node.jsが必要になります。

公式サイト「Node.jsとは」→ https://nodejs.org/ja/about/


2. luma.gl

High-performance WebGL2 components for GPU-powered data visualization and computation.

とあり、データビジュアライゼーションなど高パフォーマンス用のレンダリングエンジンである。

公式サイト → https://luma.gl/#/


3. deck.gl

luma.gl上で動く情報可視化ライブラリで、今回の核となるファイル。


4. react

ページ状態を保持している「プレーンなJSのオブジェクト」に、「テンプレート的な関数」を作用させて、「仮想DOM」と呼ばれるDOMの設計図を取り出し、その設計図を使って本物のDOMを構築する。

ちょっと何言ってるかわからないので、Reactについて詳しくは以下の記事をご覧ください。

https://qiita.com/naruto/items/fdb61bc743395f8d8faf

1 ~ 4を順を追って、インストールしていきましょう。


1. Node.jsのインストール

公式ダウンロードサイトから自分の環境に合うものをダウンロード。今回は windows Installer (64bit)

https://nodejs.org/en/download/

nodejs.png

ダウンロードしたインストーラーをクリックすると、インストールが始まります。

nodejs_start.png

これでOK


2. luma.gl のインストール

Node.js のコマンドプロンプトから、npmを実行します。

なので、通常のコマンドプロンプトではなく、以下のように Node.js command prompt を使ってください。

Nodejscomand.png

npm install --save luma.gl


3. deck.gl 4. react のインストール

GitHubからダウンロードしたファイルの

C:\Users\xxxx\deck.gl-master\examples\website

のフォルダにあるものから一つ好きなものを選ぼう。ここでは、3d-headmap を例に進めます。

フォルダ.PNG

3d-headmapフォルダの中に、package.json ファイルがあることを確認。そして、コマンドプロンプトで当該ディレクトリに移動し、 > npm install を実行

ここで、3つ目のdeck.gl, 4つ目のreactがインストールされる。

その後、errorなくinstallされたことを確認。

>npm start

でjavascript環境が構築されれば、以下のような画が表示される。うまく表示された方は、

「Mapboxのアカウント作成と Access Tokenの取得」まで読み飛ばしてください。

access_token_入力前.PNG


> npm install にてエラー発生

私の場合、エラーが発生してしまったので、その後の対処について記述します。

> npm install を実行時に、errorが発生した。

エラーコードを見てみると、pythonに関するエラーが出ていました。

そもそもpythonが入っているのか確認のために、

>Python -V 

とバージョンの確認を行ったところ、pythonが入っていないことがわかった。


4.1 pythonをダウンロード

ここでPython公式サイトよりダウンロード。

(注意)python3ではエラーが出てしまったので、python2の最新版をインストールします。

インストール完了後、再度バージョンの確認。

>Python -V 

しかし、認識されていない。


4.2 環境変数にてPathを通す

コマンドプロンプトにて、cd C:¥ にて、>dir でファイルを表示させると、

Python27

しかし、認識されていなかったのでパスを通す。

コントロール パネル\システムとセキュリティ\システム\システムの詳細

環境変数.PNG

Cの直下に置かれていたので、パスを通しました。

環境変数_02.PNG

ここで、もう一度、コマンドプロンプトでPythonのバージョン確認。


python -V


その後、

> npm install

>npm start

でjavascript環境が構築されれば、以下のような画が表示される。

access_token_入力前.PNG


5. Mapboxのアカウント作成と Access Tokenの取得。

Mapboxとはウェブサイト、アプリ向けカスタムマップを提供するアメリカサンフランシスコの会社です。

元となる地図は、OpenStreetMapなので、著作権フリーで利用することができます。

無料で利用することも可能ですが、アクセス数が増えた場合はCOMMERCIALプランの契約が必要になるので、ご注意ください。詳しい料金体系についてはMapboxのPlans & Pricingページをご確認ください。

アカウントを作成後、

mapboxの Access Tokenページ

https://www.mapbox.com/account/access-tokens

さきほどまで作業していたディレクトリの

app.js をeditorで開き以下の部分にAccess Tokenを貼り付けてください。

例:const MAPBOX_TOKEN = "XXXXXXXXXXXXXXXXXXXX"; (Xに取得したAccess Token)

スクリーンショット 2018-11-16 11.05.33.png

そして、保存してブラウザを更新すればマップが表示されます。

成功例PNG.PNG

これで、deck.glが動作する環境作りができた。