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
680
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
140
Install for PWA
Avatar for tiwu tiwu_dev
0
1.4k
App Shortcuts
Avatar for tiwu tiwu_dev
0
890
Web Vitals
Avatar for tiwu tiwu_dev
0
72
Web Share API
Avatar for tiwu tiwu_dev
0
1.4k
Badge in Background
Avatar for tiwu tiwu_dev
0
73
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.5k

Other Decks in Technology

See All in Technology
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
Avatar for Rasmus Lystrøm ondfisk
0
110
LLM時代にデータエンジニアの役割はどう変わるか？
Avatar for Ikki Miyazaki ikkimiyazaki
6
1.2k
Where will it converge?
Avatar for Ibukun Adedeji ibknadedeji
0
210
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
Avatar for marokiki marokiki
0
180
20251014_Pythonを実務で徹底的に使いこなした話
Avatar for 森田　一平 ippei0923
0
180
"プロポーザルってなんか怖そう"という境界を超えてみた＠TSUDOI by giftee Tech #1
Avatar for shilo shilo113
0
180
能登半島地震において デジタルができたこと・できなかったこと
Avatar for Masakatsu Sugii ditccsugii
0
110
自動テストのコストと向き合ってみた
Avatar for SmartHR 品質保証部 qa
1
220
10年の共創が示す、これからの開発者と企業の関係 ～ Crossroad
Avatar for SORACOM soracom
PRO
1
720
AWS Control Tower に学ぶ！ IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
Avatar for Yuta Otani y___u
0
140
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
Avatar for TAKAKING22 takaking22
8
4.1k
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
Avatar for kazzpapa3 kazzpapa3
1
150

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
KATA
Avatar for Megan Lloyd mclloyd
32
15k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
161
23k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
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は いいぞ