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
670
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
880
Web Vitals
Avatar for tiwu tiwu_dev
0
71
Web Share API
Avatar for tiwu tiwu_dev
0
1.3k
Badge in Background
Avatar for tiwu tiwu_dev
0
66
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
2.1k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
1.4k

Other Decks in Technology

See All in Technology
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
Avatar for あれ __allllllllez__
1
150
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
Avatar for ymrl ymrl
2
180
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
Avatar for Phil Huang pichuang
0
270
ビズリーチにおけるリアーキテクティング実践事例 / JJUG CCC 2025 Spring
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
1
120
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
Avatar for かわうそ kawauso
2
9.2k
赤煉瓦倉庫勉強会｢Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記｣
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
2
360
Should Our Project Join the CNCF? (Japanese Recap)
Avatar for whywaita whywaita
PRO
0
340
AI時代の開発生産性を加速させるアーキテクチャ設計
Avatar for PLAID Tech plaidtech
PRO
3
150
ネットワーク保護はどう変わるのか？re:Inforce 2025最新アップデート解説
Avatar for Shun Tokuyama tokushun
0
200
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
Avatar for Masato Ishigaki / 石垣雅人 i35_267
4
13k
CDKTFについてざっくり理解する！！～CloudFormationからCDKTFへ変換するツールも作ってみた～
Avatar for モブエンジニア masakiokuda
1
130
B2C＆B2B＆社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
Avatar for Belong inc. belongadmin
1
6.9k

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.7k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
95
6.1k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k

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