Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for tiwu tiwu
April 04, 2019
Technology
230
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
740
Eleventy - 11ty
Avatar for tiwu tiwu_dev
0
150
Install for PWA
Avatar for tiwu tiwu_dev
0
3.8k
App Shortcuts
Avatar for tiwu tiwu_dev
0
950
Web Vitals
Avatar for tiwu tiwu_dev
0
90
Web Share API
Avatar for tiwu tiwu_dev
0
3.9k
Badge in Background
Avatar for tiwu tiwu_dev
0
110
PWAとCache API #frontkansai
Avatar for tiwu tiwu_dev
5
4.7k
Web Componentsとlit-element #frontkansai
Avatar for tiwu tiwu_dev
2
3.9k

Other Decks in Technology

See All in Technology
dbt Semantic Layerで進めるenechainのデータ民主化
Avatar for Aki Zhou akizhou
1
200
ポケモン対戦を自動で記録して振り返ろう
Avatar for Yusuke Fukasawa fufufukakaka
0
190
『SAR衛星データ解析入門』の ご紹介とその応用
Avatar for じゃらしまる syuchimu
0
140
20261017福岡devIO 「AIは"良いダッシュボード"を作れるか？
Avatar for 武田 jtakeda
0
220
Tofu-Controller lightning talk @ Containerday 2026
Avatar for Giovanni Toraldo gionn
0
170
AIカンパニーへの転換を支えた、エンジニアの仕事の再定義
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
1.4k
Rustuna: Rustによる高速なOptuna実装
Avatar for Preferred Networks pfn
PRO
0
210
OptunaHub: ブラックボックス最適化のためのプラットフォーム
Avatar for Preferred Networks pfn
PRO
0
150
ストレスなくAIと付き合いたい！こんなときどうしてる？
Avatar for Nami Kimura namiki64
4
660
Refining Active Record
Avatar for Shugo Maeda shugo
0
190
[JAWS-UG彩の国埼玉#12]そろそろ準備する？re:Invent2026をやさしく解説 / reinvent2026-sainokuni
Avatar for sh_fk2 sh_fk2
1
380
PHPカンファレンス関西の招待状 / Invitation to PHP Conference Kansai
Avatar for Y-KANOH ykanoh
0
220

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
13k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
8.1k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1.1k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
550
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
760
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
600
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.8k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
2
750
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
92
590k
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
6
1.2k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
460

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