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

まるポケサーチを作った。あるいは幾何・地図系JavaScriptライブラリの紹介

853cd87b5c317b8c16b0e78c2efbf8d1?s=47 北䑓如法
October 02, 2016

 まるポケサーチを作った。あるいは幾何・地図系JavaScriptライブラリの紹介

如法会 2 において、「まるポケサーチを作った」 (あるいは幾何・地図系JavaScriptライブラリの紹介) を発表しました。2016年10月2日(日)

853cd87b5c317b8c16b0e78c2efbf8d1?s=128

北䑓如法

October 02, 2016
Tweet

More Decks by 北䑓如法

Other Decks in Technology

Transcript

  1. Λ࡞ͬͨ ͋Δ͍͸زԿ/஍ਤܥJavaScriptϥΠϒϥϦͷ঺հ Nyoho 2016೥10݄2೔(೔) ೗๏ձ 2 (⊃ LTۦಈ։ൃ 26)

  2. ࣗݾ঺հ

  3. None
  4. KITADAI, Yukinori ๺㝳೗๏ ▸ ͖͍ͨͩΏ͖ͷΓ ▸ ೗๏ΛԻಡΈ(༗৬ಡΈ)ͯ͠ʹΐ΄͏ ▸ Twitter: @NeXTSTEP2OSX

    ▸ ೗๏ձओ࠻
  5. J1BE޿ౡห ݕࡧ ৄ͘͠͸

  6. Nyoho’s New Single! Now Online! ࠷ۙՎΛϦϦʔε͠·ͨ͠ʙ! ▸ “Theme of MaruPokeSearch”

    ▸ https://soundcloud.com/zej32lwarsuy/ theme-of-marupokesearch
  7. None
  8. None
  9. None
  10. ·Δϙέαʔνͱ͸ ▸ ਓؾҐஔήʔ Pokémon GO Ͱɺ ▸ ൒ܘ 200 m

    ͷԁΛͨ͘͞Μඳ͖ɺ ▸ ଘࡏ෦෼ͷڞ௨෦෼ͱআ֎෦෼ͷ࿨ू߹ͷ ࠩू߹Λදࣔ͢Δ!
  11. ςΩετ ਺ֶతʹ͸ Λදࣔ͢Δ΢ΣϒΞϓϦ

  12. PVͰ࢖͍ํઆ໌ https://www.youtube.com/ watch?v=PUprUK6InvQ

  13. ศརͩͳ

  14. Using pure HTML, pure CSS & pure JavaScript ▸ ͳΜͱͳ͘ؾ෼స׵ʹɺٱʑʹੜͷHTML,

    CSS, JavaScriptͰ࡞ͬͯΈͨɻ ▸ ҎԼɺಛʹJavaScriptͰษڧʹͳͬͨ͜ͱ
  15. JavaScript: ࠓճ ษڧʹͳͬͨ͜ͱ

  16. CookieΛอଘ͢Δ ▸ https://github.com/js-cookie/js-cookie ▸ ࢖͏ͷ؆୯ɻ Cookies.set('key', value); Cookies.get(‘key'); var areasInCookies

    = Cookies.getJSON('areas'); ▸ ศརɻ
  17. JSTS ▸ https://bjornharrtell.github.io/jsts/ ▸ زԿϥΠϒϥϦɻ ▸ ฏ໘ͷྖҬͷڞ௨෦෼ɺ࿨ू߹ɺࠩू߹ͳͲΛܭࢉ ͯ͘͠ΕΔɻ var factory

    = new jsts.geom.GeometryFactory(); factory.createPolygon(factory.createLinearRing(path2JTS(circl ePath(area.object)))); area2.intersection(area1); area2.difference(area1);
  18. Leaflet ▸ http://leafletjs.com ▸ an open-source JavaScript library for mobile-friendly

    interactive maps ▸ ஍ਤͷGoogle MapsͷMarkerͳͲ͚ͩͰ ͳ͘ɺখؾຯ͍͍ػೳ੝Γͩ͘͞Μɻ ▸ νϡʔτϦΞϧ͕ͱͯ΋͍͍ΑɻݟͯΈͯɻ
  19. Polyfill ▸ http://polyfill.io ▸ <script src=“https://cdn.polyfill.io/v2/polyfill.min.js? features=fetch,requestAnimationFrame,Element.prototype.classLis t,URL"></script> ▸ ͱHTMLʹॻ͍͓ͯ͘ͱ

    fetch ͕࢖͑ͳ͍ϒϥ΢ βͰ fetch Ͱ͖ΔΑ͏ʹͳΔ ͳͲ ▸ ͬ͘͞ͱϞμϯϥΠϒϥϦ͔͍͍ͭͨͱ͖ʹศར ͩͳɻ(ࠓճ͸leafletΛ࢖͍͔ͨͬͨ)
  20. ͋ͱ͸JavaScriptͷجຊΛษڧͨ͠ ▸ ArrayΛؔ਺ܕͬΆ͘ .map ͍ͨ͠ → Ͱ͖Δ
 // ྫ jstsܗࣜͷύεΛGoogle

    Mapsͷܗࣜʹม׵͢Δ
 var coords = jstsPath.getCoordinates().map(function(a) {
 return {lat: a.x, lng: a.y};
 }); ▸ ArrayΛؔ਺ܕͬΆ͘ .reduce ͍ͨ͠ → Ͱ͖Δ ▸ ArrayΛؔ਺ܕͬΆ͘ .filter ͍ͨ͠ → Ͱ͖Δ ▸ ੲͷBASIC೴ͳfor-loopճ͠͠ͳͯ͘Α͘ؾ͍͍࣋ͪ!
  21. ςʔϚۂʹͭ ͍ͯ

  22. ςʔϚۂ ▸ GarageBandͰ࡞ۂ ▸ Drummer͕ͱͯ΋ศར (Demo) ▸ ϝϩσΟ͸ଉࢠ(5)τϥοΫ΋͋Γ ▸ ίʔϥε͸جຊ3࿨ԻͰࠨӈʹ

    ▸ ʮαʔνʯ͕΍͸3τϥοΫɻ෉්Ͱ6ਓ
  23. ࠷ޙʹ

  24. ςΩετ Ґஔήʔͷ୉ޣຯ from an old WILLCOMer ▸ ୳ָ͢͠͞ ▸ +

    ஌Βͳ͍ͱ͜Ζʹߦָ͘͠͞ ▸ + ஌͍ͬͯΔ͸ͣͷ৔ॴͷ࠶ൃݟͷָ͠͞ ▸ ☑NianticͷαʔόͷAPIΛୟ͍ͯϙέϞϯͷҐஔΛ஌Δ πʔϧͰ͸ɺ͜ͷָ͠͞͸ಘΒΕͳ͍ɻ୳͢ ▸ ☑πʔϧΛ࢖ͬͯ΋ָ͠Έ͸ຯΘ͑Δɻͦ͏ɺ·Δϙέ αʔνͳΒͶɻ(஍ਤΛยखʹ୳͍ͯ͠Δঢ়ଶ)
  25. ௥ه ▸ ؼΓʹ @mu2in ͘Μ͕·ΔϙέαʔνΛ ࢖ͬͯϋΫϦϡ΢Λݟ͚͍ͭͯͨΐ!

  26. ௥ه ▸ Θ͠΋ؼΓʹ·ΔϙέαʔνΛ࢖ͬͯϛχ Ϧϡ΢Λั·͑ͨΐ!

  27. 使ってみてねὑ