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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
97
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
[AEON TECH HUB #24] お客様の長期的興味の理解に向けて
Avatar for alpicola alpicola
0
130
Datadog の RBAC のすべて
Avatar for 株式会社ヌーラボ nulabinc
PRO
3
410
Ultra Ethernet (UEC) v1.0 仕様概説
Avatar for Masayuki Kobayashi markunet
3
240
スクリプトの先へ！AIエージェントと組み合わせる モバイルE2Eテスト
Avatar for Ryo WATANABE error96num
0
120
事例に見るスマートファクトリーへの道筋〜工場データをAI Readyにする実践ステップ〜
Avatar for 濱田孝治 hamadakoji
1
260
新職業『オーケストレーター』誕生 — エージェント10体を同時に回すAgentOps
Avatar for Gunther Brunner gunta
4
1.7k
A Gentle Introduction to Transformers
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
2
1k
Kubernetesにおける推論基盤
Avatar for ry ry
1
180
DevOpsエージェントで実現する!！ AWS Well-Architected（W-A） を実現するシステム設計 / 20260307 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
410
DX Improvement at Scale
Avatar for ntk1000 ntk1000
3
440
kintone開発のプラットフォームエンジニアの紹介
Avatar for Cybozu cybozuinsideout
PRO
0
850
生成AIの利用とセキュリティ /gen-ai-and-security
Avatar for Masayoshi Mizutani mizutani
1
1.5k

Featured

See All Featured
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
240
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
140
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
250

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