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.3k
App Shortcuts
Avatar for tiwu tiwu_dev
0
890
Web Vitals
Avatar for tiwu tiwu_dev
0
71
Web Share API
Avatar for tiwu tiwu_dev
0
1.4k
Badge in Background
Avatar for tiwu tiwu_dev
0
71
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
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
Avatar for pei0804 pei0804
1
200
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
Avatar for niizawat niizawat
0
130
機械学習を扱うプラットフォーム開発と運用事例
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
670
slog.Handlerのよくある実装ミス
Avatar for H.Saki sakiengineer
4
480
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
Avatar for かわりく / Kawano Riku kawanoriku0
1
220
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
Avatar for Kosaku Ono kevinrobot34
1
120
測りにくい成果を測る — BtoB SaaSにおける効果検証への挑戦 / Shirokane Kougyou vol 20
Avatar for Sansan R&D sansan_randd
1
110
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
Avatar for oracle4engineer oracle4engineer
PRO
4
10k
20250913_JAWS_sysad_kobe
Avatar for Takuya Yonezawa takuyay0ne
2
250
Create Ruby native extension gem with Go
Avatar for sue445 sue445
0
130
人工衛星のファームウェアをRustで書く理由
Avatar for KOBA789 koba789
15
8.3k
下手な強制、ダメ！絶対！ 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは？
Avatar for Masataka Tsukamoto tsukaman
2
460

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Faster Mobile Websites
Avatar for Dean Hume deanohume
309
31k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
13k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k

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