投稿日:

How to build mapbox-gl-js stand-alone on Windows

実質作業メモ。Windowsでの話です。

追記

ビルド作業が初めてではない（下記本編の内容を実施済み等）場合、ツール群のインストールは不要なため、下記手順のみ行う。

  1. cmd開いて cd mapbox-gl-js （ディレクトリ移動）して
  2. SET MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN} して
  3. yarn install して（必要なら）
  4. ファイル生成
    yarn run build-prod-min　→　dist/mapbox-gl.js
    yarn run build-css　→　dist/mapbox-gl.css

本編

下記のページに手順が書いてあるので実施していきます。

mapbox-gl-js/CONTRIBUTING.md at master · mapbox/mapbox-gl-js · GitHub

必要なツール群をインストール

Install git, node.js (version 4 or greater), yarn, npm and node-gyp.

と書いてあるので、それぞれインストールしていきましょう。

git

もう入ってた。

node.js

ダウンロード | Node.js からWindows用のインストーラーをDLして実行して終わり。

Yarn 

Installation | Yarn からWindows用のStable(安定版) ver.のインストーラーをDLして実行して終わり。

npm and node-gyp.

nodejs-guidelines/windows-environment.md at master · microsoft/nodejs-guidelines · GitHub に詳しい。

  1. Windows PowerShell を管理者権限で起動
  2. npm install -g windows-build-tools を実行し、
    windows-build-tools をインストール
    ※トラブルシューティング情報も上記ページに記載あり
  3. Visual Studio Build Tools あるいは Visual Studio 2017 Community より、Visual C++ ビルド環境をインストール
  4. https://www.python.org/downloads/ よりPython2.7をインストール
  5. npm config set python python2.7 を実行
  6. npm config set msvs_version 2017 を実行

リポジトリをクローンする

git clone git@github.com:mapbox/mapbox-gl-js.git とコマンドを打ってもいいし、適当なGitHubクライアントでCloneしてもいい。

※特定のバージョンや安定版がほしい場合は、下記ページからzip等でファイルを取得する。
https://github.com/mapbox/mapbox-gl-js/releases

node moduleの依存関係をインストールする

  1. cd mapbox-gl-js （ディレクトリ移動）して
  2. yarn install を実行してインストール

warning "@mapbox/dr-ui > @mapbox/mapbox-gl-supported@1.4.1" has unmet peer dependency "mapbox-gl@>=0.32.1 <2.0.0". とかみたいなエラーが出たら、cmdを閉じて開き直してインストールコマンドを再実行すると多分解決する。

headless-gl の依存関係をインストールする

依存関係は下記。　 https://github.com/stackgl/headless-gl#windows

  • Python 2.7
    ※ 先ほどの手順でインストール済
  • Microsoft Visual Studio
    ※ Visual C++ ビルド環境がほしいだけなので先程の手順でインストール済
  • d3dcompiler_47.dll
    ※ c:\windows\system32に入っているのでOK
  • ES6　（モダンnode.js向け。オプション）
    ※ オプションなので多分不要

