Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Polymer による Web Components の 開発 / 2018-04-23-web-components-cafe-using-polymer
Search
Kenichiro Kishida
April 23, 2018
Technology
2
770
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
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
66
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
190
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
110
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
230
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.2k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
290
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
600
E2Eテストに向き合う/PHPerKaigi2020
sizuhiko
1
2.3k
PHPを学ぶということ / phpcon-2019
sizuhiko
1
1.8k
Other Decks in Technology
See All in Technology
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
260
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
230
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
MapLibreとAmazon Location Service
dayjournal
1
150
JAWS-UG Bedrock Claude Night
yamahiro
3
540
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
120
20分で完全に理解するGrafanaダッシュボード
hamadakoji
1
180
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
180
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.3k
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
750
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Automating Front-end Workflow
addyosmani
1356
200k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Designing Experiences People Love
moore
136
23k
Fireside Chat
paigeccino
21
2.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Ruby is Unlike a Banana
tanoku
96
10k
The Invisible Customer
myddelton
114
12k
Making Projects Easy
brettharned
108
5.5k
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