Retroscope by leaflet

Presented at FOSS4G Tokyo 2015.

Introducing retroscope and leaflet-tilelayer-mask plugin.
Quick demo : http://frogcat.github.io/retroscope/

Transcript

1. Retroscope by leaflet 2015-10-12 Yuzo Matsuzawa 2015/10/12 1 FOSS4G Tokyo 2015
2. 2015/10/12 2 https://github.com/frogcat
3. 2015/10/12 3 Menu 1: Retroscope のご紹介 2: Retroscope の開発経緯 3: 今後の展開
4. 1: Retroscope のご紹介 Retroscope by leaflet 2015/10/12 4
5. Retroscope 2015/10/12 5 http://frogcat.github.io/retroscope/
6. 2015/10/12 6
7. Retroscope の構成 2015/10/12 7 Leaflet 0.7.3 leaflet-tilelayer 地理院タイル オルソ画像 leaflet-tilelayer-mask (leaflet plugin, js) 歴史的農業環境閲覧システム 迅速測図タイル Retroscope UI (HTML +js +css) 拡張 Open Data Open Data OSS
8. ライブラリ: leaflet 2015/10/12 8 http://leafletjs.com
9. プラグイン: leaflet-tilelayer-mask 2015/10/12 9 https://github.com/frogcat/leaflet-tilelayer-mask
10. 背景タイル: 地理院タイル 2015/10/12 10 http://maps.gsi.go.jp/development/ichiran.html
11. 前景タイル: 歴史的農業環境閲覧システム 2015/10/12 11 http://habs.dc.affrc.go.jp/
12. フロントエンド: Retroscope 2015/10/12 12 • HTML (60行) • Web サーバにおけば OK • 初期表示位置、ズーム、タ イル URL を変更する • 難易度: Hello world +α http://frogcat.github.io/retroscope/
13. 地図に関わるみなさんへ 2015/10/12 13 • FOSS4G とオープンデータを応用した 地図比較表現の新手法 • オープンな地図タイルを公開の際は是非 ご活用ください
14. 2: Retroscope の開発経緯 あるソーシャルコーディングの事例 2015/10/12 14
15. Retroscope ができるまで 2015/10/12 15 会社で Facebook 上 の地図比較ネタを教 えてもらう 着想 GitHub アカウント 作成 GitHub レポジトリ 作成 円型クリップ Webkit 限定 クロスブラウザ Internet Watch で とりあげられる Leaflet-tilelayer- mask プラグイン Leaflet に Pull request & merge CSS clip-path CSS mask SVG mask Leaflet plugin これじゃ ない ブラウザ しばり 汎用化 満足 ソーシャルコーディング!?
16. Version 0.1: CSS clip-path 2015/10/12 16 http://caniuse.com/#search=clip-path 使用不可 制限あり
17. 2015/10/12 17 • IE に対応していない • 境界がくっきりしているのが気になる
18. Version 0.2: CSS mask 2015/10/12 18 http://caniuse.com/#search=mask
19. 2015/10/12 19 • ぼんやりさせた • Webkit 系ブラウザしか対応しない
20. Version 0.3: SVG (basic support) 2015/10/12 20 http://caniuse.com/#search=svg 使用可能
21. 2015/10/12 21 • IE, Firefox でもぼんやり
22. 2015/10/12 22 http://internet.watch.impress.co.jp/docs/yajiuma/20150522_703119.html
23. Version 1.0 leaflet-tilelayer-mask 2015/10/12 23 • 再利用しやすいようにプラグイン化 • カスタマイズしやすいように汎用化 • MIT ライセンスで公開 https://github.com/frogcat/leaflet-tilelayer-mask
24. 2015/10/12 24 • デフォルト：円型ぼんやりマスク • 自前のマスク画像でのエフェクトもOK http://frogcat.github.io/leaflet-tilelayer-mask/custom/
25. 2015/10/12 25 http://leafletjs.com/plugins.html Contribute
26. 開発者のみなさんへ 2015/10/12 26 ソーシャルコーディングはたのしい • まずは GitHub アカウント • どんどん作って公開しよう いざというときに再利用できるように • ライセンスはオープンに • プラグインなどの形式で • ドキュメントも用意 → 結果的に FOSS4G に貢献することに
27. 2015豪雨被害地区の前後比較サイト by 国土地理院 2015/10/12 27 • GitHub で公開 https://github.com/gsi-cyberjapan/cmp/
28. 2015/10/12 28 https://github.com/gsi-cyberjapan/cmp/issues/2 • IE では動かないという問題があった
29. 2015/10/12 29 • IE9 でも動くようなプラグインを作成・公開 • 国土地理院の GitHub レポジトリに Pull Request https://github.com/frogcat/leaflet-tilelayer-clip
30. 2015/10/12 30 Leaflet-tilelayer-clip • 比較サイトが IE9 に対応
31. 3: 今後の展望 ベクトルタイルに向けての布石 2015/10/12 31
32. Retroscope の着想 2015/10/12 32 • SVG Mask が原点 • スペック上実現できることはわかっていた • しかし「ブラウザ限定」では意味がない • 2014年4月9日 • Windows XP (IE8) のリタイア • SVG の機能がどのブラウザでも
33. 次のターニングポイント 2015/10/12 33 • 2016年1月12日 • 最新版以外の IE がサポート終了 • 実質的に IE9 がリタイア • Cross Origin Resource Sharing • ベクトルタイルのための最重要技術 • IE9 に起因する CORS の制限解除 • ベクトルタイル のための環境が整う
34. Cross-Origin Resource Sharing 2015/10/12 34 http://caniuse.com/#search=CORS
35. 2015/10/12 35 Follow @frogcat on GitHub