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

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

tiwu
April 04, 2019
Technology
0
180

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

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

tiwu

April 04, 2019
Tweet

More Decks by tiwu

See All by tiwu
Eleventy で SSG
tiwu_dev
2
640
Eleventy - 11ty
tiwu_dev
0
120
Install for PWA
tiwu_dev
0
1.2k
App Shortcuts
tiwu_dev
0
820
Web Vitals
tiwu_dev
0
61
Web Share API
tiwu_dev
0
1.2k
Badge in Background
tiwu_dev
0
51
PWAとCache API #frontkansai
tiwu_dev
5
2k
Web Componentsとlit-element #frontkansai
tiwu_dev
2
1.3k

Other Decks in Technology

See All in Technology
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
Googleマップ/Earthが一般化した
地図タイルのイマ
mapconcierge4agu
1
200
事業継続を支える自動テストの考え方
tsuemura
0
300
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
RailsConf 2023
tenderlove
29
1k
Docker and Python
trallard
44
3.3k
Agile that works and the tools we love
rasmusluckow
328
21k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Writing Fast Ruby
sferik
628
61k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k

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