Polymer を始めるには〜 Polymer の紹介 / polymer-japan-2017-11-04

1PMZNFSΛ࢝ΊΔʹ͸ ʙ1PMZNFSͷ঺հ 1PMZNFS+BQBO.FFUVQ ,FOJDIJSP,JTIJEB !TJ[VIJLP

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

)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$-*πʔϧ

೔ຊͰ͸ʜ

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

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

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

)5.-&MFNFOU 1PMZNFS&MFNFOU 2.2 KB 3.4 KB 8.8 KB 11 KB
1PMZNFS1SPQFSUZ&GGFDUT 1PMZNFS5FNQMBUF4UBNQ 1PMZNFS1SPQFSUZ"DDFTTPST

ˑ ˒˒˒˒˒˒˒ <blog-star count=7>

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);

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.PEVMFT What’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 ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅

#PXFS What’s Next for Polymer (Polymer Summit 2017) ΑΓ
5PEBZ .BOBHFT%FQFOEFODJFT ✅ ✅ 3FTPMDFT7FSTJPO$POqJDUT ✅ ✅ *OTUBMMT'MBU%FQFOEFODZ5SFF ✅ ✅ "DUJWF$PNNVOJUZ ✅ ❌

:BSO OQN What’s Next for Polymer (Polymer Summit 2017) ΑΓ
✅ .BOBHFT%FQFOEFODJFT ✅ 3FTPMDFT7FSTJPO$POqJDUT ✅ *OTUBMMT'MBU%FQFOEFODZ5SFF ✅ "DUJWF$PNNVOJUZ

4&04IBSJOH

Polymer を始めるには 〜 Polymer の紹介 / polymer-japan-20...

Polymer を始めるには 〜 Polymer の紹介 / polymer-japan-2017-11-04

More Decks by Kenichiro Kishida

Other Decks in Technology

Featured

Transcript

Polymer を始めるには〜 Polymer の紹介 / polymer-japan-20...

Polymer を始めるには〜 Polymer の紹介 / polymer-japan-2017-11-04