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
370
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / 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
720
Other Decks in Technology
See All in Technology
テストを軸にした生き残り術
kworkdev
PRO
0
220
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ:はじめてのローカルLLM
stanaka26
0
110
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
Create Ruby native extension gem with Go
sue445
0
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
kevinrobot34
1
130
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
180
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
250
KotlinConf 2025_イベントレポート
sony
1
140
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Unsuck your backbone
ammeep
671
58k
Designing for humans not robots
tammielis
253
25k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Context Engineering - Making Every Token Count
addyosmani
3
63
GitHub's CSS Performance
jonrohan
1032
460k
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