javascriptでキャッシュつき地図(geo x codeライトニングトーク)
DESCRIPTION
FOSS4G 2013 Tokyo テクニカルセッション GEO x CODE ライトニングトークTRANSCRIPT
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/