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

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

deck.glとは

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

まずは、美しいdeck.glのexampleをご覧ください。
https://deck.gl/#/examples/overview

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

そこで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/

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

これでOK

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

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

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

npm install --save luma.gl

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

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

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

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

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

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

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

>npm start

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

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

> 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

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

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

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

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

python -V

その後、
> npm install
>npm start

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

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

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

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

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

アカウントを作成後、

mapboxの Access Tokenページ
https://www.mapbox.com/account/access-tokens

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