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
78
ユーザースタイルシートや拡張機能で作る広告ブロック入門
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
Kaitouはどうしてエンジニアに!?(短縮版)
kaitou
0
17
音に負けない!子どもが騒いでいる脇でも快適オンラインMTGの秘伝
kaitou
0
270
自社開発企業から“良い”スカウトを受け取る方法
kaitou
0
68
電波が届かないキャンプ場で年末年始対応をするためにStarlinkを導入した話
kaitou
0
260
Other Decks in Programming
See All in Programming
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
130
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
220
Playwrightから始めるVisual Regression Testingのススメ by とっと
totto2727
2
1.8k
REXML改善のその後
naitoh
0
150
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
2.7k
快適な開発と高セキュリティを実現するCryptoKitを活用したCoreDataのデータ暗号化術
grandbig
1
300
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
380
LR で JSON パーサーを作る / Coding LR JSON Parser
junk0612
2
170
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.2k
詳解UIWindow
natmark
3
2k
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
550
これからの時代の新標準!SwiftTestingへの移行とトラブルシューティング
uetyo
0
440
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
25
1.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
22
3.9k
Designing for humans not robots
tammielis
248
25k
Why Our Code Smells
bkeepers
PRO
333
56k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
165
48k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Code Reviewing Like a Champion
maltzj
518
39k
The Language of Interfaces
destraynor
153
23k
Embracing the Ebb and Flow
colly
83
4.4k
How to train your dragon (web standard)
notwaldorf
85
5.6k
What's in a price? How to price your products and services
michaelherold
241
11k
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