WebComponentsについて

A82d0263c90b1def7afedfdd89dd642d?s=47 Shunya Shishido
October 06, 2014
Programming
0
180

 WebComponentsについて

社内勉強会で発表

A82d0263c90b1def7afedfdd89dd642d?s=128

Shunya Shishido

October 06, 2014
Tweet

More Decks by Shunya Shishido

See All by Shunya Shishido
A82d0263c90b1def7afedfdd89dd642d?s=48 sisidovski
23
12k
A82d0263c90b1def7afedfdd89dd642d?s=48 sisidovski
0
170
A82d0263c90b1def7afedfdd89dd642d?s=48 sisidovski
0
270
A82d0263c90b1def7afedfdd89dd642d?s=48 sisidovski
41
18k
A82d0263c90b1def7afedfdd89dd642d?s=48 sisidovski
17
6.6k
A82d0263c90b1def7afedfdd89dd642d?s=48 sisidovski
68
190k

Other Decks in Programming

See All in Programming
3742ae4f74e584aed4f41c405232c3bb?s=48 yaamaa
0
400
9ed92fc8760bf8b6ea2a034022052b42?s=48 takaram
1
1.1k
1623dd1adf096ba35ba33727d933e14c?s=48 nbkouhou
0
730
0f50b010cc99988fba8a73008b21f353?s=48 e10dokup
0
440
079f41894122acf92719f5558dcaf944?s=48 dictoss
0
160
3a3c6a0c96f487521ce83b719bc25814?s=48 asumikan
0
280
Cfbe23392787cb3ad4689c5f72463fcc?s=48 makicamel
1
160
22e056dcb79e14363e844f1e57986325?s=48 aratayokoyama
0
190
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
260
91b77d9a98b86e27838b183407270bc0?s=48 supikiti
3
1.2k
405fe9ab689473f267e2cfbd95f78c75?s=48 kyonmm
2
2.1k
Ad4c3c738e57a9bbcb800871e81c232d?s=48 itosho525
0
130

Featured

See All Featured
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
127
20k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
145
19k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
116
4.8k
245cee81a9c424266e5e401d844ea881?s=48 lara
172
9.5k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
26
1.3k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
17
1.8k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
587
200k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
207
10k
78b475797a14c84799063c7cd073962f?s=48 holman
448
130k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.4k

