このセッションはGoogle I/O '18で発表された、Polymerの歩み、Polymer3が解決したこと、これからのPolymerチームの取り組み、の3点について、周辺動向やPolymer3を使った経験も交えて解説します。
*0bͰൃද͞Εͨ 1PMZNFSͷVQEBUFʹݟΔ8FC$PNQPOFOUTͷաڈݱࡏɺͦͯ͠ະདྷ1PMZNFS+BQBO$BGF,FOJDIJSP,JTIJEB!TJ[VIJLP
View Slide
,FOJDIJSP,JTIJEB5PLZP +"1"/TJ[VIJLP!HNBJMDPN !TJ[VIJLPIUUQTHJUIVCDPNTJ[VIJLPIUUQCMPHPQFOUPLZPKQ
)JTUPSZ
)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ
"KBY͕༗໊ʹͳΔ8FCͱ͍͏ϫʔυ͕ൃͨ͠)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ
J1IPOF͕ൃച)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ"KBY͕༗໊ʹͳΔ8FCͱ͍͏ϫʔυ͕ൃͨ͠
8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ"KBY͕༗໊ʹͳΔ8FCͱ͍͏ϫʔυ͕ൃͨ͠J1IPOF͕ൃച8FCͷϑϩϯτΤϯυ։ൃ8FCͰෳࡶԽ͍ͯͨ͠
5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද1PMZNFSWϦϦʔε)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ"KBY͕༗໊ʹͳΔ8FCͱ͍͏ϫʔυ͕ൃͨ͠J1IPOF͕ൃച8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ8$9)5.-ͱ͔ɺΘ͚Θ͔ΒΜͷͰɺΈΜͳͷྗͰϒϥβͷ3BXϨϕϧ"1*Λղ์ͯ͠8FCͷੈքΛՃ͠Α͏
)5.-קࠂ1PMZNFS͕ϦϦʔε͞ΕΔ)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ"KBY͕༗໊ʹͳΔ8FCͱ͍͏ϫʔυ͕ൃͨ͠J1IPOF͕ൃച8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද1PMZNFSWϦϦʔε
1PMZNFS͕ϦϦʔε͞ΕΔ)551͕ঝೝ͞ΕΔ)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ"KBY͕༗໊ʹͳΔ8FCͱ͍͏ϫʔυ͕ൃͨ͠J1IPOF͕ൃച8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද1PMZNFSWϦϦʔε)5.-קࠂ1PMZNFS͕ϦϦʔε͞ΕΔ
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͕ঝೝ͞ΕΔ
)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͕Ճ͞Εͨ
w ࠷৽ͷόʔδϣϯw όʔδϣϯ·ͩ·ͩݱw (PPHMFͷ$ISPNFνʔϜ͕։ൃw 1PMZpMMͰͳ͍1PMZNFS
8FC$PNQPOFOUTw4IBEPX%0.w$VTUPN&MFNFOUTw)5.-*NQPSUTw)5.-5FNQMBUFThttps://github.com/w3c/webcomponents
6TF5IF1MBUGPSN
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
w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8wΞϓϦέʔγϣϯ࡞ΕΔwঢ়ଶཧͱ͔ίϯϙʔωϯτผͷϥΠϒϥϦ͕ඞཁwϑϧελοΫͰͳ͍w5ZQF4DSJQUαϙʔτ
)5.-&MFNFOUϓϩύςΟૢ࡞ςϯϓϨʔτૢ࡞σʔλόΠϯσΟϯά࣮ࡍΓ͍ͨࣄ
)5.-&MFNFOU1PMZNFS1SPQFSUZ"DDFTTPST1PMZNFS5FNQMBUF4UBNQ1PMZNFS1SPQFSUZ&GGFDUT1PMZNFS&MFNFOU
.BUFSJBMDPNQPOFOUTw (PPHMF*0Ͱൃද͞Εͨ৽͍͠σβΠϯͷ8FC$PNQPOFOUTw IUUQTHJUIVCDPNNBUFSJBMDPNQPOFOUTNBUFSJBMDPNQPOFOUTXFCDPNQPOFOUTw IUUQTNBUFSJBMDPNQPOFOUTHJUIVCJPNBUFSJBMDPNQPOFOUTXFCDPNQPOFOUTEFNPTJOEFYIUNM
-JU&MFNFOUw 1PMZNFSϕʔεͷܰྔ$VTUPN&MFNFOUϕʔεΫϥεw IUUQTHJUIVCDPN1PMZNFSMJUFMFNFOU<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/>
18"4UBSUFS,JUw -JU&MFNFOUͰ࡞ΒΕͨ18"σϞΞϓϦw IUUQTHJUIVCDPN1PMZNFSQXBTUBSUFSLJUw IUUQTQXBTUBSUFSLJUBQQTQPUDPN
https://polymer-jp.org/
8IZVTF)5.-*NQPSU/FFEFE1PMZpMM#PXFS.BEFCZ1PMZNFS
/FFE1PMZpMM
UP&4.PEVMFT
#PXFSUPOQN
8FBSFGSJFOEThttps://custom-elements-everywhere.com/
ະདྷ
w$444IBEPX1BSUT https://drafts.csswg.org/css-shadow-parts/w$VTUPN&MFNFOU3FHJTUFST https://github.com/w3c/webcomponents/issues/716w1BDLBHFOBNFNBQT https://github.com/domenic/package-name-mapsw)5.-.PEVMFT https://github.com/w3c/webcomponents/issues/645 https://github.com/PolymerLabs/html-modules-toolkitw)5.-5FNQMBUF*OTUBOUJBUJPO https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md
$444IBEPX1BSUTwΧελϜϓϩύςΟͱͷҧ͍wخ͍͜͠ͱ
$VTUPN&MFNFOU3FHJTUFST
1BDLBHFOBNFNBQT͜͏ॻ͖͍ͨ
)5.-.PEVMFT
)5.-5FNQMBUF*OTUBOUJBUJPO
WJTJUNZCMPHHJUIVChttps://github.com/sizuhikohttp://blog.open.tokyo.jp