Tweet
Tweet

Slide 1

Slide 1 text

Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa ͱ ίϯϙʔωϯτ ΧελϜλά

Slide 2

Slide 2 text

HJUIVCDPNDPHOJUPN

Slide 3

Slide 3 text

3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ ͋Γ͗͢ ʜ ϑϨʔϜϫʔΫϧʔλ $44 4BTT -&44 #&. 1PTU$44 ʜ $44 3PMMVQ #SPXTFSJGZ 8FC1BDL 4ZTUFN+4 ʜ .PEVMF#VOEMFS HVMQ OQN NBLF HSVOU ʜ λεΫϥϯφʔ &4 5ZQF4DSJQU 'MPX $P⒎FF4DSJQU &4 ʜ ݴޠ &YQSFTT -PPQCBDL 3FMBZ ,PB ʜ αʔόαΠυ LBSNB SFDUBOHVMBS OJHIUNBSF ʜ ςετɾMJOU FTMJOU BWB SJPUSPVUF

Slide 4

Slide 4 text

3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ ͋Γ͗͢ ʜ ϑϨʔϜϫʔΫϧʔλ $44 4BTT -&44 #&. 1PTU$44 ʜ $44 3PMMVQ #SPXTFSJGZ 8FC1BDL 4ZTUFN+4 ʜ .PEVMF#VOEMFS HVMQ OQN NBLF HSVOU ʜ λεΫϥϯφʔ &4 5ZQF4DSJQU 'MPX $P⒎FF4DSJQU &4 ʜ ݴޠ &YQSFTT -PPQCBDL 3FMBZ ,PB ʜ αʔόαΠυ LBSNB SFDUBOHVMBS OJHIUNBSF ʜ ςετɾMJOU FTMJOU BWB SJPUSPVUF ٕज़ελοΫͷதͷɺίίɻ

Slide 5

Slide 5 text

3JPUKTͰग़དྷΔ͜ͱ ͷجຊ
ఱؾ
  • ۭ΋Α͏: ੖Ε
  • ؾԹ: 10౓
  • ࣪౓: 30%

Slide 6

Slide 6 text

3JPUKT͸ͲΜͳਓ޲͚

Slide 7

Slide 7 text

ʮઆ໌ॻಡ·ͳ͍ਓʯ޲͚ )5.-ɾ+4ɾ$44Λɺී௨ʹཧղ͍ͯͯ͠

Slide 8

Slide 8 text

SJPUKTDPNQMBZ ΍ͬͯΈΑ͏

Slide 9

Slide 9 text

3JPUKT͸ɺ طଘٕज़ͰʮίϯϙʔωϯτʯΛ ࣮ݱ͢ΔͨΊͷɺ࠷΋γϯϓϧͳ Ξϓϩʔνɻ

Slide 10

Slide 10 text

ίϯϙʔωϯτͬͯͳΜͳͷ ผ໊ʮΧελϜλάʯ ͔͋ͨ΋৽͍͠)5.-ཁૉΛɺ ࣗ෼Ͱ޷͖ͳΑ͏ʹఆٛͰ͖ͯ͠·͏ͳʹ͔ɻ

Slide 11

Slide 11 text

Slide 12

Slide 12 text

ίϯϙʔωϯτWTςϯϓϨʔτ

Slide 13

Slide 13 text

ίϯϙʔωϯτ ςϯϓϨʔτ )5.-΁ͷม਺ຒΊࠐΈ :&4 :&4 ΧελϜλάͱͯ͠ৼΔ෣͏ :&4 /0 ϏϡʔϩδοΫ ϏϡʔͷϦΞϧλΠϜมߋ :&4 /0 ϏδωεϩδοΫ /0 /0 ίϯϙʔωϯτWTςϯϓϨʔτ ॻ͍ͪΌμϝ

Slide 14

Slide 14 text

“Templates separate technologies, not concerns.” ʮςϯϓϨʔτ͕੾Γ෼͚͍ͯͨͷ͸ɺ ໰୊͡Όͳٕͯ͘ज़ͩʯ

Slide 15

Slide 15 text

ίϯϙʔωϯτWTK2VFSZ

Slide 16

Slide 16 text

ίϯϙʔωϯτWTK2VFSZ )5.-͕ඳը͞ΕΔ Πϕϯτ͕ى͖Δ )5.-͕ඳը͞ΕΔ K2VFSZͰॻ͖׵͑Δ Πϕϯτ͕ى͖Δ

Slide 17

Slide 17 text

ίϯϙʔωϯτ K2VFSZ )5.-ͷѻ͍ એݴత ॻ͍ͨ·Μ· ࠩ෼Λૢ࡞ σʔλͷྲྀΕ ετΞˠϏϡʔ جຊతʹ͸ ͪ͝Όͪ͝Ό ίϯϙʔωϯτWTK2VFSZ

Slide 18

Slide 18 text

3JPUͰͷॻ͖ํ

Slide 19

Slide 19 text

ఱؾ
  • ۭ΋Α͏: { types[opts.type] }
  • ؾԹ: { opts.temperature }౓
  • ࣪౓: { opts.humidity }
this.types = { clear: ‘੖Ε’ } :scope { display: block; } HTML JS CSS

Slide 20

Slide 20 text

riot.mount(‘weather’, { type: ‘clear’, temperature: 10, humidity: ’30%’ }) ௚઀Ϛ΢ϯτ

Slide 21

Slide 21 text

riot.mount(‘app’) ؒ઀Ϛ΢ϯτ

Slide 22

Slide 22 text

ैདྷͷॻ͖ํ ਫฏ෼ۀ CSS HTML JS Template Template Template

Slide 23

Slide 23 text

3JPUͷॻ͖ํ ਨ௚౷߹ CSS HTML JS Template Template Template CSS JS CSS JS CSS JS Tag A Tag B Tag C

Slide 24

Slide 24 text

w ෆඞཁʹόϥ͚͍ͯͨ΋ͷ͕ɺͻͱͭʹ w )5.-ɾ+4ɾ$44ͦΕͧΕཧղ͍ͯ͠Δඞཁ͋Γ ੹೚ൣғ͸ʮٕज़ʯͰ͸ͳ͘ ʮίϯϙʔωϯτʯʹ

Slide 25

Slide 25 text

͓ΘΓ