Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Polymer による Web Components の 開発 / 2018-04-23-web-components-cafe-using-polymer
Kenichiro Kishida
April 23, 2018
Technology
2
650
Polymer による Web Components の 開発 / 2018-04-23-web-components-cafe-using-polymer
Polymerを使ってWeb Componentsを作るとはどういうことなのか、その概念や思想、簡単な例を交えて紹介します。
Kenichiro Kishida
April 23, 2018
Tweet
Share
More Decks by Kenichiro Kishida
See All by Kenichiro Kishida
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
260
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
250
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
480
E2Eテストに向き合う/PHPerKaigi2020
sizuhiko
1
1.8k
PHPを学ぶということ / phpcon-2019
sizuhiko
1
1.4k
PuppeteerをE2Eテストに利用する/jsfes-2019-winter
sizuhiko
0
820
AMP/CakeFest 2019 Tokyo LT
sizuhiko
1
46
標準インターフェースを使った アプリケーション開発/phpcon-okinawa-2019
sizuhiko
0
420
PHPを学ぶということ / phpcondo-2019
sizuhiko
2
3.5k
Other Decks in Technology
See All in Technology
プログラマがオブジェクト指向しても幸せになれない理由
shirayanagiryuji
0
160
データ分析で切り拓け! エンジニアとしてのデータ分析職キャリア戦略
ksnt
0
170
Laravel.shibuyaで改善してきた IRT勉強会の運営方法について / IRT Study Session Improved Through Laravel Shibuya
fendo181
0
110
Apple M1 CPUの脆弱性「PACMAN」について解説する
kuzushiki
0
110
アーキテクチャを明文化して開発に臨んだ話
akkie76
0
360
ノーコードで Stripeを使いこなす3つの方法 / jp-stripes-online-vol-4
stripehideokamoto
0
310
DOM Invader - prototype pollution対応の衝撃 - / DOM Invader - prototype pollution
okuken
0
170
Meet passkeys
satotakeshi
1
130
情報の世界 2022年度 第11回「都市のデータ」 #情報の世界 / Data of City 2022
yumulab
0
110
miisan's career talk
mii3king
0
230
Citizen 개발기
outsider
0
300
【配布資料】複数データソースのデータを仮想化してまとめて分析してみよう(AWS、IBM Cloud)
tkhresk
0
100
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Statistics for Hackers
jakevdp
781
210k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Designing the Hi-DPI Web
ddemaree
272
32k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Documentation Writing (for coders)
carmenhchung
48
2.6k
How to Ace a Technical Interview
jacobian
265
21k
Scaling GitHub
holman
451
140k
For a Future-Friendly Web
brad_frost
166
7.4k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
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Ͱͳ͍
1PMZNFS
None
https://extensiblewebmanifesto.org/ ඪ४Խ৫Ͱ͋Δ8$ͱϒϥβϕϯμ͚ͩͰͳ͘ 8FC։ൃऀר͖ࠐΜͰ8FCͷະདྷΛ֦ு͍ͯ͜͠͏
6TF5IF1MBUGPSN
8FBSFGSJFOET https://custom-elements-everywhere.com/
None
None
<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
None
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