Save 37% off PRO during our Black Friday Sale! »

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

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

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

November 04, 2017
Tweet

Transcript

  1. 1PMZNFSΛ࢝ΊΔʹ͸ ʙ1PMZNFSͷ঺հ 1PMZNFS+BQBO.FFUVQ ,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͕ൃച

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

    J1IPOF͕ൃച ೥ 8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ
  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.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃ଍ͨ͠ 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.ʹରԠͨ͠ XFCDPNQPOFOUTPSH౷ҰԽ 1PMZNFS͕ൃද͞ΕΔ 1PMZNFS+BQBO͕ൃ଍ͨ͠ 4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ )5.-קࠂ
  13. None
  14. ೥ )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.-קࠂ
  15. ೥ )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.-קࠂ
  16. 6TF5IF1MBUGPSN

  17. w1PMZNFS&MFNFOUεʔύʔΫϥε wΠϕϯτϋϯυϦϯά wσʔλγεςϜ wϔϧύʔΤϨϝϯτ w$-*πʔϧ

  18. ೔ຊͰ͸ʜ

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

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

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

  22. )5.-&MFNFOU 1PMZNFS&MFNFOU 2.2 KB 3.4 KB 8.8 KB 11 KB

    1PMZNFS1SPQFSUZ&GGFDUT 1PMZNFS5FNQMBUF4UBNQ 1PMZNFS1SPQFSUZ"DDFTTPST
  23. ˑ ˒˒˒˒˒˒˒ <blog-star count=7>

  24. 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);
  25. <link rel="import" href="/bower_components/polymer/polymer-element.html"> <link rel="import" href="star-selector.html"> <dom-module id="blog-star"> <template> <style>

    :host { display: block; font-size: 30px; } span { margin-left: 10px; } </style> <star-selector count="{{counter}}"></star-selector> <span>[[display(counter)]]</span> </template> <script> class BlogStar extends Polymer.Element { static get is() { return 'star-selector'; } static get properties() { return { counter: {type: Number, reflectToAttribute: true} } } display(c) { return '★'.repeat(c); } } customElements.define('blog-star', BlogStar); </script> </dom-module>
  26. https://www.youtube.com/watch?v=assSM3rlvZ8&t=1408s

  27. http://aspiring-chauffeur.glitch.me/

  28. 1PMZNFS4VNNJU

  29. What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX%0.

    $VTUPN&MFNFOUT )5.-*NQPSUT ✅ ✅ ✅ ✅ ✅ ‼ ✅ ✅ ✅ ‼ ✅ ‼ ✅ ✅ ✅ ✅
  30. What’s Next for Polymer (Polymer Summit 2017) ΑΓ  5PEBZ

    /BUJWF ‒ ❌ 4VQQPSUT%FFQ%FQFOEFODJFT ✅ ✅ 'JMF-FWFM /P#VOEMJOH3FRVJSFE ✅ ✅ )5.-*NQPSUT 
  31. &4.PEVMFT What’s Next for Polymer (Polymer Summit 2017) ΑΓ ✅

    /BUJWF ✅ 4VQQPSUT%FFQ%FQFOEFODJFT ✅ 'JMF-FWFM /P#VOEMJOH3FRVJSFE
  32. What’s Next for Polymer (Polymer Summit 2017) ΑΓ 5FNQMBUF 4IBEPX%0.

    $VTUPN&MFNFOUT +4.PEVMFT ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅
  33. #PXFS What’s Next for Polymer (Polymer Summit 2017) ΑΓ 

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

    ✅ .BOBHFT%FQFOEFODJFT ✅ 3FTPMDFT7FSTJPO$POqJDUT ✅ *OTUBMMT'MBU%FQFOEFODZ5SFF ✅ "DUJWF$PNNVOJUZ
  35. 4&04IBSJOH