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を使った経験も交えて解説します。

Kenichiro Kishida

September 18, 2018
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

Transcript

  1. *0bͰൃද͞Εͨ

    1PMZNFSͷVQEBUFʹݟΔ
    8FC$PNQPOFOUTͷ
    աڈݱࡏɺͦͯ͠ະདྷ
    1PMZNFS+BQBO$BGF
    ,FOJDIJSP,JTIJEB
    !TJ[VIJLP

    View Slide

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

    View Slide

  3. )JTUPSZ

    View Slide


  4. )5.-קࠂ

    9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

    View Slide


  5. "KBY͕༗໊ʹͳΔ
    8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠

    )5.-קࠂ

    9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

    View Slide


  6. J1IPOF͕ൃച

    )5.-קࠂ

    9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

    "KBY͕༗໊ʹͳΔ
    8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠

    View Slide


  7. 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ

    )5.-קࠂ

    9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

    "KBY͕༗໊ʹͳΔ
    8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠

    J1IPOF͕ൃച
    8FCͷϑϩϯτΤϯυ։ൃ͸
    8FCͰෳࡶԽ͍ͯͨ͠

    View Slide


  8. 5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද
    1PMZNFSWϦϦʔε

    )5.-קࠂ

    9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

    "KBY͕༗໊ʹͳΔ
    8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠

    J1IPOF͕ൃച

    8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ
    8$͸9)5.-ͱ͔ɺ
    Θ͚Θ͔ΒΜͷͰɺΈΜͳͷྗͰ
    ϒϥ΢βͷ3BXϨϕϧ"1*Λղ์
    ͯ͠8FCͷੈքΛՃ଎͠Α͏

    View Slide


  9. )5.-קࠂ
    1PMZNFS͕ϦϦʔε͞ΕΔ

    )5.-קࠂ

    9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

    "KBY͕༗໊ʹͳΔ
    8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠

    J1IPOF͕ൃച

    8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ

    5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද
    1PMZNFSWϦϦʔε

    View Slide


  10. 1PMZNFS͕ϦϦʔε͞ΕΔ
    )551͕ঝೝ͞ΕΔ

    )5.-קࠂ

    9.-)UUQ3FRVFTU͕*&ʹ࣮૷͞ΕΔ

    "KBY͕༗໊ʹͳΔ
    8FCͱ͍͏ϫʔυ͕ൃ঵ͨ͠

    J1IPOF͕ൃച

    8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ

    5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද
    1PMZNFSWϦϦʔε

    )5.-קࠂ
    1PMZNFS͕ϦϦʔε͞ΕΔ

    View Slide


  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͕ঝೝ͞ΕΔ

    View Slide


  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͕௥Ճ͞Εͨ

    View Slide

  13. w ࠷৽ͷόʔδϣϯ͸
    w όʔδϣϯ΋·ͩ·ͩݱ໾
    w (PPHMFͷ$ISPNFνʔϜ͕։ൃ
    w 1PMZpMMͰ͸ͳ͍
    1PMZNFS

    View Slide

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

    View Slide

  15. 6TF5IF1MBUGPSN

    View Slide

  16. View Slide

  17. url="https://www.googleapis.com/youtube/v3/search"
    params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}'
    handle-as="json" last-response="{{ajaxResponse}}">


    [[item.snippet.title]]
    sizing="cover" preload fade>
    [[item.snippet.description]]

    https://github.com/PolymerElements/iron-ajax

    View Slide

  18. View Slide

  19. w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8
    wΞϓϦέʔγϣϯ΋࡞ΕΔ
    wঢ়ଶ؅ཧͱ͔͸ίϯϙʔωϯτ΍ผͷϥ
    ΠϒϥϦ͕ඞཁ
    wϑϧελοΫͰ͸ͳ͍
    w5ZQF4DSJQUαϙʔτ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. -JU&MFNFOU
    w 1PMZNFSϕʔεͷ௒
    ܰྔ$VTUPN&MFNFOU
    ϕʔεΫϥε
    w IUUQTHJUIVCDPN
    1PMZNFSMJUFMFNFOU

    <br/>import {LitElement, html} from '@polymer/lit-element';<br/>class MyElement extends LitElement {<br/>static get properties() { return { mood: String }}<br/>_render({mood}) {<br/>return html`<style> .mood { color: green; } </style><br/>Web Components are <span class="mood">${mood}</span>!`;<br/>}<br/>}<br/>customElements.define('my-element', MyElement);<br/>

    View Slide

  24. 18"4UBSUFS,JU
    w -JU&MFNFOUͰ࡞ΒΕ
    ͨ18"σϞΞϓϦ
    w IUUQTHJUIVCDPN
    1PMZNFSQXB
    TUBSUFSLJU
    w IUUQTQXBTUBSUFS
    LJUBQQTQPUDPN

    View Slide

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

    View Slide

  26. 8IZVTF)5.-*NQPSU

    /FFEFE1PMZpMM
    #PXFS
    .BEFCZ1PMZNFS

    View Slide

  27. /FFE1PMZpMM

    View Slide

  28. UP&4.PEVMFT

    View Slide

  29. #PXFSUPOQN

    View Slide

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

    View Slide

  31. ະདྷ

    View Slide

  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

    View Slide

  33. $444IBEPX1BSUT
    wΧελϜϓϩύςΟͱͷҧ͍
    wخ͍͜͠ͱ

    View Slide

  34. $VTUPN&MFNFOU3FHJTUFST

    View Slide

  35. 1BDLBHFOBNFNBQT
    ͜͏ॻ͖͍ͨ

    View Slide

  36. )5.-.PEVMFT

    View Slide

  37. )5.-5FNQMBUF*OTUBOUJBUJPO

    View Slide

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

    View Slide