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
180
ユーザースタイルシートや拡張機能で作る広告ブロック入門
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
2025.05.10 技術書とVoicyとわたし #RPALT
kaitou
1
280
#LAPRAS正夢LTグランプリ プログラミングで作る物理的アート
kaitou
0
71
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
220
目指せ!本を書いて夢の不労所得 #第3木曜LT会
kaitou
1
130
せっかくLTに登壇するならコレしてみませんか?
kaitou
0
110
Kaitouはどうしてエンジニアに!?(短縮版)
kaitou
0
59
音に負けない!子どもが騒いでいる脇でも快適オンラインMTGの秘伝
kaitou
0
440
自社開発企業から“良い”スカウトを受け取る方法
kaitou
0
120
電波が届かないキャンプ場で年末年始対応をするためにStarlinkを導入した話
kaitou
0
330
Other Decks in Programming
See All in Programming
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
240
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
470
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
540
品質ワークショップをやってみた
nealle
0
630
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
Cursorハンズオン実践!
eltociear
2
1.2k
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Side Projects
sachag
455
43k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Building Adaptive Systems
keathley
44
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Statistics for Hackers
jakevdp
799
220k
Docker and Python
trallard
46
3.6k
Automating Front-end Workflow
addyosmani
1371
200k
Building an army of robots
kneath
305
46k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
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