JavaScript で
キャッシュつき地図
ふじむら ひでのり(Solo)

1
JavaScript
•

ブラウザの言語(ブラウザあるところ処理系あり)

•

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

•

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

•

HTML/CSSと一心同体。UIとか...
http://handygeospatial.github.io/mapsites/2013/11/01/

住所検索

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

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

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

http://handygeospatial.github.io/mapsites...
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/mapsit...
マルチレイヤ拡張した程度
http://handygeospatial.github.io/mapsites/2013/11/01/
今後の計画
CSS
.leaflet-container{	
background: #fff; 	
-webkit-filter: grayscale(100%) blur(0.2px)
invert(100%);	
}

http://ha...
今後の計画

http://handygeospatial.github.io/mapsites/2013/11/01/
今後の計画

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

http://handygeospatial.github.io/mapsites/2013/11/01/
【偏見】いまGeoでJavaScriptを学ぶなら
•

「お勉強」しすぎない(ECMAScriptとは?)

•

Ruby系スタイルで(noCamelCasePlease)

•

サーバサイドと同時に勉強しない(S3とかで静的に)

•
...
JavaScriptでキャッシュつき地図(GEO x CODEライトニングトーク)
Upcoming SlideShare
Loading in...5
×

JavaScriptでキャッシュつき地図(GEO x CODEライトニングトーク)

917

Published on

FOSS4G 2013 Tokyo テクニカルセッション GEO x CODE ライトニングトーク

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
917
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScriptでキャッシュつき地図(GEO x CODEライトニングトーク)

  1. 1. JavaScript で キャッシュつき地図 ふじむら ひでのり(Solo) 1
  2. 2. JavaScript • ブラウザの言語(ブラウザあるところ処理系あり) • HTML5に最もストレートにアクセスできる言語 • GeoLocationとかだけではなく、WebSQLとかも • HTML/CSSと一心同体。UIとか強い • 非同期HTTP通信は当たり前。Proxy通過当たり前。 • github 文化と相性高い(Fork me!) • ブラウザのアップデートが楽しみになる!(但し人柱体質に限る) 2
  3. 3. http://handygeospatial.github.io/mapsites/2013/11/01/ 住所検索 レイヤ選択 ※地理院タイル対応済 GeoLocation http://handygeospatial.github.io/mapsites/2013/11/01/
  4. 4. http://handygeospatial.github.io/mapsites/2013/11/01/ 何の変哲もない Leaflet ウェブ地図ですが… http://handygeospatial.github.io/mapsites/2013/11/01/
  5. 5. MavericksのSafariでは落ちます (最近のアップデートで発生) http://handygeospatial.github.io/mapsites/2013/11/01/
  6. 6. iOS 7 を落とすこともできます マルチタスクから切り替える場合に頻発 http://handygeospatial.github.io/mapsites/2013/11/01/
  7. 7. ChromeならOK FirefoxならOK http://handygeospatial.github.io/mapsites/2013/11/01/
  8. 8. http://handygeospatial.github.io/mapsites/2013/11/01/ http://handygeospatial.github.io/mapsites/2013/11/01/
  9. 9. 地図タイルを dataスキームURLにして WebSQLかIndexedDBに キャッシュします http://handygeospatial.github.io/mapsites/2013/11/01/
  10. 10. http://handygeospatial.github.io/mapsites/2013/11/01/ 空間的局所性を活用して ウェブ地図の 体感速度を向上 http://handygeospatial.github.io/mapsites/2013/11/01/
  11. 11. マルチレイヤ拡張した程度 http://handygeospatial.github.io/mapsites/2013/11/01/
  12. 12. 今後の計画 CSS .leaflet-container{ background: #fff; -webkit-filter: grayscale(100%) blur(0.2px) invert(100%); } http://handygeospatial.github.io/mapsites/2013/11/01/
  13. 13. 今後の計画 http://handygeospatial.github.io/mapsites/2013/11/01/
  14. 14. 今後の計画 機内や寝床での 地図のチェックに 最適 http://handygeospatial.github.io/mapsites/2013/11/01/
  15. 15. 【偏見】いまGeoでJavaScriptを学ぶなら • 「お勉強」しすぎない(ECMAScriptとは?) • Ruby系スタイルで(noCamelCasePlease) • サーバサイドと同時に勉強しない(S3とかで静的に) • ウェブのラチ外で処理しておくべきことを峻別 • Leaflet がお手本になりそう http://handygeospatial.github.io/mapsites/2013/11/01/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×