爆速でGECKO BOARDらしき何かを作る。 #jsオジサン

by Takayuki Imai

Slide 1

Slide 1 text

ര଎Ͱ(&$,0#0"3%Β͖͠Կ͔Λ࡞Δɻ ! 5BLBZVLJ*NBJ !+4͓͡͞Μ

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

ࠓҪو೭ ΠϚΠλΧϢΩʣ UXJUUFS!JNBJNJBNJ 8BOUFEMZͷ8FCΤϯδχΞɻ  Ҏલ͸1)1FSɺֶੜͷࠒ͸ܶஂͯ͠·ͨ͠ɻ ! ! ! ৄ͍͠ϓϩϑΟʔϧ ˠIUUQTXXXXBOUFEMZDPNVTFST

Slide 4

Slide 4 text

ϓϩϑΟʔϧฤू

Slide 5

Slide 5 text

χϡʔεϑΟʔυ

Slide 6

Slide 6 text

-5

Slide 7

Slide 7 text

ΫϦΤΠςΟϏςΟͰ͸͡Ίɺ γϏΞͳ਺ࣈͰ൑அ͢Δ http://www.lifehacker.jp/ 2014/01/140107startups_wantedly.html Wantedlyͷ։ൃ͸..

Slide 8

Slide 8 text

(&$,0#0"3%࢖ͬͯ·͢ɻ

Slide 9

Slide 9 text

࡞ͬͯΈ͍ͨ JS͓͡͞Μతࢹ఺

Slide 10

Slide 10 text

JMMVTUSBUPSͰ ΠϥϨ͓͡͞Μ͔ͳʁ JS͓͡͞Μతࢹ఺

Slide 11

Slide 11 text

ര଎Ͱ׬੒ʂʂʂ

Slide 12

Slide 12 text

ര଎ʂʂ ඇσβΠφʔͰ΋Ͱ͖ͨʂʂ ײಈͷϑΟφʔϨʂʂ

Slide 13

Slide 13 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

Slide 14

Slide 14 text

ಈ͔ͳ͍Αʂʂ

Slide 15

Slide 15 text

%KTͰಈ͔͢ JS͓͡͞ΜͩͬͨΑ!

Slide 16

Slide 16 text

·ͣɺillustratorʹ͋Γ͕ͱ͏Λɻ ϨΠϠʔύωϧͰೖྗͨ͠ ΦϒδΣΫτ໊͕ɺ ! ! ! ! ! ! svgͱͯ͠ॻ͖ͩͨ࣌͠ͷ ཁૉͷidʹͳΔɻ

Slide 17

Slide 17 text

EͰಈ͔ͤΔʂʂ ελΠϧ͸svgʹinlineͰهड़͞Ε͍ͯΔͷͰɺ γϯϓϧʹॻ͚Δɻ d3.select("#score").text(number); d3.select("#line").attr("d", d3line(dataset));

Slide 18

Slide 18 text

σϞ

Slide 19

Slide 19 text

΋ͬͱಈ͔͢ʂʂ

Slide 20

Slide 20 text

UISFFKTͰಈ͔͢ ଓ JS͓͡͞ΜͩΑ!

Slide 21

Slide 21 text

$44%3FOEFSFSKT three.jsͷ֦ுϥΠϒϥϦɻDOMΛCSS3transformͰૢ࡞Ͱ͖Δɻ ެࣜͷαϯϓϧ͕ૉఢɻ http://threejs.org/examples/css3d_periodictable.html scene = new THREE.Scene(); object = new THREE.CSS3DObject(document.getElementById('hoge')); scene.add(object); renderer = new THREE.CSS3DRenderer(); ... !

Slide 22

Slide 22 text

σϞ

Slide 23

Slide 23 text

·ͱΊ

Slide 24

Slide 24 text

ࣗ෼Ͱ࡞Ε͹ɺ޷͖ͳϥΠϒϥϦ΋࢖͑ͯʜ ! Մೳੑ͸ແݶେʂʂ ௒ָ͍͠ʂʂ ΦϦδφϦςΟ͋;ΕΔμογϡϘʔτʂʂ ຖ೔ͷ࢓ࣄ͕໘ന͘ͳΔʂʂ ! ͱɺࢥ͏ͷ͚ͩͲͰ΋ɺ

Slide 25

Slide 25 text

ແବແବແବແବແ ବແବແବແବແବ ແବແବແବແବແ ବແବແବແବແବ ແବແବແବແବແ ବແବແବແବແବ ແବʂʂ ͔΋͠Εͳ͍..

Slide 26

Slide 26 text

(&$,0#0"3%Ͱ΋$6450.8*%(&5͕࡞ΕΔɻ 9.-Λ1PMMJOHͯ͠΋ΒͬͨΓ +BWBTDSJQU +40/Ͱ1VTIͨ͠Γ Χοίྑ͍chartϥΠϒϥϦ΋࢖͑Δ ָ͘͠JS͕ॻ͚ΔΑ͏ʹ ϕετͳબ୒Λʂ

Slide 27

Slide 27 text

એ఻

Slide 28

Slide 28 text

LIGɺαΠόʔΤʔδΣϯτɺάουύονɺschooɺWantedly..ͳͲͳͲ https://www.wantedly.com/campaign/real_wantedly 2014೥9݄22೔(݄)ɹ18:00ʙ22:00

Slide 29

Slide 29 text

8BOUFEMZΛࢧ͑ͯ͘ΕΔ εʔύʔΤϯδχΞืूதʂ IUUQTXXXXBOUFEMZDPNQSPKFDUT

Slide 30

Slide 30 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