Slide 1

Slide 1 text

ϒϥ΢β্Ͱ஄͚Δ ʮ͋ͷָثʯΛ ࡞ͬͯΈͨ @kubosho_ / Grani, inc.

Slide 2

Slide 2 text

CodeGrid 3प೥͓ΊͰͱ͏͍͟͝·͢ʂ

Slide 3

Slide 3 text

͋ͷָثʁ

Slide 4

Slide 4 text

ʲॳԻϛΫʳInnocenceʲ3DPVʳ http://www.nicovideo.jp/watch/sm5480792

Slide 5

Slide 5 text

http://www.tripshots.net/img/wp/wp_ano.jpg

Slide 6

Slide 6 text

͋ͷָث #ͱ͸ • ʮʲॳԻϛΫʳInnocenceʲ3DPVʳʯ ͱ͍͏ಈըʹొ৔͢ ΔɺॳԻϛΫ͕஄͍͍ͯΔָث • ܗঢ়͸γϣϧμʔΩʔϘʔυʹ͍ۙɻ伴൫ʹ͋ͨΔ෦෼͕Ұ໘ σΟεϓϨΠʹͳ͓ͬͯΓɺλονͯ͠ԋ૗͢Δɻλον͢Δ ͜ͱͰσΟεϓϨΠ্ʹ௚ઢɺࡾ֯ܗɺ࢛֯ܗͳͲͷزԿֶ໛ ༷͕͋ΒΘΕΔ
 (http://dic.nicovideo.jp/a/ %E3%81%82%E3%81%AE%E6%A5%BD%E5%99%A8 ΑΓ)

Slide 7

Slide 7 text

ͳΜ͔ͩ࡞Εͦ͏ʂ (֎૷আ͘)

Slide 8

Slide 8 text

࡞ͬͯΈͨ

Slide 9

Slide 9 text

http://bit.ly/anogakki ※IE͸ඇରԠͰ͢ ※Android͸ChromeͰ ݟ͍ͯͩ͘͞

Slide 10

Slide 10 text

ʮ͋ͷָثʯ Λࢧ͑Δٕज़

Slide 11

Slide 11 text

Web Audio API

Slide 12

Slide 12 text

Web Audio API • Web Audio API ͷ createOscillatorNode() Λ࢖ͬͯαΠϯ ೾Λੜ੒ • ԻߴͷσʔλΛɺҰ୴ MIDI ϊʔτ൪߸ʹม׵͠ɺMIDI ϊʔτ൪߸͔Βप೾਺ʹม׵ͯ͠ɺoscillatorNode ͷ frequency.value ϓϩύςΟʹ୅ೖ͍ͯ͠Δ • touchstart or mousedown Πϕϯτ͕ى͖ͨΒɺੜ੒ͨ͠ ԻΛ࠶ੜͯ͠ɺ200ms ޙʹࢭΊΔͱ͍͏ॲཧΛ͍ͯ͠Δ

Slide 13

Slide 13 text

ԻߴΛप೾਺ʹ͢ΔྲྀΕ “A4” (Իߴ) ->
 69 (MIDIϊʔτ൪߸) ->
 440 (प೾਺)

Slide 14

Slide 14 text

SVG

Slide 15

Slide 15 text

SVG • Snap.svg ͱ͍͏ϥΠϒϥϦΛ࢖͍ɺ touchstart or mousedown Πϕϯτ͕ى͖ͨ ΒɺزԿֶ໛༷Λඳը͍ͯ͠Δ • ಈըΛݟͭͭɺͲͷΑ͏ʹزԿֶ໛༷Λඳը ͢Δ͔ௐ੔ (໛༷ͱ͔Ξχϝʔγϣϯͱ͔)

Slide 16

Slide 16 text

·ͱΊ

Slide 17

Slide 17 text

·ͩα൛ͳͷͰɺ σϞΛ৮ͬͯΈͯ ؾ͍ͮͨͱ͜Ζ͕͋ͬͨΒ issue ࡞͍ͬͯͩ͘͞ http://bit.ly/anogakki-issues

Slide 18

Slide 18 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ Twitter: https://twitter.com/kubosho_ GitHub: https://github.com/kubosho