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.4k
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.4k
Badge in Background
Avatar for tiwu tiwu_dev
0
110
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
4.2k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
3.5k

Other Decks in Technology

See All in Technology
GoにおけるFFIのこれまでとこれから
Avatar for Masaaki Goshima goccy
1
290
Where Is JetBrains AI Heading- — Central CLI, Air Alpha, and the Agentic Development Stack
Avatar for Daisuke Masuda x5gtrn
PRO
0
140
深夜のクラウド懺悔室 1:29:300 or 1:0:0
Avatar for kazzpapa3 kazzpapa3
0
190
Bet AI Day 2026丨Production-Ready AI Agents — エンタープライズの実務を任せるための設計と運用
Avatar for LayerX layerx
PRO
3
2.5k
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
Avatar for LayerX layerx
PRO
2
1.6k
生成AIのテナント制御とシャドーMCP対策 | AIを"止めずに"、情報を守る
Avatar for yu yukun
0
120
WAF 運用改善の承認サイクル/SRE_BizReach_MIXI_1
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
330
少人数データチームのDevin活用実践事例
Avatar for Runa Yamada runandy16
2
450
Bet AI Day 2026丨Agentは、「金融」という巨大産業の何を変えられるのか
Avatar for LayerX layerx
PRO
0
1.1k
Genie Code ワークショップ 応用編 / Genie-Code-Workshop-advanced
Avatar for Databricks Japan databricksjapan
PRO
0
360
プロダクトエンジニアに必要な「いい感じ」に作る能力 〜たくさん作れる時代に、どこまで作るかの決め方〜
Avatar for Jotaro Nishime jnishime_dresscode
2
1.4k
bet_ai_day_2026_session02
Avatar for 株式会社AgenticSec agenticsec
1
1.3k

Featured

See All Featured
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
870
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
690
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
65k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
1.1k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
550
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.7k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
230
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
510

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