JavaScript で キャッシュつき地図

ふじむら ひでのり（Solo）

1

JavaScript• ブラウザの言語（ブラウザあるところ処理系あり）

• HTML5に最もストレートにアクセスできる言語

• GeoLocationとかだけではなく、WebSQLとかも

• HTML/CSSと一心同体。UIとか強い

• 非同期HTTP通信は当たり前。Proxy通過当たり前。

• github 文化と相性高い（Fork me!）

• ブラウザのアップデートが楽しみになる！（但し人柱体質に限る）

2

http://handygeospatial.github.io/mapsites/2013/11/01/

住所検索

http://handygeospatial.github.io/mapsites/2013/11/01/

レイヤ選択 ※地理院タイル対応済

GeoLocation

http://handygeospatial.github.io/mapsites/2013/11/01/

何の変哲もない Leaflet ウェブ地図ですが…

http://handygeospatial.github.io/mapsites/2013/11/01/

MavericksのSafariでは落ちます （最近のアップデートで発生）

http://handygeospatial.github.io/mapsites/2013/11/01/

マルチタスクから切り替える場合に頻発

“iOS 7 を落とすこともできます”

http://handygeospatial.github.io/mapsites/2013/11/01/

ChromeならOK FirefoxならOK

http://handygeospatial.github.io/mapsites/2013/11/01/

http://handygeospatial.github.io/mapsites/2013/11/01/

http://handygeospatial.github.io/mapsites/2013/11/01/

地図タイルを dataスキームURLにして WebSQLかIndexedDBに

キャッシュします

http://handygeospatial.github.io/mapsites/2013/11/01/

http://handygeospatial.github.io/mapsites/2013/11/01/

http://handygeospatial.github.io/mapsites/2013/11/01/

空間的局所性を活用して ウェブ地図の 体感速度を向上

マルチレイヤ拡張した程度http://handygeospatial.github.io/mapsites/2013/11/01/

今後の計画

.leaflet-container{

background: #fff;

-webkit-filter: grayscale(100%) blur(0.2px) invert(100%);

}

http://handygeospatial.github.io/mapsites/2013/11/01/

CSS

今後の計画

http://handygeospatial.github.io/mapsites/2013/11/01/

今後の計画

機内や寝床での 地図のチェックに

最適

http://handygeospatial.github.io/mapsites/2013/11/01/

【偏見】いまGeoでJavaScriptを学ぶなら

• 「お勉強」しすぎない（ECMAScriptとは?）

• Ruby系スタイルで（noCamelCasePlease）

• サーバサイドと同時に勉強しない（S3とかで静的に）

• ウェブのラチ外で処理しておくべきことを峻別

• Leaflet がお手本になりそう

http://handygeospatial.github.io/mapsites/2013/11/01/