Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

J1BE޿ౡห ݕࡧ ৄ͘͠͸

Slide 6

Slide 6 text

Nyoho’s New Single! Now Online! ࠷ۙՎΛϦϦʔε͠·ͨ͠ʙ! ▸ “Theme of MaruPokeSearch” ▸ https://soundcloud.com/zej32lwarsuy/ theme-of-marupokesearch

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

·Δϙέαʔνͱ͸ ▸ ਓؾҐஔήʔ Pokémon GO Ͱɺ ▸ ൒ܘ 200 m ͷԁΛͨ͘͞Μඳ͖ɺ ▸ ଘࡏ෦෼ͷڞ௨෦෼ͱআ֎෦෼ͷ࿨ू߹ͷ ࠩू߹Λදࣔ͢Δ!

Slide 11

Slide 11 text

ςΩετ ਺ֶతʹ͸ Λදࣔ͢Δ΢ΣϒΞϓϦ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

ศརͩͳ

Slide 14

Slide 14 text

Using pure HTML, pure CSS & pure JavaScript ▸ ͳΜͱͳ͘ؾ෼స׵ʹɺٱʑʹੜͷHTML, CSS, JavaScriptͰ࡞ͬͯΈͨɻ ▸ ҎԼɺಛʹJavaScriptͰษڧʹͳͬͨ͜ͱ

Slide 15

Slide 15 text

JavaScript: ࠓճ ษڧʹͳͬͨ͜ͱ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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);

Slide 18

Slide 18 text

Leaflet ▸ http://leafletjs.com ▸ an open-source JavaScript library for mobile-friendly interactive maps ▸ ஍ਤͷGoogle MapsͷMarkerͳͲ͚ͩͰ ͳ͘ɺখؾຯ͍͍ػೳ੝Γͩ͘͞Μɻ ▸ νϡʔτϦΞϧ͕ͱͯ΋͍͍ΑɻݟͯΈͯɻ

Slide 19

Slide 19 text

Polyfill ▸ http://polyfill.io ▸ ▸ ͱHTMLʹॻ͍͓ͯ͘ͱ fetch ͕࢖͑ͳ͍ϒϥ΢ βͰ fetch Ͱ͖ΔΑ͏ʹͳΔ ͳͲ ▸ ͬ͘͞ͱϞμϯϥΠϒϥϦ͔͍͍ͭͨͱ͖ʹศར ͩͳɻ(ࠓճ͸leafletΛ࢖͍͔ͨͬͨ)

Slide 20

Slide 20 text

͋ͱ͸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ճ͠͠ͳͯ͘Α͘ؾ͍͍࣋ͪ!

Slide 21

Slide 21 text

ςʔϚۂʹͭ ͍ͯ

Slide 22

Slide 22 text

ςʔϚۂ ▸ GarageBandͰ࡞ۂ ▸ Drummer͕ͱͯ΋ศར (Demo) ▸ ϝϩσΟ͸ଉࢠ(5)τϥοΫ΋͋Γ ▸ ίʔϥε͸جຊ3࿨ԻͰࠨӈʹ ▸ ʮαʔνʯ͕΍͸3τϥοΫɻ෉්Ͱ6ਓ

Slide 23

Slide 23 text

࠷ޙʹ

Slide 24

Slide 24 text

ςΩετ Ґஔήʔͷ୉ޣຯ from an old WILLCOMer ▸ ୳ָ͢͠͞ ▸ + ஌Βͳ͍ͱ͜Ζʹߦָ͘͠͞ ▸ + ஌͍ͬͯΔ͸ͣͷ৔ॴͷ࠶ൃݟͷָ͠͞ ▸ ☑NianticͷαʔόͷAPIΛୟ͍ͯϙέϞϯͷҐஔΛ஌Δ πʔϧͰ͸ɺ͜ͷָ͠͞͸ಘΒΕͳ͍ɻ୳͢ ▸ ☑πʔϧΛ࢖ͬͯ΋ָ͠Έ͸ຯΘ͑Δɻͦ͏ɺ·Δϙέ αʔνͳΒͶɻ(஍ਤΛยखʹ୳͍ͯ͠Δঢ়ଶ)

Slide 25

Slide 25 text

௥ه ▸ ؼΓʹ @mu2in ͘Μ͕·ΔϙέαʔνΛ ࢖ͬͯϋΫϦϡ΢Λݟ͚͍ͭͯͨΐ!

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

使ってみてねὑ