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
2.2k
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
2.3k
Badge in Background
Avatar for tiwu tiwu_dev
0
100
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
3.1k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
2.3k

Other Decks in Technology

See All in Technology
PLATEAU で バーチャル花火大会
Avatar for tatsuya1970 tatsuya1970
0
150
ボトムアップ文化が強い組織で セキュリティをどう根付かせていくかの現在進行形の話 / Making Security Stick in a Bottom-Up Organization
Avatar for Takashi Yamaguchi yamaguchitk333
0
210
私がブラウザを自作したくなった理由
Avatar for Miyamoto Naoyuki supurazako
1
200
同じWAFが、攻撃の“形”は弾く── 正当な“形”の不正は通す
Avatar for kuroneko kuroneko13
0
130
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
2
7.7k
Cursor Meetup Sapporo - Cursor物語 続編
Avatar for Hiroyuki Kaji cocacola917
0
150
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ～最高のキャラゲーを目指して～
Avatar for Cygames, Inc. cygames
PRO
0
250
Pavlokで始める電撃駆動開発
Avatar for 佐藤陽威 sgrsn
0
190
サイバー捜査員研修（後半）
Avatar for Nomizo Nomizo nomizone
1
850
攻撃と防御で学ぶAI時代のプロダクトセキュリティ演習
Avatar for Recruit recruitengineers
PRO
9
2.6k
モバイルアプリ開発概論2026
Avatar for Recruit recruitengineers
PRO
5
570
認知負荷をGemini で溶かす — GKE 基盤「Orbit」における AI エージェントの実践
Avatar for SansanTech sansantech
PRO
1
290

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.1k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
930
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
600
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
39k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.6k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
160
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
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は いいぞ