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-we...
Search
Kenichiro Kishida
April 23, 2018
Technology
2
860
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
Code兄弟での CI/CDをいい感じにする方法 / phpstudy-2024-06
sizuhiko
0
190
Webアクセシビリティワークショップを社内でやってみた / phpconfuk-2024
sizuhiko
1
360
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
150
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
330
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
210
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
390
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.4k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
350
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
710
Other Decks in Technology
See All in Technology
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
9
2.9k
Agile PBL at New Grads Trainings
kawaguti
PRO
1
380
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
530
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
240
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
3
260
AI駆動開発に向けた新しいエンジニアマインドセット
kazue
0
330
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
210
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
310
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
630
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Optimizing for Happiness
mojombo
379
70k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Invisible Side of Design
smashingmag
301
51k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Producing Creativity
orderedlist
PRO
347
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
A better future with KSS
kneath
239
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Visualization
eitanlees
148
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
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