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
Meguro.esのWeb Components(勝手に) 作ってみた #meguroes
Search
tiwu
April 04, 2019
Technology
0
200
Meguro.esの Web Components(勝手に) 作ってみた #meguroes
Meguro.esのWeb Components(勝手に) 作ってみた #meguroes
tiwu
April 04, 2019
Tweet
Share
More Decks by tiwu
See All by tiwu
Eleventy で SSG
tiwu_dev
2
670
Eleventy - 11ty
tiwu_dev
0
140
Install for PWA
tiwu_dev
0
1.3k
App Shortcuts
tiwu_dev
0
880
Web Vitals
tiwu_dev
0
71
Web Share API
tiwu_dev
0
1.3k
Badge in Background
tiwu_dev
0
66
PWAとCache API #frontkansai
tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.4k
Other Decks in Technology
See All in Technology
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.1k
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
130
OPENLOGI Company Profile
hr01
0
67k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.4k
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
AWS認定を取る中で感じたこと
siromi
1
190
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
怖くない!はじめてのClaude Code
shinya337
0
400
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.5k
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
160
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How to Ace a Technical Interview
jacobian
278
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Language of Interfaces
destraynor
158
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Designing for humans not robots
tammielis
253
25k
Transcript
Meguro.esの Web Components(勝手に) 作ってみた Wataru Taguchi
アジェンダ • 自己紹介 • 作ったぞい • まとめ
自己紹介 # Wataru Taguchi - GameWith Front End Engineer -
PWAとかパフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation
みなさん!
Meguro.esが好きですか!
Meguro.esのロゴを 自分のサイトに 表示させたいですよね!
Meguro.esのイベント情報 を自分のサイトに 表示させたいですよね!
それWeb Components でできるよ
<meguro-es-logo> <meguro-es-connpass-list>
https://informal-meguro-es-we b-components.netlify.com/
使い方
<script type="module" src="./src/js/meguroEsConnpassList.js"> </script>
<meguro-es-connpass-list> </meguro-es-connpass-list>
かんたん!!!!
https://github.com/tiwuofficial/i nformal-meguro-es-web-comp onents
Web Components? • カスタム要素 • Shadow DOM • HTML テンプレート
カスタム要素
Shadow DOM
• constructorとconnectedCallbackの違いに気づく のが遅かった • conpassのAPIがJSONPだった つらみ
Web Componentsは いいぞ