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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for tiwu tiwu
April 04, 2019
Technology
220
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
710
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
150
Install for PWA
Avatar for tiwu tiwu_dev
0
1.7k
App Shortcuts
Avatar for tiwu tiwu_dev
0
940
Web Vitals
Avatar for tiwu tiwu_dev
0
85
Web Share API
Avatar for tiwu tiwu_dev
0
1.7k
Badge in Background
Avatar for tiwu tiwu_dev
0
100
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.5k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.8k

Other Decks in Technology

See All in Technology
どうして今サーバーサイドKotlinを選択したのか
Avatar for Nealle nealle
0
180
アラート調査向けAIエージェントの本番導入とその後/AI Agents for Alert Investigation: Production Deployment and After
Avatar for SadayoshiTada taddy_919
1
320
ループエンジニアリングでE2Eテストを実践
Avatar for Noriyuki TAKEI noriyukitakei
0
150
水を運ぶ人としてのリーダーシップ
Avatar for izumii19 izumii19
4
1.2k
Text-to-SQLをAgentCoreで実現し、生成されるSQLの精度を定量的に評価する
Avatar for やくも yakumo
2
380
FinOps X 2026 Recap from Engineer Side #JapanFinOps
Avatar for Satoshi Matsuzawa (Matt) chacco38
0
240
AI時代における最適なQA組織の作り方
Avatar for ymty ymty
3
330
そこにあるから地図ができる～位置を示す"モノ"を愉しむ～ - Interface 2026年6月号GPS特集オフ会 / interface_202606_GPS_offline
Avatar for sakaik sakaik
1
180
製造現場での生成AIの活用、およびエージェントAIの実装のあり方、AVEVAの取り組み
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
210
「ビジネスがわかるエンジニア」とは何か？
Avatar for ryooob ryooob
0
440
技術・能力を向上する原理原則 #きのこセッションa #きのこ2026
Avatar for bash0C7 bash0c7
0
190
40代で“やっとエンジニアになれた”――閉じた学びを開き、空の青さを知る / 20260628 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
1.6k

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
170
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
630
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
200
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
170

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