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
0
200

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

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

Avatar for tiwu

tiwu

April 04, 2019
Tweet

More Decks by tiwu

See All by tiwu
Eleventy で SSG
Avatar for tiwu tiwu_dev
2
670
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
140
Install for PWA
Avatar for tiwu tiwu_dev
0
1.3k
App Shortcuts
Avatar for tiwu tiwu_dev
0
880
Web Vitals
Avatar for tiwu tiwu_dev
0
71
Web Share API
Avatar for tiwu tiwu_dev
0
1.3k
Badge in Background
Avatar for tiwu tiwu_dev
0
68
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.4k

Other Decks in Technology

See All in Technology
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
Avatar for nihonbuson nihonbuson
PRO
0
590
LTに影響を受けてテンプレリポジトリを作った話
Avatar for Horikawa hol1kgmg
0
310
2025新卒研修・HTML/CSS #弁護士ドットコム
Avatar for 弁護士ドットコム bengo4com
3
13k
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
Avatar for masayoshi masayoshi
1
410
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
Avatar for ちょまど chomado
2
380
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
Avatar for LayerX layerx
PRO
4
1.6k
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
Avatar for Sansan R&D sansan_randd
0
130
Oracle Cloud Infrastructure：2025年7月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
1
120
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
Avatar for Riku INADA inariku
3
300
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
Avatar for Hayato Tan htan
1
210
Serverless Meetup #21
Avatar for 吉田真吾 yoshidashingo
1
110
Kiroから考える AIコーディングツールの潮流
Avatar for Oikon s4yuba
4
670

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
2.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.8k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.5k

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は いいぞ