Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ユーザースタイルシートや拡張機能で作る広告ブロック入門
Search
Kaito UDAGAWA
December 01, 2023
Programming
0
110
ユーザースタイルシートや拡張機能で作る広告ブロック入門
2023.12.1 に開催されたMeguro.cssにてお話した内容です。
https://megurocss.connpass.com/event/300400/presentation/
Kaito UDAGAWA
December 01, 2023
Tweet
Share
More Decks by Kaito UDAGAWA
See All by Kaito UDAGAWA
目指せ!本を書いて夢の不労所得 #第3木曜LT会
kaitou
0
71
せっかくLTに登壇するならコレしてみませんか?
kaitou
0
47
Kaitouはどうしてエンジニアに!?(短縮版)
kaitou
0
32
音に負けない!子どもが騒いでいる脇でも快適オンラインMTGの秘伝
kaitou
0
320
自社開発企業から“良い”スカウトを受け取る方法
kaitou
0
81
電波が届かないキャンプ場で年末年始対応をするためにStarlinkを導入した話
kaitou
0
290
Other Decks in Programming
See All in Programming
선언형 UI에서의 상태관리
l2hyunwoo
0
260
PHPUnitしか使ってこなかった 一般PHPerがPestに乗り換えた実録
mashirou1234
0
400
Beyond ORM
77web
11
1.5k
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
630
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.3k
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
240
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
250
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
6
340
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
300
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
390
数十万行のプロジェクトを Scala 2から3に完全移行した
xuwei_k
0
1.1k
Androidアプリの One Experience リリース
nein37
0
880
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
97
17k
Documentation Writing (for coders)
carmenintech
67
4.5k
Designing for Performance
lara
604
68k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Embracing the Ebb and Flow
colly
84
4.5k
KATA
mclloyd
29
14k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Become a Pro
speakerdeck
PRO
26
5.1k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
Transcript
1 © Metaps Holdings, Inc. 広告ブロック入門 ユーザースタイルシートや拡張機能で作る プラットフォーム戦略部 宇田川海人 株式会社メタップスホールディングス
2023年12月1日
3 © Metaps Holdings, Inc. プラットフォーム戦略部 フロントエンドエンジニア 宇田川 海人 HTML3.2のよりも前の時代からウェブサイト制作、ECサイト、ウェブアプリの
構築に携わる。途中セガサターンやPlayStationのソフトを玄孫受けぐらいの開 発会社で参画していたりもするが、基本はウェブ一筋。 2019年より株式会社メタップス(現・株式会社メタップスホールディングス) にフロントエンドエンジニアとして参画するが、チーム内ではあまりコードは 書かせてもらえず、別でビズ側やバックオフィス側の業務改善・支援ツールの 開発・運用をしている。 株式会社 メタップスホールディングス 𝕏 @Kaitou1192
4 © Metaps Holdings, Inc. せっかくCSSが使えるなら 自分の業務に役に立つものを 作ってみませんか?
5 © Metaps Holdings, Inc. ユーザースタイルシートとは? 「Internet Explorer」「Safari」「Firefox」 「Opera」等にある(あった)、ユーザー側で スタイルシートを当てられる機能。
macOSのSafariで言うと「設定」>「詳細」> 「スタイルシート」で、CSSファイルを 設定すると、そのCSSファイルに書かれている スタイルが適用されます。
6 © Metaps Holdings, Inc. 実際に読み込ませてみると…… #TBP { display: none;
} user_stylesheets.css を読み込ませる ここを囲っているdivのidがTBP display: none; が適用されて非表示になる
7 © Metaps Holdings, Inc. ではChromeは? おそらくChromeにはユーザースタイルシートを読み込 む機能がない。 拡張機能で対応しているものがあり、有名どころで言う と「Stylus」「Stylish」あたりがあります。
Stylishでのサンプル
8 © Metaps Holdings, Inc. どうせなら Chrome拡張自体を 自分で作りませんか?
9 © Metaps Holdings, Inc. サンプル コードは↓ https://github.com/Priarts/wework_event_link ※WeWork入居者向けのイベントページ用の拡張機能です ※拡張機能自体の使い方はREADMEを参照
const images = document.querySelectorAll('.card.event-details .event-img'); for (const image of images) { let label = image.getAttribute('src').split('/'); label = label[label.length - 1]; label = label.split('.jpg')[0]; image.outerHTML = '<a href="https://xxxxxxxx/XXXXXXXX/details?uuid=' + label + '">' + image.outerHTML + '</a>'; } window.scroll({ top: 0, behavior: 'smooth' }); main.js リンクカードの画像ファイル名に個別ページ用のURLのパラメー ターがあるので、そのimgタグを収集 取得したURLからファイル名を取得し、拡張子や余計なものを削除 画像自体をaタグで囲って、個別ページ用のURLを設定 これにより「⌘command+クリック」や「右クリック」で別ウィン ドウ遷移を可能にしている イベントページ自体は無限スクロールの仕様なので、一旦全部読み 込ませてから拡張機能を発動させるため、最後にページトップに戻 る処理 ▪なんでこんな拡張機能を作ったのか? このページはSPAで、各リンクもJS経由で遷移という仕様になってい る。個別ページを見た後にブラウザでページバックを選択すると、読 み込んでいたページやスクロールがリセットされてしまうので、それ が不便でせめて別ウィンドウを開いてストレスを軽減させたかったの で作成。
10 © Metaps Holdings, Inc. ご清聴ありがとうございました! よかったら「宇田川」と友だちになってください 𝕏 @Kaitou1192