Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Kenichiro Kishida

November 04, 2017
Tweet

More Decks by Kenichiro Kishida

Other Decks in Technology

Transcript

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

    View Slide


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

    )5.-קࠂ

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

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

    J1IPOF͕ൃച

    8FC$PNQPOFOUTΛ(PPHMF͕ఏҊ

    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.ʹରԠͨ͠
    XFCDPNQPOFOUTPSH౷ҰԽ
    1PMZNFS͕ൃද͞ΕΔ
    1PMZNFS+BQBO͕ൃ଍ͨ͠
    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.ʹରԠͨ͠
    XFCDPNQPOFOUTPSH౷ҰԽ
    1PMZNFS͕ൃද͞ΕΔ
    1PMZNFS+BQBO͕ൃ଍ͨ͠
    4FSWJDF8PSLFS͕8FCLJUͰ։ൃதʹ
    )5.-קࠂ

    View Slide

  13. View Slide


  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.-קࠂ

    View Slide


  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.-קࠂ

    View Slide

  16. 6TF5IF1MBUGPSN

    View Slide

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

    View Slide

  18. ೔ຊͰ͸ʜ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. ˑ ˒˒˒˒˒˒˒

    View Slide

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

    View Slide





  25. <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/>

    View Slide

  26. https://www.youtube.com/watch?v=assSM3rlvZ8&t=1408s

    View Slide

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

    View Slide

  28. 1PMZNFS4VNNJU

    View Slide

  29. What’s Next for Polymer (Polymer Summit 2017) ΑΓ
    5FNQMBUF 4IBEPX%0. $VTUPN&MFNFOUT )5.-*NQPSUT
    ✅ ✅ ✅ ✅
    ✅ ‼
    ✅ ✅ ✅ ‼
    ✅ ‼
    ✅ ✅ ✅ ✅

    View Slide

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

    View Slide

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

    View Slide

  32. What’s Next for Polymer (Polymer Summit 2017) ΑΓ
    5FNQMBUF 4IBEPX%0. $VTUPN&MFNFOUT +4.PEVMFT
    ✅ ✅ ✅ ✅

    ✅ ✅ ✅ ✅

    ✅ ✅ ✅ ✅

    View Slide

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

    View Slide

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

    View Slide

  35. 4&04IBSJOH

    View Slide