Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Retroscope by leaflet

Retroscope by leaflet

Presented at FOSS4G Tokyo 2015.

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

19e790c76b806fb479a00b87cc0a5e30?s=128

Yuzo Matsuzawa

October 12, 2015
Tweet

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