Polymer による Web Components の 開発 / 2018-04-23-web-components-cafe-using-polymer

Polymerを使ってWeb Componentsを作るとはどういうことなのか、その概念や思想、簡単な例を交えて紹介します。

Transcript

1. 1PMZNFS
   ʹΑΔ
 8FC
   $PNQPOFOUT
   ͷ
   ։ൃ 
   8FC
   $PNQPOFOUT
   $BGF
   CZ
   1PMZNFS
   +BQBO ,FOJDIJSP
   ,JTIJEB
   !TJ[VIJLP
2. ,FOJDIJSP
   ,JTIJEB
   5PLZP
   +"1"/
   TJ[VIJLP!HNBJMDPN
   
   !TJ[VIJLP
   IUUQTHJUIVCDPNTJ[VIJLP
   IUUQCMPHPQFOUPLZPKQ
   
3. w ݱࡏͷόʔδϣϯ͸
   w όʔδϣϯ͸ςΫχΧϧϓϨϏϡʔ൛
   w όʔδϣϯ΋·ͩ·ͩݱ໾
   w (PPHMFͷ$ISPNFνʔϜ͕։ൃ
   w 1PMZpMM
   Ͱ͸ͳ͍ 1PMZNFS
5. https://extensiblewebmanifesto.org/ ඪ४Խ૊৫Ͱ͋Δ8$ͱϒϥ΢βϕϯμ͚ͩͰͳ͘
   8FC։ൃऀ΋ר͖ࠐΜͰ8FCͷະདྷΛ֦ு͍ͯ͜͠͏
6. 6TF5IF1MBUGPSN
7. 8F
   BSF
   GSJFOET https://custom-elements-everywhere.com/
10. <iron-ajax auto url="https://www.googleapis.com/youtube/v3/search" params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}' handle-as="json" last-response="{{ajaxResponse}}"></iron-ajax> <template is="dom-repeat" items="[[ajaxResponse.items]]"> <div class="horizontal-section"> <h2><a href="[[url(item.id.videoId)]]" target="_blank">[[item.snippet.title]]</a></h2> <iron-image src="[[item.snippet.thumbnails.high.url]]" width="256" height="256" sizing="cover" preload fade></iron-image> <p>[[item.snippet.description]]</p> </div> </template> https://github.com/PolymerElements/iron-ajax
12. w8FC
    $PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8
    wΞϓϦέʔγϣϯ΋࡞ΕΔ
    wঢ়ଶ؅ཧͱ͔͸ίϯϙʔωϯτ΍ผͷϥ ΠϒϥϦ͕ඞཁ
    wϑϧελοΫͰ͸ͳ͍
13. QPMZNFS
    TIPQ w FίϚʔεͷ18"σϞ ΞϓϦ
    w IUUQTHJUIVCDPN 1PMZNFSTIPQ
    w IUUQT TIPQQPMZNFS QSPKFDUPSH
14. https://polymer-jp.org/
15. )5.-&MFNFOU ϓϩύςΟૢ࡞ ςϯϓϨʔτૢ࡞ σʔλόΠϯσΟϯά ࣮ࡍ΍Γ͍ͨࣄ
16. )5.-&MFNFOU 1PMZNFS1SPQFSUZ"DDFTTPST 1PMZNFS5FNQMBUF4UBNQ 1PMZNFS1SPQFSUZ&GGFDUT 1PMZNFS&MFNFOU
17. )5.-&MFNFOU 1PMZNFS&MFNFOU 2.2 KB 3.4 KB 8.8 KB 11 KB 1PMZNFS1SPQFSUZ&GGFDUT 1PMZNFS5FNQMBUF4UBNQ 1PMZNFS1SPQFSUZ"DDFTTPST
18. w ৽͍͠ΞϓϦέʔγϣϯͷ࡞੒
    w ৽͍͠$VTUPN
    &MFNFOUTͷ࡞੒
    w 18"ΞϓϦέʔγϣϯ$VTUPN
    &MFNFOUTͷϏϧυ
    w ࣗಈςετ
    w ϩʔΧϧαʔόʔىಈ 1PMZNFS
    $-* https://github.com/ Polymer/polymer-cli
19. w WW
    ͷϋΠϒϦουܗࣜͰॻ͔Ε ͨ
    $VTUPN
    &MFNFOU
    Λ
    W
    ܗࣜʹ ม׵͢Δ
    w 1PMZNFS
    ͕ఏڙ͢Δ
    W
    ༻ΤϨϝϯ τ͸ɺ͜ΕΛར༻ͯࣗ͠ಈม׵͞Ε ͍ͯΔ
    w W
    ͱಉ༷ʹɺϓϨϏϡʔ൛ 1PMZNFS
    .PEVMJ[FS https://github.com/ Polymer/polymer- modulizer
20. ࡞Δ
    WT
    ࢖͏
21. https://www.webcomponents.org/element/PolymerElements/paper-input <paper-input label="username"> <iron-icon icon="mail" slot="prefix"></iron-icon> <div slot="suffix">@email.com</div> </paper-input>
22. $VTUPN
    &MFNFOUT Polymer({ is: 'paper-input', behaviors: [Polymer.PaperInputBehavior, Polymer.IronFormElementBehavior], properties: { value: {notify: true, type: String}, },
23. )5.-
    5FNQMBUF <dom-module id="paper-input"> <template> <paper-input-container> <slot name="prefix" slot="prefix"></slot> <label hidden$="[[!label]]" aria-hidden="true" for$="[[_inputId]]" slot="label">[[label]]</label> <iron-input bind-value="{{value}}" slot="input" id$="[[_inputId]]"> <input type$="[[type]]"> </iron-input> <slot name="suffix" slot="suffix"></slot> </paper-input-container> </template> λά໊ ϓϨϑΟΫε ϥϕϧ αϑΟοΫε ࣮ࡍͷೖྗλά
24. )5.-
    5FNQMBUF <dom-module id="x-custom"> <script> class MyElement extends Polymer.Element { static get is() { return 'x-custom' } static get template() { return Polymer.html` <div>${this.headerTemplate}</div> <p>Hello this is some content</p> <div>${this.footerTemplate}</div> `; } static get headerTemplate() { return Polymer.html`...` } static get footerTemplate() { return Polymer.html`...` } } </script> </dom-module>
25. )5.-
    *NQPSUT <head> <link rel="import" href="/path/to/imports/stuff.html"> </head>
26. 4UZMF
    4IBEPX
    %0. <dom-module id="paper-input"> <template> <style> :host { display: block; } :host([focused]) { outline: none; } :host([hidden]) { display: none !important; }
27. *ODMVEF
    4UZMFT <dom-module id="paper-input"> <template> <style> input:disabled { @apply --paper-input-container-input-disabled; } input::-ms-input-placeholder { color: var(--paper-input-container-color, var(--secondary-text-color)); }
28. )BOEMF
    FWFOUT <dom-module id="my-button"> <template> <input type="button" on-tap="_tap" value="押して"> </template> <script> Polymer({ is: 'my-button', _tap: function() { console.log('押された'); } }); </script> </dom-module>
29. )BOEMF
    FWFOUT <dom-module id="my-button"> <template> <input type="button" value="押して" id="myButton"> </template> <script> Polymer({ is: 'my-button', _tap: function() { console.log('押された'); }, ready: function() { this.$.myButton.addEventListener('tap', this._tap); } }); </script> </dom-module>
30. %BUB
    CJOEJOH <dom-module id="paper-input"> <template> <paper-input-container> <slot name="prefix" slot="prefix"></slot> <label hidden$="[[!label]]" aria-hidden="true" for$="[[_inputId]]" slot="label">[[label]]</label> <iron-input bind-value="{{value}}" slot="input" id$="[[_inputId]]"> <input type$="[[type]]"> </iron-input> <slot name="suffix" slot="suffix"></slot> </paper-input-container> ಡΈࠐΈͷΈ ೖग़ྗ ಛఆͷϓϩύςΟ ʹ͸
    
    ͕ඞཁ
31. ಋೖࣄྫ https://www.slideshare.net/hiroyukiaggre/whos-using-polymer
32. ͦ͏ͩ
    1PMZNFS
    ࢖͓͏
33. WJTJU
    NZ
    CMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp