Web Componentsを1年使って / jsfes 2016-10

Transcript

1. 8FC
   $PNQPOFOUT
   Λ೥࢖ͬͯ ळͷ+BWB4DSJQUࡇΓ
   
   CZ
   !TJ[VIJLP

2. ,FOJDIJSP
   ,JTIJEB
   5PLZP
   +"1"/
   TJ[VIJLP!HNBJMDPN
   
   !TJ[VIJLP
   IUUQTHJUIVCDPNTJ[VIJLP
   IUUQCMPHPQFOUPLZPKQ
   

3. େࣄͳ͜ͱ͸࠷ॳʹ

4. ͦ͏ͩ
   1PMZNFS
   ࢖͓͏ 1PMZNFS

5. 1PMZNFS https://www.polymer-project.org

6. ˞썪쎅-5쎆ൃදऀ쎅
 ɹมଶత쎁1PMZNFSѪ쎂ຬ썸썽썛쎕썰
 ɹ썫஫ҙ썦썷썬썛

7. ࢖͍ͨ͘ͳΔཧ༝ w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
   w 41"͡Όͳͯ͘΋ྑ͍
   w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
   w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
   

   w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
   w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
   

8. Α͘ݴΘΕΔ͜ͱ w ͱΜ͕ͬͯΔͶʂ
   w ࢖͍ͬͯΔਓ͸͡Ίͯݟͨ
   w ࢖͑Δͷʁ
   w ੲ 

   ࢖ͬͨ͜ͱ͋Δ
   w ͭΒ͘ͳ͍ʁ

9. w 
   W
   w 
   W
   
   
   
   
   W
   w 
   W
   
   
   
   
   W
   w 
   W
   w 
   W
   

   w 
   W
   w 
   W
   w 
   W
   w 
   W https://github.com/Polymer/polymer/releases 89 Releases!!

10. ۤ썮썴썝썢ɺࠔ썺썶쎁
    ۤ썮썛쎅쎆౰썶쎡લ쎁쎪썷써쎀쎁
    ๻쎆ւਤ쎅쎁썛ߤ࿏쎩ߦ썦쎪썷쎤ʁ
    ௅ઓ썰쎢쎅쎙ɺੜ쎖ग़썰쎅쎙ɺۤ썮썛쎟
    썾쎙ɺॆ࣮썮썽쎢 ʮ࢛݄͸܅ͷӕʯΑΓ༗അެਖ਼ͷ໊ݴ

11. Α͔ͬͨ͜ͱ w )5.-λά͸࠶ར༻ੑ͕ߴ͍
    w ಈ͖ͷ͋Δϖʔδ͕؆୯ʹ࡞ΕΔ
    w ϒϩοΫΛ૊ΈཱͯΔΑ͏ͩ
    w άϩʔόϧԚછͳʹͦΕ
    w

    ͸͡Ίͯͷਓ΋ೃછΈ΍͍͢
    w ʢ׳Εͨਓ͕͍ͨํ͕ྑ͍ʣ

12. ࢖͍ͨ͘ͳΔཧ༝ w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w 41"͡Όͳͯ͘΋ྑ͍
    w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    

    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
    

13. WebComponent
 ࢖ͬͯ·͔͢ʁ

14. 8FC
    $PNQPOFOUT w4IBEPX
    %0.
    w$VTUPN
    &MFNFOUT
    w)5.-
    *NQPSUT
    w)5.-
    5FNQMBUFT https://github.com/w3c/webcomponents

15. ݱࡏ஍ʹϐϯΛཱͯͨ஍ਤΛද͍ࣔͨ͠

16. <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js? callback=createMap"> </script> <script> function createMap() {

    navigator.geolocation.getCurrentPosition(position => { const map = new google.maps.Map(document.getElementById('map'), { center: { lat: position.coords.latitude, lng: position.coords.longitude}, zoom: 17 }); new google.maps.Marker({position: center, map: map}); }); } </script>

17. <geo-location latitude=“{{lat}}" longitude=“{{lng}}”/> <google-map latitude=“[[lat]]" longitude="[[lng]]" zoom="17"> <google-map-marker latitude="[[lat]]" longitude=“[[lng]]"

    /> </google-map>

18. ಠࣗ
    $PNQPOFOUT <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="タグ名"> <template> <style> <!— 独自のCSS

    —> </style> <!— 独自コンポーネントのHTML —> </template> <script> Polymer({ is: 'タグ名', properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script> </dom-module>

19. +BWB4DSJQU쎆؆୯썾޷썤썷써쎀
    썴쎣쎆8FC썾Ձ஋쎩ग़썰썶쎘쎅खஈ썾썙썺썽
    +4੒෼গ쎁쎘썾쎙࠷େݶ쎂Ձ஋썣ग़썲쎢ํ๏
    썷썺썶쎡ɺ
    खஈ썣໨తԽ썮쎁썛썪썿썣
    ॏཁ썷썿ࢥ썝쎪썾썰쎟
    ͱ͋Δ࠙਌ձͰ1PMZNFSѪ͕͍͖͗ͨ͢ͱ͖ͷൃݴ

20. ࢖͍ͨ͘ͳΔཧ༝ w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w 41"͡Όͳͯ͘΋ྑ͍
    w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    

    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
    

21. w1PMZNFS
    w95BH
    w#040/*$
    w4LBUF+4
    w3FBDU+4
    w"OHVMBS 8FC
    $PNQPOFOUT >8FC$PNQPOFOUTPSH

22. http://qiita.com/laco0416/items/a75da4d7c2f0a21e0344

23. http://qiita.com/ko2ic/items/2aa3090dec040bd78eeb

24. http://hayato.io/2016/shadowdomv1/

25. ࢖͍ͨ͘ͳΔཧ༝ w ֶशίετ͕௿͍ +4੒෼͕গͳΊʣ
    w 41"͡Όͳͯ͘΋ྑ͍
    w 8$ඪ४ʹ͍ۙʢಠࣗͰ͸ͳ͍ʣ
    w ͢Ͱʹଟ਺ͷίϯϙʔωϯτ͕͋Δ
    

    w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ
    w Ϋϩεϒϥ΢βʢ1PMZpMMʣ
    

26. https://elements.polymer-project.org/

27. w8FC
    $PNQPOFOUT
    w%BUB
    #JOEJOH
    w#FIBWJPST
    w)FMQFST
    w.BUFSJBM
    %FTJHO
    w$-*
    5PPMT

28. ಠࣗ
    $PNQPOFOUT <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="タグ名"> <template> <style> <!— 独自のCSS

    —> </style> <!— 独自コンポーネントのHTML —> </template> <script> Polymer({ is: 'タグ名', properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script> </dom-module>

29. ֦ுλά <link rel="import" href="../bower_components/polymer/polymer.html"> <script> Polymer({ is: 'my-input', extends: 'input',

    behaviors: [Polymer.IronValidatableBehavior], properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script>

30. #FIBWJPST wڞ௨ॲཧΛఆٛͰ͖Δ
    wNJYJO

31. )FMQFST <iron-ajax url="/users" handle-as="json" method="GET" last- response="{{users}}"></iron-ajax> <ul> <template is="dom-repeat"

    items="[[users]]" as="user"> <li>{{user.name}}</li> </template> </ul> <template is="dom-if" if="[[admin]]"> <div>管理者だったら何か</div> </template>

32. ͦ͏ͩ
    1PMZNFS
    ࢖͓͏ 1PMZNFS

33. WJTJU
    NZ
    CMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp