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
WebComponentsについて
Search
Shunya Shishido
October 06, 2014
Programming
0
320
WebComponentsについて
社内勉強会で発表
Shunya Shishido
October 06, 2014
Tweet
Share
More Decks by Shunya Shishido
See All by Shunya Shishido
PWA導入の成果と課題 / nikkei-pwa-html5conf2018
sisidovski
24
18k
Breaking the news in Japan: building the modern web in the far east
sisidovski
0
290
チーム開発について / Team Development with agile
sisidovski
0
410
日経電子版を速くする / nikkei-inside-frontend
sisidovski
50
25k
CDNを活用した日経電子版のネットワーク最適化とサイト高速化 / Nikkei ITPro CDN
sisidovski
20
8.6k
日経電子版 サイト高速化とPWA対応 / nikkei-high-performance-pwa
sisidovski
67
200k
Other Decks in Programming
See All in Programming
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
280
RDoc meets YARD
okuramasafumi
4
170
Navigating Dependency Injection with Metro
zacsweers
3
230
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
110
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
AIでLINEスタンプを作ってみた
eycjur
1
230
testingを眺める
matumoto
1
140
ProxyによるWindow間RPC機構の構築
syumai
3
1.1k
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
410
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
🔨 小さなビルドシステムを作る
momeemt
3
670
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
What's in a price? How to price your products and services
michaelherold
246
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Thoughts on Productivity
jonyablonski
70
4.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Why Our Code Smells
bkeepers
PRO
339
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
BBQ
matthewcrist
89
9.8k
Visualization
eitanlees
148
16k
Transcript
<web-‐components>
about me • ໊લ – ࣡ށढ़࠸ – ssd, sisidovski
• Front EndϝΠϯ
ࠓҰ͕ΜΔ͍ͧʂ
None
None
None
<ganbaru-‐zoi> • <ganbaru-‐zoi></ganbaru-‐zoi>ͱॻ͚͑ΔΧελϜλά – ͍ΘΏΔWebComponents – PolymerΛͬͨ
– chrome, firefox, safari, IE10ʙͰ͑Δͣ • github – https://github.com/sisidovski/zoi • bower – $ bower install ganbaru-‐zoi
DEMO http://sisidovski.github.io/zoi/
<ganbaru-‐zoi> • HTMLͱCSSɺϨϯμϦϯάޙΫϦοΫ࣌ͷৼΔ ͍Λ·ͱΊͯ1ͭͷίϯϙʔωϯτʹ͍ͯ͠Δ • ӨΛ࡞͍ͬͯΔCSS, Ξχϝʔγϣϯ෦ Polymer͕ఏڙ͍ͯ͠ΔΧελϜλάΛ෦Ͱར༻
• ਧ͖ग़͠ʹදࣔ͢ΔจࣈྻσʔλόΠϯσΟϯ άͰཧ
WebComponents? • ཁ͢Δʹʮ෦୯ҐͰׂʯ • Webඪ४ʹͳΔ༧ఆ – PCϒϥβͰؾ݉Ͷͳ͑͘Δʹ͏গ͠ઌͩͱࢥ͏
• ίϯϙʔωϯτΧϓηϧԽ͞ΕΔ – ֎෦ΛԚછ͠ͳ͍ • ίϯϙʔωϯτ࠶ར༻͕Մೳ • ͓͢͢ΊϦϯΫ – http://customelements.io/
WebComponents? • Custom Elements ෦Λ࡞ΔΈ • HTML Imports
෦Λݺͼग़͢Έ • Template ෦Λ͏Έ • Shadow DOM ෦ΛΧϓηϧԽ͢ΔΈ ্ه4ͭΛΈ߹ΘͤͯUIίϯϙʔωϯτ͕࡞ΕΔ ˠWebComponents
Polymer? • WebComponentsඇରԠϒϥβͷPolyfillϥΠϒ ϥϦ – ҋͷٕज़ͰAPIΛ༻ҙٖͯ͠ࣅతʹ͑ΔΑ͏ʹͯ͠ ͍Δ –
ྫ͑Shadow DOMݱঢ়chromeͱoperaͰ͔͑͠ ͳ͍ʢFirefox32Ҏ߱Ͱ༧ఆΒ͍͠ʣ • WebComponentsͷapiΛநԽ͍ͯ͘͢͠ • σʔλόΠϯσΟϯά
in other frameworks • ΧελϜλά࡞ΕΔ – Angular.jsͷσΟϨΫςΟϒ –
Knockout.js3.2͔ΒComponentsͱ͍͏ػೳͰ͑ΔΑ͏ʹͳΔ – Vue.jsComponent • WebComponentsͰͳ͍ – Shadow DOMʹରԠ͍ͯ͠ͳ͍ͷͰɺҾ͖ଓ͖άϩʔόϧԚછ ʹؾΛ͚ͭͨ։ൃ͕ඞཁ • Ұ෦ݹ͍IEʹରԠ͍ͯ͠Δ – ϑϨʔϜϫʔΫʹΑΓ͚Γ – Ұ෦੍͕͋ͬͨΓ͢Δ͕ɺPolymerΑΓखް͍
࡞ͬͯΈͨײ • ίϯϙʔωϯτ͝ͱʹΧϓηϧԽͰ͖Δͷେ͖͍ – ಛʹνʔϜ։ൃͰҖྗΛൃشͦ͠͏ • ίϯϙʔωϯτؒͰґଘ͕ؔ͋Δͱ͖ʹΠϯϙʔτ ͢Δॱংͱ͔Λؾʹ͠ͳͪ͘Ό͍͚ͳͯ͘ΞϨ
• ίϯϙʔωϯτͦΕͧΕඇಉظͰಡΈࠐ·ΕΔͷͰɺ Կ͠ͳ͍ͱϦΫΤετ͕രൃతʹ૿͑Δ – Polymer/Vulcanizeͱ͍͏πʔϧͰ·ͱΊΒΕΔͬΆ͍͚Ͳ ·ͩࢼͯ͠ͳ͍ɻgrunt/gulpϓϥάΠϯطʹ͋Δ
·ͱΊ • NewGame!ͷΧελϜλάΛ࡞ͬͨ • ະདྷͬΆ͍WebComponentsͱPolymerͷ • WebComponents·ͩ·ͩ՝ଟͦ͏
એ • ҕୗൢച • 8/17() ϗʔϧ͖-‐36B • Socket.IO
1.0ͷهࣄॻ͖· ͨ͠ • γΣϧεΫϦϓτͰWebΞ ϓϦ࡞ͬͨͱ͔Imutableͷ ࠷దղͱ͔ා͍هࣄ͕ଟ͍ ͷͰଟ໘ന͍