Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meguro.esの Web Components（勝手に） 作ってみた #meguroes

Avatar for tiwu tiwu
April 04, 2019
Technology
230
0

Meguro.esの Web Components（勝手に） 作ってみた #meguroes

Meguro.esの Web Components（勝手に） 作ってみた #meguroes

Avatar for tiwu

tiwu

April 04, 2019

More Decks by tiwu

See All by tiwu
Eleventy で SSG
Avatar for tiwu tiwu_dev
2
720
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
150
Install for PWA
Avatar for tiwu tiwu_dev
0
3.3k
App Shortcuts
Avatar for tiwu tiwu_dev
0
950
Web Vitals
Avatar for tiwu tiwu_dev
0
88
Web Share API
Avatar for tiwu tiwu_dev
0
3.3k
Badge in Background
Avatar for tiwu tiwu_dev
0
110
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
4.1k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
3.4k

Other Decks in Technology

See All in Technology
生成AI時代の クレデンシャルとパーミッション設計
Avatar for NRI Netcom nrinetcom
PRO
3
1.4k
プロダクトエンジニアに必要な「いい感じ」に作る能力 〜たくさん作れる時代に、どこまで作るかの決め方〜
Avatar for Jotaro Nishime jnishime_dresscode
2
980
Amazon S3 Tablesに全部任せてみた結果——コンパクション/スナップショット管理は本当に手放せるか
Avatar for ShigeruOda shigeruoda
0
190
Does an AI Watermark Survive Translation?
Avatar for Es C machinetranslation
0
520
最新技術に積極チャレンジ！EKS共通基盤のこれまでとこれから
Avatar for 高棹大樹 daitak
0
290
Self Healing Rollouts: Automating Production Fixes with Agentic AI
Avatar for Kevin Dubois kdubois
0
130
Backstageでつくるセルフサービスな社内開発基盤
Avatar for Sakazaki Kikunosuke kikunosuke75
1
210
なぜSRE・セキュリティは評価されないのか？守りの組織を事業成長エンジンに変えた実践
Avatar for サイバーセキュリティクラウド cscengineer
PRO
2
1.6k
AI時代におけるプロダクト横断勉強会の設計
Avatar for ZOZO Developers zozotech
PRO
0
130
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
77k
DGX Sparkを2台使って いろいろ動かす話
Avatar for そのだ sonoda_mj
1
120
KAEN Company Deck
Avatar for 株式会社KAEN kaen
PRO
0
260

Featured

See All Featured
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
390
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
200
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
440
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
550
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.9k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
800
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.3k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k

Transcript

  1. Meguro.esの Web Components（勝手に） 作ってみた Wataru Taguchi

  2. アジェンダ • 自己紹介 • 作ったぞい • まとめ

  3. 自己紹介 # Wataru Taguchi - GameWith Front End Engineer -

    PWAとかパフォーマンスチューニングが好き - @tiwu_official - FF14, Beer, Kyoto Animation

  4. みなさん！

  5. Meguro.esが好きですか！

  6. Meguro.esのロゴを 自分のサイトに 表示させたいですよね！

  7. Meguro.esのイベント情報 を自分のサイトに 表示させたいですよね！

  8. それWeb Components でできるよ

  9. <meguro-es-logo> <meguro-es-connpass-list>

  10. https://informal-meguro-es-we b-components.netlify.com/

  11. 使い方

  12. <script type="module" src="./src/js/meguroEsConnpassList.js"> </script>

  13. <meguro-es-connpass-list> </meguro-es-connpass-list>

  14. かんたん！！！！

  15. https://github.com/tiwuofficial/i nformal-meguro-es-web-comp onents

  16. Web Components? • カスタム要素 • Shadow DOM • HTML テンプレート

  17. カスタム要素

  18. Shadow DOM

  19. • constructorとconnectedCallbackの違いに気づく のが遅かった • conpassのAPIがJSONPだった つらみ

  20. Web Componentsは いいぞ