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
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
140
Install for PWA
Avatar for tiwu tiwu_dev
0
1.6k
App Shortcuts
Avatar for tiwu tiwu_dev
0
940
Web Vitals
Avatar for tiwu tiwu_dev
0
83
Web Share API
Avatar for tiwu tiwu_dev
0
1.6k
Badge in Background
Avatar for tiwu tiwu_dev
0
100
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.4k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.7k

Other Decks in Technology

See All in Technology
速さだけじゃない！ VoidZero ツールが移行先に選ばれる理由
Avatar for mizdra mizdra
PRO
6
750
関西に縁あるMicrosoft MVPsが語るCopilotの未来
Avatar for Kaz Asada | しがない情シス kasada
0
1.2k
BigQuery の Cross-cloud Lakehouse への歩み
Avatar for Tomonori Hayashi / ぴーはや phaya72
2
550
Agentic ERPをどう設計するか ー 受発注エージェントを動かす、現場の知見と設計思想ー
Avatar for 株式会社リチェルカ recerqainc
1
1.5k
Platform Engineering as a Product: Criteria for Improvement and Multi-Tenant Design
Avatar for Kumo Ishikawa kumorn5s
0
500
探して_入れて_作って_使う_Agent_Skills___LT.pdf
Avatar for 松尾淳平 peintangos
2
160
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
50k
Oracle AI Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
6
1.5k
はじめてのDatadog
Avatar for KairiM kairim0
0
280
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.8k
AI と創る新たな世界 / A New World Created with AI
Avatar for Kenji Saito ks91
PRO
0
110
MIERUNE JCT 発表資料「宇宙から伊能忠敬ごっこ」
Avatar for じゃらしまる syuchimu
0
180

Featured

See All Featured
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
220
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
61
44k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
200
Abbi's Birthday
Avatar for Violet Bock coloredviolet
2
7.9k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
280
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
480
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
410
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k

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