mapbox

Mapbox 入門日記（１）環境構築

Mapbox 入門日記（１）環境構築

Mapboxについて

前から気になっていましたが、今回は本気で勉強することになりした。

Mapboxはwebglを活用して、vectortileなどのデータをブラウザで高速に描画するライブラリです。
使うには事前に登録とトークンが必要です。

環境構築

やり方はlinuxのVMにmapbox-gl-jsをインストールし、vscodeのRemote Developmentを使て
コードを読んだり、修正したり、テスト実行したりるす。

VMはvirtualboxでUbuntu64_18.04を入れました。

本家マニュアル
https://github.com/mapbox/mapbox-gl-js/blob/master/CONTRIBUTING.md

本家githubにも書いてありますが、こちらのやり方は下記の通りです。

rootユーザで実行しました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#Install lib
apt-get update
apt-get install build-essential git nodejs libglew-dev libxi-dev


#Install yarn
curl -o- -L https://yarnpkg.com/install.sh | bash


#Install clone
git clone git@github.com:mapbox/mapbox-gl-js.git

cd mapbox-gl-js
yarn install

vscodeの設定

Remote Development

Remote DevelopmentのExtensionをインストールします。
手順はネットでいっぱいあるため割愛します。

Remote Developmentを使って、linuxにつなぐため
C:/Users/{user}/.ssh\configファイルに
下記のような設定を追加する。

1
2
3
4
5
6
Host vbox.ubuntu64_18_14
    User root
    HostName xxx.xxx.xxx.xxx
    Port 22
    IdentityFile C:/Users/{user}/.ssh/key.file
    BatchMode yes

key.fileやIPを自分の環境と合わせて変更してください。

flowtype

Remote Developmentよりubuntu64_18_14に接続出来たら、cloneしたmapbox-gl-jsフォルダを開きます。

maxbox はflowtypeを使って開発されています。
そのため、リモートワークスペースにvscodeのExtension
「Flow Language Support」と「vscode-flow-ide」をインストールします。

ディフォルトのvscodeではエラーいっぱい出ますのでjavascript.validate.enableの設定をfaseにする。

setting.json

"javascript.validate.enable": false

debug

debug起動

1
2
3
4
5
6
7
8
9
10
#token作成
MAPBOX_ACCESS_TOKEN=yourkey yarn run build-token

#コード修正後または起動前にはビルドコマンドでコンパイルする。
yarn run build-dev

#サーバーを起動する。
yarn run start-server

#起動後はhttp://xxx.xxx.xxx.xxx:9966/debug にアクセスして確認できる。

終り

ひとまず、環境が整えました。これからはコードを分析したり、カスタマイズ
したりして、理解を深めていきたいと思います。