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
いま注目のAIエージェントを作ってみよう
Avatar for Marimo supermarimobros
0
350
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
Avatar for Yuto Osawa osawa
1
400
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
Avatar for oracle4engineer oracle4engineer
PRO
0
180
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
Avatar for Naoko Shinagawa ratsbane666
0
100
RSCの時代にReactとフレームワークの境界を探る
Avatar for uhyo uhyo
10
3.5k
実践！カスタムインストラクション＆スラッシュコマンド
Avatar for puku0x puku0x
0
530
EncryptedSharedPreferences が deprecated になっちゃった！どうしよう！ / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
Avatar for Yuki Anzai yanzm
0
490
Apache Spark もくもく会
Avatar for Takaaki Yayoi taka_aki
0
140
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
Avatar for K.Mitsuhashi kaz3284
1
220
Rustから学ぶ 非同期処理の仕組み
Avatar for skanehira skanehira
1
150
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
Avatar for pei0804 pei0804
1
200
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
150

Featured

See All Featured
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Done Done
Avatar for chrislema chrislema
185
16k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.4k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
820
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
113
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
13k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k

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