Transcript

  1. <web-­‐components>

  2. about  me •  ໊લ     – ࣡ށढ़࠸   – ssd,  sisidovski

      •  Front  EndϝΠϯ  

  3.    ࠓ೔΋Ұ೔͕Μ͹Δ͍ͧʂ

  4. None
  5. None
  6. None

  7. <ganbaru-­‐zoi> •  <ganbaru-­‐zoi></ganbaru-­‐zoi>ͱॻ͚͹࢖͑ΔΧελϜλά   –  ͍ΘΏΔWebComponents   –  PolymerΛ࢖ͬͨ  

    –  chrome,  firefox,  safari,  IE10ʙͰ࢖͑Δ͸ͣ   •  github   –  https://github.com/sisidovski/zoi   •  bower   –  $  bower  install  ganbaru-­‐zoi

  8. DEMO http://sisidovski.github.io/zoi/

  9. <ganbaru-­‐zoi> •  HTMLͱCSSɺϨϯμϦϯάޙ΍ΫϦοΫ࣌ͷৼΔ ෣͍Λ·ͱΊͯ1ͭͷίϯϙʔωϯτʹ͍ͯ͠Δ   •  ӨΛ࡞͍ͬͯΔCSS,    Ξχϝʔγϣϯ෦෼͸ Polymer͕ఏڙ͍ͯ͠ΔΧελϜλάΛ಺෦Ͱར༻

      •  ਧ͖ग़͠ʹදࣔ͢Δจࣈྻ͸σʔλόΠϯσΟϯ άͰ؅ཧ

  10. WebComponents? •  ཁ͢Δʹʮ෦඼୯ҐͰ෼ׂʯ   •  Webඪ४ʹͳΔ༧ఆ   –  PCϒϥ΢βͰؾ݉Ͷͳ͘࢖͑Δʹ͸΋͏গ͠ઌͩͱࢥ͏  

    •  ίϯϙʔωϯτ͸ΧϓηϧԽ͞ΕΔ   –  ֎෦ΛԚછ͠ͳ͍   •  ίϯϙʔωϯτ͸࠶ར༻͕Մೳ   •  ͓͢͢ΊϦϯΫ   –  http://customelements.io/  

  11. WebComponents? •  Custom  Elements    ෦඼Λ࡞Δ࢓૊Έ   •  HTML  Imports

             ෦඼Λݺͼग़͢࢓૊Έ   •  Template        ෦඼Λ࢖͏࢓૊Έ   •  Shadow  DOM      ෦඼ΛΧϓηϧԽ͢Δ࢓૊Έ   ্ه4ͭΛ૊Έ߹ΘͤͯUIίϯϙʔωϯτ͕࡞ΕΔ            ˠWebComponents  

  12. Polymer? •  WebComponentsඇରԠϒϥ΢β΁ͷPolyfillϥΠϒ ϥϦ   –  ҋͷٕज़ͰAPIΛ༻ҙٖͯ͠ࣅతʹ࢖͑ΔΑ͏ʹͯ͠ ͍Δ   – 

    ྫ͑͹Shadow  DOM͸ݱঢ়chromeͱoperaͰ͔͠࢖͑ ͳ͍ʢFirefox͸32Ҏ߱Ͱ༧ఆΒ͍͠ʣ   •  WebComponentsͷapiΛந৅Խͯ͠࢖͍΍͘͢   •  σʔλόΠϯσΟϯά  

  13. in  other  frameworks •  ΧελϜλά͸࡞ΕΔ   –  Angular.jsͷσΟϨΫςΟϒ   – 

    Knockout.js͸3.2͔ΒComponentsͱ͍͏ػೳͰ࢖͑ΔΑ͏ʹͳΔ   –  Vue.js͸Component   •  WebComponentsͰ͸ͳ͍   –  Shadow  DOMʹରԠ͍ͯ͠ͳ͍ͷͰɺҾ͖ଓ͖άϩʔόϧԚછ ʹؾΛ͚ͭͨ։ൃ͕ඞཁ   •  Ұ෦ݹ͍IEʹରԠ͍ͯ͠Δ   –  ϑϨʔϜϫʔΫʹΑΓ͚Γ   –  Ұ෦੍໿͕͋ͬͨΓ͢Δ͕ɺPolymerΑΓ΋खް͍  

  14. ࡞ͬͯΈͨײ૝ •  ίϯϙʔωϯτ͝ͱʹΧϓηϧԽͰ͖Δͷ͸େ͖͍   –  ಛʹνʔϜ։ൃͰҖྗΛൃشͦ͠͏   •  ίϯϙʔωϯτؒͰґଘؔ܎͕͋Δͱ͖ʹΠϯϙʔτ ͢Δॱংͱ͔Λؾʹ͠ͳͪ͘Ό͍͚ͳͯ͘ΞϨ

      •  ίϯϙʔωϯτ͸ͦΕͧΕඇಉظͰಡΈࠐ·ΕΔͷͰɺ Կ΋͠ͳ͍ͱϦΫΤετ਺͕രൃతʹ૿͑Δ   –  Polymer/Vulcanizeͱ͍͏πʔϧͰ·ͱΊΒΕΔͬΆ͍͚Ͳ ·ͩࢼͯ͠ͳ͍ɻgrunt/gulpϓϥάΠϯ΋طʹ͋Δ  

  15. ·ͱΊ •  NewGame!ͷΧελϜλάΛ࡞ͬͨ   •  ະདྷͬΆ͍WebComponentsͱPolymerͷ࿩   •  WebComponents͸·ͩ·ͩ՝୊΋ଟͦ͏  

  16. એ఻ •  ҕୗൢച   •  8/17(೔)  ੢ϗʔϧ͖-­‐36B   •  Socket.IO

     1.0ͷهࣄॻ͖· ͨ͠   •  γΣϧεΫϦϓτͰWebΞ ϓϦ࡞ͬͨͱ͔Imutableͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ෼໘ന͍