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
210

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
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
97
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
Oracle Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
3
1.7k
ナレッジワークのご紹介（第88回情報処理学会 ）
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
170
元エンジニアPdM、IDEが恋しすぎてCursorに全業務を集約したら、スライド作成まで爆速になった話
Avatar for "doiko" chiaki_yamaguchi doiko123
1
560
タスク管理も1on1も、もう「管理」じゃない ― KiroとBedrock AgentCoreで変わった"判断の仕事"
Avatar for Yusuke Shimizu yusukeshimizu
5
2.4k
開発組織の課題解決を加速するための権限委譲 -する側、される側としての向き合い方-
Avatar for daitasu daitasu
5
480
マネージャー版 "提案のレベル" を上げる
Avatar for konifar konifar
22
15k
A Gentle Introduction to Transformers
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
2
1k
クラウド × シリコンの Mashup - AWS チップ開発で広がる AI 基盤の選択肢
Avatar for Hiroshi Tokoyo htokoyo
2
150
類似画像検索モデルの開発ノウハウ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
4
1.1k
マルチプレーンGPUネットワークを実現するシャッフルアーキテクチャの整理と考察
Avatar for Masayuki Kobayashi markunet
2
220
最強のAIエージェントを諦めたら品質が上がった話 / how quality improved after giving up on the strongest AI agent
Avatar for kt2 kt2mikan
0
130
Claude Code Skills 勉強会 (DevelersIO向けに調整済み) / claude code skills for devio
Avatar for MasahiroKawahara masahirokawahara
1
12k

Featured

See All Featured
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
69
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
220
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
840
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
440
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.3k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k

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