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

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

Transcript

1. Λ࡞ͬͨ ͋Δ͍͸زԿ/஍ਤܥJavaScriptϥΠϒϥϦͷ঺հ Nyoho 2016೥10݄2೔(೔) ೗๏ձ 2 (⊃ LTۦಈ։ൃ 26)
2. ࣗݾ঺հ
4. KITADAI, Yukinori ๺㝳೗๏ ▸ ͖͍ͨͩΏ͖ͷΓ ▸ ೗๏ΛԻಡΈ(༗৬ಡΈ)ͯ͠ʹΐ΄͏ ▸ Twitter: @NeXTSTEP2OSX ▸ ೗๏ձओ࠻
5. J1BE
   ޿ౡห ݕࡧ ৄ͘͠͸
6. Nyoho’s New Single! Now Online! ࠷ۙՎΛϦϦʔε͠·ͨ͠ʙ! ▸ “Theme of MaruPokeSearch” ▸ https://soundcloud.com/zej32lwarsuy/ theme-of-marupokesearch
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. 使ってみてねὑ