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

1PMZNFSʹΑΔ  8FC$PNQPOFOUTͷ ։ൃ 8FC$PNQPOFOUT$BGFCZ1PMZNFS+BQBO ,FOJDIJSP,JTIJEB !TJ[VIJLP

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

w ݱࡏͷόʔδϣϯ͸ w όʔδϣϯ͸ςΫχΧϧϓϨϏϡʔ൛ w όʔδϣϯ΋·ͩ·ͩݱ໾ w (PPHMFͷ$ISPNFνʔϜ͕։ൃ w 1PMZpMMͰ͸ͳ͍
1PMZNFS

https://extensiblewebmanifesto.org/ ඪ४Խ૊৫Ͱ͋Δ8$ͱϒϥ΢βϕϯμ͚ͩͰͳ͘ 8FC։ൃऀ΋ר͖ࠐΜͰ8FCͷະདྷΛ֦ு͍ͯ͜͠͏

6TF5IF1MBUGPSN

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

<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

w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8 wΞϓϦέʔγϣϯ΋࡞ΕΔ wঢ়ଶ؅ཧͱ͔͸ίϯϙʔωϯτ΍ผͷϥ ΠϒϥϦ͕ඞཁ wϑϧελοΫͰ͸ͳ͍

QPMZNFSTIPQ w FίϚʔεͷ18"σϞ ΞϓϦ w IUUQTHJUIVCDPN 1PMZNFSTIPQ w IUUQT TIPQQPMZNFS
QSPKFDUPSH

https://polymer-jp.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

w ৽͍͠ΞϓϦέʔγϣϯͷ࡞੒ w ৽͍͠$VTUPN&MFNFOUTͷ࡞੒ w 18"ΞϓϦέʔγϣϯ$VTUPN &MFNFOUTͷϏϧυ w ࣗಈςετ w
ϩʔΧϧαʔόʔىಈ 1PMZNFS$-* https://github.com/ Polymer/polymer-cli

w WWͷϋΠϒϦουܗࣜͰॻ͔Ε ͨ$VTUPN&MFNFOUΛWܗࣜʹ ม׵͢Δ w 1PMZNFS͕ఏڙ͢ΔW༻ΤϨϝϯ τ͸ɺ͜ΕΛར༻ͯࣗ͠ಈม׵͞Ε ͍ͯΔ w Wͱಉ༷ʹɺϓϨϏϡʔ൛
1PMZNFS.PEVMJ[FS https://github.com/ Polymer/polymer- modulizer

࡞ΔWT࢖͏

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>

$VTUPN&MFNFOUT Polymer({ is: 'paper-input', behaviors: [Polymer.PaperInputBehavior, Polymer.IronFormElementBehavior], properties: { value:
{notify: true, type: String}, },

)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> λά໊ ϓϨϑΟΫε ϥϕϧ αϑΟοΫε ࣮ࡍͷೖྗλά

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

)5.-*NQPSUT <head> <link rel="import" href="/path/to/imports/stuff.html"> </head>

4UZMF4IBEPX%0. <dom-module id="paper-input"> <template> <style> :host { display: block; }
:host([focused]) { outline: none; } :host([hidden]) { display: none !important; }

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

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

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

%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> ಡΈࠐΈͷΈ ೖग़ྗ ಛఆͷϓϩύςΟ ʹ͸͕ඞཁ

ಋೖࣄྫ https://www.slideshare.net/hiroyukiaggre/whos-using-polymer

ͦ͏ͩ1PMZNFS࢖͓͏

WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp

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

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

Kenichiro Kishida

More Decks by Kenichiro Kishida

Other Decks in Technology

Featured

Transcript

1PMZNFSʹΑΔ  8FC$PNQPOFOUTͷ ։ൃ 8FC$PNQPOFOUT$BGFCZ1PMZNFS+BQBO ,FOJDIJSP,JTIJEB !TJ[VIJLP

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

w ݱࡏͷόʔδϣϯ͸ w όʔδϣϯ͸ςΫχΧϧϓϨϏϡʔ൛ w όʔδϣϯ΋·ͩ·ͩݱ໾ w (PPHMFͷ$ISPNFνʔϜ͕։ൃ w 1PMZpMMͰ͸ͳ͍

https://extensiblewebmanifesto.org/ ඪ४Խ૊৫Ͱ͋Δ8$ͱϒϥ΢βϕϯμ͚ͩͰͳ͘ 8FC։ൃऀ΋ר͖ࠐΜͰ8FCͷະདྷΛ֦ு͍ͯ͜͠͏

6TF5IF1MBUGPSN

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

<iron-ajax auto url="https://www.googleapis.com/youtube/v3/search" params='{"part":"snippet", "q":"polymer", "key": "xxxx", "type": "video"}' handle-as="json"

w8FC$PNQPOFOUTΛ࡞ΔͨΊͷܰྔ'8 wΞϓϦέʔγϣϯ΋࡞ΕΔ wঢ়ଶ؅ཧͱ͔͸ίϯϙʔωϯτ΍ผͷϥ ΠϒϥϦ͕ඞཁ wϑϧελοΫͰ͸ͳ͍

QPMZNFSTIPQ w FίϚʔεͷ18"σϞ ΞϓϦ w IUUQTHJUIVCDPN 1PMZNFSTIPQ w IUUQT TIPQQPMZNFS

https://polymer-jp.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

w ৽͍͠ΞϓϦέʔγϣϯͷ࡞੒ w ৽͍͠$VTUPN&MFNFOUTͷ࡞੒ w 18"ΞϓϦέʔγϣϯ$VTUPN &MFNFOUTͷϏϧυ w ࣗಈςετ w

w WWͷϋΠϒϦουܗࣜͰॻ͔Ε ͨ$VTUPN&MFNFOUΛWܗࣜʹ ม׵͢Δ w 1PMZNFS͕ఏڙ͢ΔW༻ΤϨϝϯ τ͸ɺ͜ΕΛར༻ͯࣗ͠ಈม׵͞Ε ͍ͯΔ w Wͱಉ༷ʹɺϓϨϏϡʔ൛

࡞ΔWT࢖͏

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>

$VTUPN&MFNFOUT Polymer({ is: 'paper-input', behaviors: [Polymer.PaperInputBehavior, Polymer.IronFormElementBehavior], properties: { value:

)5.-5FNQMBUF <dom-module id="paper-input"> <template> <paper-input-container> <slot name="prefix" slot="prefix"></slot> <label hidden$="[[!label]]"

)5.-5FNQMBUF <dom-module id="x-custom"> <script> class MyElement extends Polymer.Element { static

)5.-*NQPSUT <head> <link rel="import" href="/path/to/imports/stuff.html"> </head>

4UZMF4IBEPX%0. <dom-module id="paper-input"> <template> <style> :host { display: block; }

*ODMVEF4UZMFT <dom-module id="paper-input"> <template> <style> input:disabled { @apply --paper-input-container-input-disabled; }

)BOEMFFWFOUT <dom-module id="my-button"> <template> <input type="button" on-tap="_tap" value="押して"> </template> <script>

)BOEMFFWFOUT <dom-module id="my-button"> <template> <input type="button" value="押して" id="myButton"> </template> <script>

%BUBCJOEJOH <dom-module id="paper-input"> <template> <paper-input-container> <slot name="prefix" slot="prefix"></slot> <label hidden$="[[!label]]"

ಋೖࣄྫ https://www.slideshare.net/hiroyukiaggre/whos-using-polymer

ͦ͏ͩ1PMZNFS࢖͓͏

WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp

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

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

More Decks by Kenichiro Kishida

Other Decks in Technology

Featured

Transcript

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

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