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

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

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

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

C4c161ae9eeeed8f161197410f7a228a?s=128

Kenichiro Kishida

April 23, 2018
Tweet

Transcript

  1. 1PMZNFSʹΑΔ
 8FC$PNQPOFOUTͷ ։ൃ 8FC$PNQPOFOUT$BGFCZ1PMZNFS+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
  4. None
  5. https://extensiblewebmanifesto.org/ ඪ४Խ૊৫Ͱ͋Δ8$ͱϒϥ΢βϕϯμ͚ͩͰͳ͘ 8FC։ൃऀ΋ר͖ࠐΜͰ8FCͷະདྷΛ֦ு͍ͯ͜͠͏

  6. 6TF5IF1MBUGPSN

  7. 8FBSFGSJFOET https://custom-elements-everywhere.com/

  8. None
  9. None
  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
  11. None
  12. w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8 wΞϓϦέʔγϣϯ΋࡞ΕΔ wঢ়ଶ؅ཧͱ͔͸ίϯϙʔωϯτ΍ผͷϥ ΠϒϥϦ͕ඞཁ wϑϧελοΫͰ͸ͳ͍

  13. QPMZNFSTIPQ 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. 4UZMF4IBEPX%0. <dom-module id="paper-input"> <template> <style> :host { display: block; }

    :host([focused]) { outline: none; } :host([hidden]) { display: none !important; }
  27. *ODMVEF4UZMFT <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. )BOEMFFWFOUT <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. )BOEMFFWFOUT <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. %BUBCJOEJOH <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. WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp