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.5k
A82d0263c90b1def7afedfdd89dd642d?s=48 sisidovski
68
190k

Other Decks in Programming

See All in Programming
Dbfa12cd7e1ff8b06a588609369d6e49?s=48 eddie
0
590
12c88a3a10478fa18d0363b3ba3d9df1?s=48 christianliebel
0
100
B1f68959f14f39a7cba2bc9fd4b926e9?s=48 ruyadorno
2
320
60a71672b538fb50cc1d15c41c971255?s=48 blackbing
0
170
Dc88edc1ac20d0a2387fdce3bb8f48cf?s=48 mkmy1123
1
270
C0eb1445cda9489ebf8c31c367fec3fb?s=48 exoego
1
390
6dd0483f1353a4a359e92633cfd65c64?s=48 wasabeef
27
6.2k
894a9f3c8db89d0a5cd8e1add1dbe37b?s=48 usamiuhuru
0
400
841002bf24bb562253de7eb3c17ceae6?s=48 kyomo
1
170
Ffc500baeba9a1024e2c8273203c9f90?s=48 raulh82vlc
3
1.6k
993ef638264def4334358f986fb4a91d?s=48 uhyo
1
400
E834b4b7cfcba6918f01f45d2916c302?s=48 f110
3
170

Featured

See All Featured
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
191
8.4k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
309
21k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
175
7.3k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
266
16k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
5
380
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
256
11k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
197
9.5k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
165
18k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
583
200k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k

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ͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ෼໘ന͍