Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
730
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
150
Install for PWA
Avatar for tiwu tiwu_dev
0
3.6k
App Shortcuts
Avatar for tiwu tiwu_dev
0
950
Web Vitals
Avatar for tiwu tiwu_dev
0
90
Web Share API
Avatar for tiwu tiwu_dev
0
3.7k
Badge in Background
Avatar for tiwu tiwu_dev
0
110
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
4.5k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
3.8k

Other Decks in Technology

See All in Technology
可視化から始めたAI駆動開発_ochi_ver1.01 / AI-Driven Development Starting with Visualization_ver1.01
Avatar for yayoi_dd yayoi_dd
0
110
Lambda MicroVMsは常駐サーバーの代わりに なるか？ Kiro Crew を動かして検証してみた / Kiro Crew on Lambda MicroVMs
Avatar for Kazuki Adachi k_adachi_01
2
340
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
16
120k
20260929_AmazonGuardDutyの検出通知メールにAWS DevOpsAgentの調査結果を追加する
Avatar for yhana yhana
1
380
2026-09-26 Platform Engineering Kaigi 2026 インフラとアプリの境界線と委譲の設計 / Drawing the Infra and App Line
Avatar for SUZUKI Masashi masasuzu
0
500
AIに賢く動いてもらうためのコンテキスト〜Snowflake女子会 vol.8
Avatar for SnowflakeLadiesGroup snowwmn0824
0
200
スキルを作る、その前に！複数人で使われるスキルを 作るためのプロセス
Avatar for Junki Furukawa junkifurukawa
1
110
形式手法を使って仕様をコーディングしよう
Avatar for mikan mikanichinose
0
150
生成AIを使って「人が」考える技術 ― AI時代の人機共想と実践ノウハウ｜UNITT AC2026
Avatar for 石井力重 ishiirikie
0
450
地方移住と都心キャリアの両立は「金・時間・人」のリソースをフル活用すれば実現できる！〜Snowflake女子会 vol.8
Avatar for SnowflakeLadiesGroup snowwmn0824
0
140
Antigravity SDK for the Java Developer
Avatar for Guillaume Laforge glaforge
0
240
HolmesGPTで始めるSREエージェント入門！プラットフォームの障害調査はAIにお任せ 〜
Avatar for SANGHYUK LEE sanghyuk
0
250

Featured

See All Featured
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.9k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
560
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
420
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
250
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k

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