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
Web Componentsを1年使って / jsfes 2016-10
Search
Kenichiro Kishida
October 16, 2016
Technology
0
420
Web Componentsを1年使って / jsfes 2016-10
秋のJavaScriptt祭り 2016年10月 LT
Kenichiro Kishida
October 16, 2016
Tweet
Share
More Decks by Kenichiro Kishida
See All by Kenichiro Kishida
Code兄弟での CI/CDをいい感じにする方法 / phpstudy-2024-06
sizuhiko
0
74
Webアクセシビリティワークショップを社内でやってみた / phpconfuk-2024
sizuhiko
1
160
デベロッパーよ 健康でいるためには 寝て 旅をして 趣味を持って メンタル大切に / DE-RADIO-2023-06-26
sizuhiko
0
75
ヘビータブユーザーが ワークスペースの利用でどのように変わったか / 2023-05-16 Vivaldi User Meetup TOKYO 2023
sizuhiko
0
220
Node.js v18 ベースイメージを使った AWS Lambda アプリ開発におけつ光と影 / 2023-04-23 JavaScript Fes
sizuhiko
0
110
@swc-node/jest を使って テストを高速化する/jsfes-2022
sizuhiko
0
260
Rails 7の採用提案で注目を集め始めた Import maps の過去、現在、そして未来について/de radio 2
sizuhiko
2
1.3k
勉強会主体で サービスを作るということ/esm-meetup-3
sizuhiko
0
300
オンライン勉強会や イベントで 盛り上がりを共有したい!/jsfes2021-summer
sizuhiko
0
630
Other Decks in Technology
See All in Technology
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
Classmethod Odyssey 登壇資料
yamahiro
0
390
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
63
4.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Six Lessons from altMBA
skipperchong
24
3.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Building Applications with DynamoDB
mza
89
5.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Transcript
8FC$PNQPOFOUT Λͬͯ ळͷ+BWB4DSJQUࡇΓCZ!TJ[VIJLP
,FOJDIJSP,JTIJEB 5PLZP +"1"/ TJ[VIJLP!HNBJMDPN !TJ[VIJLP IUUQTHJUIVCDPNTJ[VIJLP IUUQCMPHPQFOUPLZPKQ
େࣄͳ͜ͱ࠷ॳʹ
ͦ͏ͩ1PMZNFS͓͏ 1PMZNFS
1PMZNFS https://www.polymer-project.org
˞썪쎅-5쎆ൃදऀ쎅 ɹมଶత쎁1PMZNFSѪ쎂ຬ썸썽썛쎕썰 ɹ썫ҙ썦썷썬썛
͍ͨ͘ͳΔཧ༝ w ֶशίετ͕͍ +4͕গͳΊʣ w 41"͡Όͳͯ͘ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣ w ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δ
w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥβʢ1PMZpMMʣ
Α͘ݴΘΕΔ͜ͱ w ͱΜ͕ͬͯΔͶʂ w ͍ͬͯΔਓ͡Ίͯݟͨ w ͑Δͷʁ w ੲ
ͬͨ͜ͱ͋Δ w ͭΒ͘ͳ͍ʁ
w W w WW w WW w W w W
w W w W w W w W https://github.com/Polymer/polymer/releases 89 Releases!!
ۤ썮썴썝썢ɺࠔ썺썶쎁 ۤ썮썛쎅쎆썶쎡લ쎁쎪썷써쎀쎁 쎆ւਤ쎅쎁썛ߤ࿏쎩ߦ썦쎪썷쎤ʁ ઓ썰쎢쎅쎙ɺੜ쎖ग़썰쎅쎙ɺۤ썮썛쎟 썾쎙ɺॆ࣮썮썽쎢 ʮ࢛݄܅ͷӕʯΑΓ༗അެਖ਼ͷ໊ݴ
Α͔ͬͨ͜ͱ w )5.-λά࠶ར༻ੑ͕ߴ͍ w ಈ͖ͷ͋Δϖʔδ͕؆୯ʹ࡞ΕΔ w ϒϩοΫΛΈཱͯΔΑ͏ͩ w άϩʔόϧԚછͳʹͦΕ w
͡ΊͯͷਓೃછΈ͍͢ w ʢ׳Εͨਓ͕͍ͨํ͕ྑ͍ʣ
͍ͨ͘ͳΔཧ༝ w ֶशίετ͕͍ +4͕গͳΊʣ w 41"͡Όͳͯ͘ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣ w ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δ
w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥβʢ1PMZpMMʣ
WebComponent ͬͯ·͔͢ʁ
8FC$PNQPOFOUT w4IBEPX%0. w$VTUPN&MFNFOUT w)5.-*NQPSUT w)5.-5FNQMBUFT https://github.com/w3c/webcomponents
ݱࡏʹϐϯΛཱͯͨਤΛද͍ࣔͨ͠
<div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js? callback=createMap"> </script> <script> function createMap() {
navigator.geolocation.getCurrentPosition(position => { const map = new google.maps.Map(document.getElementById('map'), { center: { lat: position.coords.latitude, lng: position.coords.longitude}, zoom: 17 }); new google.maps.Marker({position: center, map: map}); }); } </script>
<geo-location latitude=“{{lat}}" longitude=“{{lng}}”/> <google-map latitude=“[[lat]]" longitude="[[lng]]" zoom="17"> <google-map-marker latitude="[[lat]]" longitude=“[[lng]]"
/> </google-map>
ಠࣗ$PNQPOFOUT <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="タグ名"> <template> <style> <!— 独自のCSS
—> </style> <!— 独自コンポーネントのHTML —> </template> <script> Polymer({ is: 'タグ名', properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script> </dom-module>
+BWB4DSJQU쎆؆୯썾썤썷써쎀 썴쎣쎆8FC썾Ձ쎩ग़썰썶쎘쎅खஈ썾썙썺썽 +4গ쎁쎘썾쎙࠷େݶ쎂Ձ썣ग़썲쎢ํ๏ 썷썺썶쎡ɺ खஈ썣తԽ썮쎁썛썪썿썣 ॏཁ썷썿ࢥ썝쎪썾썰쎟 ͱ͋Δ࠙ձͰ1PMZNFSѪ͕͍͖͗ͨ͢ͱ͖ͷൃݴ
͍ͨ͘ͳΔཧ༝ w ֶशίετ͕͍ +4͕গͳΊʣ w 41"͡Όͳͯ͘ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣ w ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δ
w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥβʢ1PMZpMMʣ
w1PMZNFS w95BH w#040/*$ w4LBUF+4 w3FBDU+4 w"OHVMBS 8FC$PNQPOFOUT >8FC$PNQPOFOUTPSH
http://qiita.com/laco0416/items/a75da4d7c2f0a21e0344
http://qiita.com/ko2ic/items/2aa3090dec040bd78eeb
http://hayato.io/2016/shadowdomv1/
͍ͨ͘ͳΔཧ༝ w ֶशίετ͕͍ +4͕গͳΊʣ w 41"͡Όͳͯ͘ྑ͍ w 8$ඪ४ʹ͍ۙʢಠࣗͰͳ͍ʣ w ͢Ͱʹଟͷίϯϙʔωϯτ͕͋Δ
w υΩϡϝϯτ͕ॆ࣮͍ͯ͠Δ w Ϋϩεϒϥβʢ1PMZpMMʣ
https://elements.polymer-project.org/
w8FC$PNQPOFOUT w%BUB#JOEJOH w#FIBWJPST w)FMQFST w.BUFSJBM%FTJHO w$-*5PPMT
ಠࣗ$PNQPOFOUT <link rel="import" href="../bower_components/polymer/polymer.html"> <dom-module id="タグ名"> <template> <style> <!— 独自のCSS
—> </style> <!— 独自コンポーネントのHTML —> </template> <script> Polymer({ is: 'タグ名', properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script> </dom-module>
֦ுλά <link rel="import" href="../bower_components/polymer/polymer.html"> <script> Polymer({ is: 'my-input', extends: 'input',
behaviors: [Polymer.IronValidatableBehavior], properties: { hoge: {type: Boolean, value: false} // HTMLのタグ属性などを定義 }, ready: function() { // コンポーネントが利用可能になったときの処理 } }); </script>
#FIBWJPST wڞ௨ॲཧΛఆٛͰ͖Δ wNJYJO
)FMQFST <iron-ajax url="/users" handle-as="json" method="GET" last- response="{{users}}"></iron-ajax> <ul> <template is="dom-repeat"
items="[[users]]" as="user"> <li>{{user.name}}</li> </template> </ul> <template is="dom-if" if="[[admin]]"> <div>管理者だったら何か</div> </template>
ͦ͏ͩ1PMZNFS͓͏ 1PMZNFS
WJTJUNZCMPHHJUIVC https://github.com/sizuhiko http://blog.open.tokyo.jp