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
130
ユーザースタイルシートや拡張機能で作る広告ブロック入門
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
#LAPRAS正夢LTグランプリ プログラミングで作る物理的アート
kaitou
0
45
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
130
目指せ!本を書いて夢の不労所得 #第3木曜LT会
kaitou
0
81
せっかくLTに登壇するならコレしてみませんか?
kaitou
0
74
Kaitouはどうしてエンジニアに!?(短縮版)
kaitou
0
41
音に負けない!子どもが騒いでいる脇でも快適オンラインMTGの秘伝
kaitou
0
360
自社開発企業から“良い”スカウトを受け取る方法
kaitou
0
92
電波が届かないキャンプ場で年末年始対応をするためにStarlinkを導入した話
kaitou
0
300
Other Decks in Programming
See All in Programming
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
190
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
220
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
230
CTFのWebにおける⾼難易度問題について
hamayanhamayan
1
940
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
110
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
970
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.5k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
170
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
740
Functional APIから再考するLangGraphを使う理由
os1ma
5
650
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
220
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
33
6.5k
Site-Speed That Sticks
csswizardry
4
450
Large-scale JavaScript Application Architecture
addyosmani
511
110k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Why Our Code Smells
bkeepers
PRO
336
57k
How GitHub (no longer) Works
holman
314
140k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Music & Morning Musume
bryan
46
6.4k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Faster Mobile Websites
deanohume
306
31k
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