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
120
ユーザースタイルシートや拡張機能で作る広告ブロック入門
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
29
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
100
目指せ!本を書いて夢の不労所得 #第3木曜LT会
kaitou
0
77
せっかくLTに登壇するならコレしてみませんか?
kaitou
0
58
Kaitouはどうしてエンジニアに!?(短縮版)
kaitou
0
36
音に負けない!子どもが騒いでいる脇でも快適オンラインMTGの秘伝
kaitou
0
340
自社開発企業から“良い”スカウトを受け取る方法
kaitou
0
88
電波が届かないキャンプ場で年末年始対応をするためにStarlinkを導入した話
kaitou
0
300
Other Decks in Programming
See All in Programming
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
100
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
12
4.3k
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
160
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
51
17k
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
810
技術を根付かせる / How to make technology take root
kubode
1
250
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
昭和の職場からアジャイルの世界へ
kumagoro95
1
390
ARA Ansible for the teams
kksat
0
150
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
310
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
120
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
430
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Being A Developer After 40
akosma
89
590k
Agile that works and the tools we love
rasmusluckow
328
21k
Side Projects
sachag
452
42k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Practical Orchestrator
shlominoach
186
10k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Become a Pro
speakerdeck
PRO
26
5.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
BBQ
matthewcrist
87
9.5k
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