deck.glの開発環境をdockerで構築する
概要
deck.glというUberで開発されているWebGLを使ったデータ可視化ライブラリがあります。
こんな感じの可視化ができてとても格好いいです。地図にデータをマッピングして可視化するのが得意な印象です。
そんなわけでdeck.gl使いたいなあと思っていたんですが、nodeとか色々インストール必要なため、どうせならdockerで開発環境を作ってしまおうということでやりました。
作成した開発環境の使い方
リポジトリに上げています。
Dockerが必要なのでインストールしてください。あとはmapboxのapiを使って地図部分を描写するのでapiトークンを取得してください。mapboxのapiは上限ありますが無料のようです。
次にふたつの利用パターンに沿って説明します。
1.サンプルコードを動かす
まずはクローンします。
git clone https://github.com/RottenFruits/decker.git cd decker
app/app.jsにmapboxのapiトークンを記入してください。13行目辺りです。
mapboxgl.accessToken = 'your token'
dockerイメージをビルドしてコンテナを立ち上げます。そうすると色々ビルド走るので終わるまで待ってください。
docker build -t decker . docker run --rm -p 8800:8000 decker
終わったらlocalhostを開いてください。
以下のような東京のあたりに赤丸が表示される画面が出てきたら成功です。
2.オリジナルのアプリ開発
次にオリジナルアプリを開発したい場合の使い方の説明です。
クローンは同じです。
git clone https://github.com/RottenFruits/decker.git cd decker
ビルドまでは同じですが、コンテナ起動の仕方を変えます。
docker build -t decker . docker run --rm -p 8800:8000 -v your_volume_path:/app decker /bin/sh
-vのオプションのあとに自分が開発に使いたいフォルダを指定します。
ゼロからコードを書いていくのもいいのですが、webpack.config.js、package-lock.json、package.jsonのファイルが必要になるので結構煩雑です。
したがって個人的には基本的にappフォルダ内のファイルをコピペして拡張しながら開発することを推奨します。
開発した結果を見たい場合は以下のコマンドでビルドします。
npm start
終わったらlocalhostを開いて確認してください。
終わりに
今回はdockerでdeck.glの開発環境を構築したリポジトリを説明しました。
なにか不明点等ありましたらご連絡ください。
