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
210
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
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
Sansanの認証基盤を支えるアーキテクチャとその振り返り
Avatar for SansanTech sansantech
PRO
1
120
自分をひらくと次のチャレンジの敷居が下がる
Avatar for aki sudoakiy
3
1.1k
BFCacheを活用して無限スクロールのUX を改善した話
Avatar for Ryuya Yanagi apple_yagi
0
140
Databricks Appsで実現する社内向けAIアプリ開発の効率化
Avatar for R-Miura r_miura
0
160
Datadog で実現するセキュリティ対策 ~オブザーバビリティとセキュリティを 一緒にやると何がいいのか~
Avatar for Shuntaro Azuma a2ush
0
180
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
61k
ブラックボックス化したMLシステムのVertex AI移行 / mlops_community_62
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
240
やさしいとこから始めるGitHubリポジトリのセキュリティ
Avatar for Yuta Matsumura tsubakimoto_s
3
2.1k
MIX AUDIO EN BROADCAST
Avatar for Erick Ralph Kionga ralpherick
0
140
AI時代のシステム開発者の仕事_20260328
Avatar for 閃利㈱河村 純 sengtor
0
320
GitHub Actions侵害 — 相次ぐ事例を振り返り、次なる脅威に備える
Avatar for GMO Flatt Security flatt_security
11
6.9k
Navigation APIと見るSvelteKitのWeb標準志向
Avatar for Okuto Oyama yamanoku
2
130

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
560
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
490
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
950
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
880
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.4k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Visualization
Avatar for Eitan Lees eitanlees
150
17k

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