最終的にやりたいことは下記コマンドの通り。
copy node_modules/headless-gl/deps/windows/dll/x64/*.dll c:\windows\system32

headless-glをクローンする

stackgl/headless-gl: 🎃 Windowless WebGL for node.js をクローンする。

※特定のバージョンや安定版がほしい場合は、下記ページからzip等でファイルを取得する。
https://github.com/stackgl/headless-gl/releases

dllファイルをコピー

headless-gl\deps\windows\dll\x64\以下のdllファイルをc:\windows\system32 にコピーする。

ビルドに使うデバッグサーバの用意

mapboxアクセストークンの取得

  1. Mapbox のアカウントを作成
  2. Account | Mapbox > Tokens > Create a token からアクセストークンを作成
  3. Tokens にて、作成したトークンをコピー

デバッグサーバ起動確認

  1. cmdを起動して cd mapbox-gl-js （ディレクトリ移動） して
  2. SET MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN} を実行
    ※ここでSETした環境変数は、このセッションでのみ有効。cmdを終了すると消去される。
  3. yarn run start-debug を実行

デバッグサーバ http://localhost:9966/debug にアクセスできることを確認する。

スタンドアロンビルドを作成

以下のコマンドを実行する。
yarn run build-prod-min
yarn run build-css

dist/mapbox-gl.js と dist/mapbox-gl.css が生成されるので確認する。
HTMLではこの2つのファイルを読み込んで利用する。

余談

yarn run build-prod-min 実行時の出力が下記である。
なにやら警告？エラー？がいっぱい出ている。

mapbox-gl-js>yarn run build-prod-min
yarn run v1.19.0
$ rollup -c --environment BUILD:production,MINIFY:true

src/index.js, src/source/worker.js → rollup/build/mapboxgl...
(!) Circular dependency: src\util\ajax.js -> src\util\mapbox.js -> src\util\ajax.js
(!) Circular dependency: src\style-spec\expression\parsing_context.js -> src\style-spec\expression\compound_expression.js -> src\style-spec\expression\parsing_context.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_function.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_function.js -> src\style-spec\validate\validate_object.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_function.js -> src\style-spec\validate\validate_array.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_layer.js -> src\style-spec\validate\validate_paint_property.js -> src\style-spec\validate\validate_property.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_layer.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_light.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style\style_layer\symbol_style_layer.js -> src\data\bucket\symbol_bucket.js -> src\style\style_layer\symbol_style_layer.js
(!) Circular dependency: src\geo\lng_lat.js -> src\geo\lng_lat_bounds.js -> src\geo\lng_lat.js
(!) Circular dependency: src\source\tile.js -> src\data\feature_index.js -> src\source\source_state.js -> src\source\tile.js
(!) Circular dependency: src\index.js -> src\ui\map.js -> src\style\style.js -> src\util\global_worker_pool.js -> src\util\worker_pool.js -> src\util\browser\web_worker.js -> src\index.js
created rollup/build/mapboxgl in 11.7s

rollup/mapboxgl.js → dist/mapbox-gl.js...
created dist/mapbox-gl.js in 2s
Done in 14.43s.

「Circular dependency」って何？？
直訳すると「循環依存」 となるのでやんわりと察した。
AがBに依存し、BはAに依存しているのでウロボロスって話。

警告は出ているけど mapbox-gl.js は生成されているし、HTML側で読み込んでも（おそらく）正常に動いている（ように見える）。

とりあえず様子見。

投稿日:

PHPで複数のコンストラクタを設定する

PHPでは複数のコンストラクタを、例えば引数の数に応じて使い分けるということができません。(´ω`)

下記みたいにやりたいじゃないですか。

<?php
class A
{
　  function __construct()
    {
    }
   
    function __construct($a1)
    {
        echo('引数が1個のコンストラクタ');
    }
   
    function __construct($a1,$a2)
    {
        echo('引数が2個のコンストラクタ');
    }
   
}


でもできません。(´ω`)

「そんなの不便じゃーん」

もちろんそうですが、ググっても「できません」とかあまりいいやり方出てこなかったので、下記のPHP本家サイトに載っているコードですが、再掲させて頂きます。

https://www.php.net/manual/ja/language.oop5.decon.php

みんな！PHPの本家マニュアルサイトで大事なのは、下の方にある、

User Contributed Notes

だよ！ここ読むと、いいこと書いてあるので読み得です。
英語なのが玉にキズ。(´ω`)

<?php
class A
{
　　//要はコンストラクタを使って、引数の数でメソッド振り分けしている
    function __construct()
    {
        $a = func_get_args();
        $i = func_num_args();
        if (method_exists($this,$f='__construct'.$i)) {
            call_user_func_array(array($this,$f),$a);
        }
    }
   
    function __construct1($a1)
    {
        echo('__construct with 1 param called: '.$a1.PHP_EOL);
    }
   
    function __construct2($a1,$a2)
    {
        echo('__construct with 2 params called: '.$a1.','.$a2.PHP_EOL);
    }
   
    function __construct3($a1,$a2,$a3)
    {
        echo('__construct with 3 params called: '.$a1.','.$a2.','.$a3.PHP_EOL);
    }
}
$o = new A('sheep');
$o = new A('sheep','cat');
$o = new A('sheep','cat','dog');

// results:
// __construct with 1 param called: sheep
// __construct with 2 params called: sheep,cat
// __construct with 3 params called: sheep,cat,dog
?>
投稿日:

TestFlightで「テストするAppがありません」と表示される

App Store Connectで登録済のApple IDでサインインしているiPadでTestFlightを開くと、「テストするAppがありません」と表示されてしまいテスト用アプリをインストールできない状態でした。

設定から一旦サインアウトしてサインインしなおしてみても解決しません。

このiPadではAppleIDメール受信の設定をしていなかったので、AppleIDのメールを受信できるように設定し、App Store Connect→TestFlight→App Store Connect Usersから一旦削除・再登録して招待メールを再送信しなおしました。

届いた招待メールから「Views in TestFlight」をクリックすると、TestFlightアプリの設定が更新されたようで、無事テスト用アプリがインストールできるようになりました。

投稿日:

Android 5より下のバージョンでjava.lang.ClassNotFoundException: Didn’t find class “smart.location.admin.hogehoge.MyApplication” on pathのエラーが出る

Android5以上のスマホでは正常に立ち上がるのに、5より下のバージョン、（ここでは4.3を利用して試しています。）では

java.lang.RuntimeException: Unable to instantiate application smart.location.admin.hogehoge.MyApplication: java.lang.ClassNotFoundException: Didn't find class "smart.location.admin.hogehoge.MyApplication" on path

というエラーが一番最初のコード実行時に出て、立ち上がらなくなることがあります。

APIレベルでいうと19以下ということですね。

下記の、

64K を超えるメソッドを使用するアプリ向けに multidex を有効化する

https://developer.android.com/studio/build/multidex

というのが関係しているので、読んでみて、自分のソースコードに合うのをやってみてください。
私の場合は、gradleを変更し、MyApplication（最初に実行されるクラス）を下記のように変更したらできました。

public class MyApplication extends Application { ... }

上記を下記に変更↓

public class MyApplication extends MultiDexApplication { ... }
投稿日:

Git 自分のした変更の履歴だけ見る

書くまでもないことかもしれないけど、書かないときっと忘れるシリーズ。

自分がした変更で、

「あれ、あそこでどうやってああしたんだっけ？」

みたいなの見たいことありますよね？

2パターン紹介しておきます。

①Githubで簡単に見る方法

①見たいレポジトリを選択する

②Contributers　というところをクリック

③自分の名前の下のコミットの数のところをクリック
これは場所がわかりにくいと思うのでスクショ載せておきます。
下記の赤丸のところです。

②Gitコマンドで見る方法

上記のGithubで見る方法だと、ブランチごとでしか見れなかったりしますね…。

どこのブランチでした変更か覚えていない場合、探すのが大変です。

そんな時は、Gitコマンドでやっちゃいましょう！

git log –pretty=”%h – %s” –author=”akiko.goto”

これで、ずらずらと出てきてくれます。

ちなみに、今回は自分の名前で、ってことになってますが、もちろん

–author=”akiko.goto”

のauthorを変えれば、ほかの人の修正履歴が見れるってことです！

参考：Git の基本 – コミット履歴の閲覧