Upgrade to Pro — share decks privately, control downloads, hide ads and more …

I/O ‘18で発表された
Polymer の update に見る Web Components の 過去/現在、そして未来/Polymer Japan Cafe#3

I/O ‘18で発表された
Polymer の update に見る Web Components の 過去/現在、そして未来/Polymer Japan Cafe#3

このセッションはGoogle I/O '18で発表された、Polymerの歩み、Polymer3が解決したこと、これからのPolymerチームの取り組み、の3点について、周辺動向やPolymer3を使った経験も交えて解説します。

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

September 18, 2018
Tweet

Transcript

  1. *0bͰൃද͞Εͨ
 1PMZNFSͷVQEBUFʹݟΔ 8FC$PNQPOFOUTͷ աڈݱࡏɺͦͯ͠ະདྷ 1PMZNFS+BQBO$BGF ,FOJDIJSP,JTIJEB !TJ[VIJLP

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

  3. )JTUPSZ

  4. ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

  5. ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

  6. ೥ J1IPOF͕ൃച ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠

  7. ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച

    8FCͷϑϩϯτΤϯυ։ൃ͸ 8FCͰෳࡶԽ͍ͯͨ͠
  8. ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥

    J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ 8$͸9)5.-ͱ͔ɺ Θ͚Θ͔ΒΜͷͰɺΈΜͳͷྗͰ ϒϥ΢βͷ3BXϨϕϧ"1*Λղ์ ͯ͠8FCͷੈքΛՃ଎͠Α͏
  9. ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥

    J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε
  10. ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥

    J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ
  11. ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ 1PMZNFS͕ൃද͞ΕΔ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥

    "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ
  12. ೥ )5.-קࠂ
 9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ ೥ "KBY͕༗໊ʹͳΔ 8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠ ೥ J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ

    ೥ 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද 1PMZNFSWϦϦʔε ೥ )5.-קࠂ 1PMZNFS͕ϦϦʔε͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ )551͕ঝೝ͞ΕΔ ೥ 1PMZNFS͕ϦϦʔε͞ΕΔ 4BGBSJ͕4IBEPX%0.ʹରԠͨ͠ 1PMZNFS͕ൃද͞ΕΔ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ ೥ 1PMZNFS͕ϦϦʔε͞Εͨ 4BGBSJ͕4FSWJDF8PSLFSʹରԠͨ͠ )5.-ͷࢀর࢓༷ʹ
 8FC$PNQPOFOUT͕௥Ճ͞Εͨ
  13. w ࠷৽ͷόʔδϣϯ͸ w όʔδϣϯ΋·ͩ·ͩݱ໾ w (PPHMFͷ$ISPNFνʔϜ͕։ൃ w 1PMZpMMͰ͸ͳ͍ 1PMZNFS

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

  15. 6TF5IF1MBUGPSN

  16. None
  17. <iron-ajax auto url="https://www.googleapis.com/youtube/v3/search" params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}' handle-as="json"

    last-response="{{ajaxResponse}}"></iron-ajax> <template is="dom-repeat" items="[[ajaxResponse.items]]"> <div class="horizontal-section"> <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2> <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image> <p>[[item.snippet.description]]</p> </div> </template> https://github.com/PolymerElements/iron-ajax
  18. None
  19. w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8 wΞϓϦέʔγϣϯ΋࡞ΕΔ wঢ়ଶ؅ཧͱ͔͸ίϯϙʔωϯτ΍ผͷϥ ΠϒϥϦ͕ඞཁ wϑϧελοΫͰ͸ͳ͍ w5ZQF4DSJQUαϙʔτ

  20. )5.-&MFNFOU ϓϩύςΟૢ࡞ ςϯϓϨʔτૢ࡞ σʔλόΠϯσΟϯά ࣮ࡍ΍Γ͍ͨࣄ

  21. )5.-&MFNFOU 1PMZNFS1SPQFSUZ"DDFTTPST 1PMZNFS5FNQMBUF4UBNQ 1PMZNFS1SPQFSUZ&GGFDUT 1PMZNFS&MFNFOU

  22. .BUFSJBMDPNQPOFOUT w (PPHMF*0Ͱൃද͞ Εͨ৽͍͠σβΠϯͷ 8FC$PNQPOFOUT w IUUQTHJUIVCDPN NBUFSJBMDPNQPOFOUT NBUFSJBMDPNQPOFOUT XFCDPNQPOFOUT

    w IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJP NBUFSJBMDPNQPOFOUTXFCDPNQPOFOUT EFNPTJOEFYIUNM
  23. -JU&MFNFOU w 1PMZNFSϕʔεͷ௒ ܰྔ$VTUPN&MFNFOU ϕʔεΫϥε w IUUQTHJUIVCDPN 1PMZNFSMJUFMFNFOU <script src="node_modules/@webcomponents/webcomponents-bundle.js"></script>

    <script type="module"> import {LitElement, html} from '@polymer/lit-element'; class MyElement extends LitElement { static get properties() { return { mood: String }} _render({mood}) { return html`<style> .mood { color: green; } </style> Web Components are <span class="mood">${mood}</span>!`; } } customElements.define('my-element', MyElement); </script> <my-element mood="happy"></my-element>
  24. 18"4UBSUFS,JU w -JU&MFNFOUͰ࡞ΒΕ ͨ18"σϞΞϓϦ w IUUQTHJUIVCDPN 1PMZNFSQXB TUBSUFSLJU w IUUQTQXBTUBSUFS

    LJUBQQTQPUDPN
  25. https://polymer-jp.org/

  26. 8IZVTF)5.-*NQPSU  /FFEFE1PMZpMM #PXFS .BEFCZ1PMZNFS

  27. /FFE1PMZpMM

  28. UP&4.PEVMFT 

  29. #PXFSUPOQN

  30. 8FBSFGSJFOET https://custom-elements-everywhere.com/

  31. ະདྷ

  32. w$444IBEPX1BSUT
 https://drafts.csswg.org/css-shadow-parts/ w$VTUPN&MFNFOU3FHJTUFST
 https://github.com/w3c/webcomponents/issues/716 w1BDLBHFOBNFNBQT
 https://github.com/domenic/package-name-maps w)5.-.PEVMFT
 https://github.com/w3c/webcomponents/issues/645
 https://github.com/PolymerLabs/html-modules-toolkit w)5.-5FNQMBUF*OTUBOUJBUJPO


    https://github.com/w3c/webcomponents/blob/gh-pages/ proposals/Template-Instantiation.md
  33. $444IBEPX1BSUT wΧελϜϓϩύςΟͱͷҧ͍ wخ͍͜͠ͱ

  34. $VTUPN&MFNFOU3FHJTUFST

  35. 1BDLBHFOBNFNBQT ͜͏ॻ͖͍ͨ

  36. )5.-.PEVMFT

  37. )5.-5FNQMBUF*OTUBOUJBUJPO

  38. WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp