Leafletのカスタム化とLeafletに足突っ込もうとしたけどやめたたったひとつの理由

前半を書いていた時点でこんなことになろうとは…。

ライトなJavaScript地図アプリケーション用ライブラリです。モバイルで使うんだったらライトであればあるほど良い。手持ちのIS-03は常にもっさりなのです。
さらにカスタムビルドをすることで、よりいっそうスリム化するという。どうですかおくさん!

ということで、ちょっと手を染めてみようということになりました。

http://leaflet.cloudmade.com から落として、ZIPなので解凍します。

カスタムビルドしないんだったら leaflet.js, leaflet.css, leaflet.ie.css, images/ を持って行けばOK。

node.js を http://nodejs.org/ から導入します。
"npm"というコマンドが付いてくるので、これを使って、いろいろインストールします。

npm install -g jake
npm install jshint
npm install uglify-js

(ソース)/build/build.html を JavaScript有効で開きます。
導入したい機能のチェックボックスをオンにしていきます。
末尾にテキストボックスが出て

jake build[...]

といったコマンドが入っていると思いますので、これをコピーして、コマンドラインにペーストしてやります。ブラウザ側では引数を作成するまでで、実際のビルドは、コマンドラインにまかせているわけです。
なお、カレントディレクトリはソースディレクトリのルートです。

(ソース)/dist/leaflet-custom.js に生成されるので、あとは好きにします。

ちなみに、ベクタデータは今回全く使わないのでばしばし消してやると、オリジナル104Kに対して、カスタムは54Kになりました。

ためしにAndroidアプリとして、WebViewをくっつけただけのActivityを作って、loadurlをする、というやり方で、アプリっぽいのを作ってみました。

しかしここからが問題。

スクリプトはロードされました。タイルもロードしているっぽいのですが、謎のグレーの「何か」で隠されます。タイルがときどき端っこに見えるようなかんじ。で、拡大・縮小を行うと、その「何か」が消え、その後は正常に動作します。

この問題、デスクトップでやってても全く発生しませんでした。このため、デスクトップで概ねバグをつぶして充実感いっぱいなだけにダメージが通常より大きめ。

この時点でOpenLayersに流れることになりました。残念。この問題が無ければそのまま突き進んでいたのですが、この問題はもうどうしようもないです。

それはそれとして、他にもうちょっと試してみました。

某サイトにLeafletのサンプルコードが書かれてて、ウェブページに貼り付けられています。そこにアクセスしてみたところ、IS-03はアウト、Galaxy Tab 10もアウト、Iconiaのなんだったかはセーフ、というかんじでした。

ということは、実行速度が極端に遅いために、開発者の思った通りの順序で実行されないのが原因でないかと。バージョンの違いが影響している可能性もありますし、CPUパワーが影響している可能性もあります。