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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for tiwu tiwu
April 04, 2019
Technology
0
210

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
700
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
140
Install for PWA
Avatar for tiwu tiwu_dev
0
1.5k
App Shortcuts
Avatar for tiwu tiwu_dev
0
930
Web Vitals
Avatar for tiwu tiwu_dev
0
82
Web Share API
Avatar for tiwu tiwu_dev
0
1.5k
Badge in Background
Avatar for tiwu tiwu_dev
0
98
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.3k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.6k

Other Decks in Technology

See All in Technology
RGBに陥らないために -プロダクトの価値を届けるまで-
Avatar for RightTouch righttouch
PRO
0
130
Oracle Cloud Infrastructure：2026年3月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
160
How to install a gem
Avatar for André Arko indirect
0
1.9k
15年メンテしてきたdotfilesから開発トレンドを振り返る 2011 - 2026
Avatar for giginet giginet
PRO
1
200
OCI技術資料 : ロード・バランサ 概要 - FLB・NLB共通
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
4
27k
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
Avatar for kaomi kaomi_wombat
0
260
開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-
Avatar for SmartHR 品質保証本部 qa
0
400
FlutterでPiP再生を実装した話
Avatar for 白井翔大 s9a17
0
230
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
5
18k
MIX AUDIO EN BROADCAST
Avatar for Erick Ralph Kionga ralpherick
0
120
Cursor Subagentsはいいぞ
Avatar for Yuji Yamaguchi yug1224
2
110
韓非子に学ぶAI活用術
Avatar for tomfook tomfook
4
1.2k

Featured

See All Featured
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
230
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
150
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
390
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
260
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
97
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
470

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