1PMZNFSΛ࢝ΊΔʹʙ1PMZNFSͷհ1PMZNFS+BQBO.FFUVQ,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͕ൃച
5IF&YUFOTJCMF8FC.BOJGFTUP͕ൃද1PMZNFSWϦϦʔε)5.-קࠂ 9.-)UUQ3FRVFTU͕*&ʹ࣮͞ΕΔ"KBY͕༗໊ʹͳΔ8FCͱ͍͏ϫʔυ͕ൃͨ͠J1IPOF͕ൃച8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ
)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.ʹରԠͨ͠XFCDPNQPOFOUTPSH౷ҰԽ1PMZNFS͕ൃද͞ΕΔ1PMZNFS+BQBO͕ൃͨ͠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.ʹରԠͨ͠XFCDPNQPOFOUTPSH౷ҰԽ1PMZNFS͕ൃද͞ΕΔ1PMZNFS+BQBO͕ൃͨ͠4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ)5.-קࠂ
6TF5IF1MBUGPSN
w1PMZNFS&MFNFOUεʔύʔΫϥεwΠϕϯτϋϯυϦϯάwσʔλγεςϜwϔϧύʔΤϨϝϯτw$-*πʔϧ
ຊͰʜ
1PMZNFShttps://www.polymer-project.org
)5.-&MFNFOUϓϩύςΟૢ࡞ςϯϓϨʔτૢ࡞σʔλόΠϯσΟϯά࣮ࡍΓ͍ͨࣄ
)5.-&MFNFOU1PMZNFS1SPQFSUZ"DDFTTPST1PMZNFS5FNQMBUF4UBNQ1PMZNFS1SPQFSUZ&GGFDUT1PMZNFS&MFNFOU
)5.-&MFNFOU1PMZNFS&MFNFOU2.2 KB3.4 KB8.8 KB11 KB1PMZNFS1SPQFSUZ&GGFDUT1PMZNFS5FNQMBUF4UBNQ1PMZNFS1SPQFSUZ"DDFTTPST
ˑ ˒˒˒˒˒˒˒
class BlogStar extends HTMLElement {static get observedAttributes() { return ['counter']; }constructor() {super();this._counter = 0;this.attachShadow({mode: 'open'});}connectedCallback() {if (!this._readied)this.render();}display() {this.output.innerHTML = '★'.repeat(this.counter);}get counter() { return this._counter; }set counter(value) {if (value != this._counter) {this._counter = parseInt(value);this.setAttribute('counter', value);}if (this._readied)this.display();}attributeChangedCallback(attr, oldValue, newValue) {if (oldValue !== newValue) {this[attr] = newValue;}}render() {this._readied = true;var button = document.createElement('star-selector');button.addEventListener('click', this.increment.bind(this));this.shadowRoot.appendChild(button);this.output = document.createElement('span');this.shadowRoot.appendChild(this.output);// Some styles for pretty.this.style.display = 'block';this.style.fontSize = '30px';this.output.style.marginLeft = '10px';}}customElements.define('blog-star', MyHTMLElement);
<br/>:host {<br/>display: block;<br/>font-size: 30px;<br/>}<br/>span {<br/>margin-left: 10px;<br/>}<br/>[[display(counter)]]<br/>class BlogStar extends Polymer.Element {<br/>static get is() { return 'star-selector'; }<br/>static get properties() {<br/>return {<br/>counter: {type: Number, reflectToAttribute: true}<br/>}<br/>}<br/>display(c) {<br/>return '★'.repeat(c);<br/>}<br/>}<br/>customElements.define('blog-star', BlogStar);<br/>
https://www.youtube.com/watch?v=assSM3rlvZ8&t=1408s
http://aspiring-chauffeur.glitch.me/
1PMZNFS4VNNJU
What’s Next for Polymer (Polymer Summit 2017) ΑΓ5FNQMBUF 4IBEPX%0. $VTUPN&MFNFOUT )5.-*NQPSUT✅ ✅ ✅ ✅✅ ‼✅ ✅ ✅ ‼✅ ‼✅ ✅ ✅ ✅
What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5PEBZ/BUJWF ‒ ❌4VQQPSUT%FFQ%FQFOEFODJFT ✅ ✅'JMF-FWFM /P#VOEMJOH3FRVJSFE ✅ ✅)5.-*NQPSUT
&4.PEVMFTWhat’s Next for Polymer (Polymer Summit 2017) ΑΓ✅ /BUJWF✅ 4VQQPSUT%FFQ%FQFOEFODJFT✅ 'JMF-FWFM /P#VOEMJOH3FRVJSFE
What’s Next for Polymer (Polymer Summit 2017) ΑΓ5FNQMBUF 4IBEPX%0. $VTUPN&MFNFOUT +4.PEVMFT✅ ✅ ✅ ✅✅ ✅ ✅ ✅ ✅✅ ✅ ✅ ✅ ✅
#PXFSWhat’s Next for Polymer (Polymer Summit 2017) ΑΓ 5PEBZ.BOBHFT%FQFOEFODJFT ✅ ✅3FTPMDFT7FSTJPO$POqJDUT ✅ ✅*OTUBMMT'MBU%FQFOEFODZ5SFF ✅ ✅"DUJWF$PNNVOJUZ ✅ ❌
:BSOOQNWhat’s Next for Polymer (Polymer Summit 2017) ΑΓ✅ .BOBHFT%FQFOEFODJFT✅ 3FTPMDFT7FSTJPO$POqJDUT✅ *OTUBMMT'MBU%FQFOEFODZ5SFF✅ "DUJWF$PNNVOJUZ
4&04IBSJOH