ユーザースタイルシートや拡張機能で作る広告ブロック入門

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でのサンプル

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経由で遷移という仕様になっている。個別ページを見た後にブラウザでページバックを選択すると、読み込んでいたページやスクロールがリセットされてしまうので、それが不便でせめて別ウィンドウを開いてストレスを軽減させたかったので作成。

ユーザースタイルシートや拡張機能で作る広告ブロック入門

ユーザースタイルシートや拡張機能で作る広告ブロック入門

Kaito UDAGAWA

More Decks by Kaito UDAGAWA

Other Decks in Programming

Featured

Transcript

1 © Metaps Holdings, Inc. 広告ブロック入門  ユーザースタイルシートや拡張機能で作るプラットフォーム戦略部宇田川海人株式会社メタップスホールディングス

3 © Metaps Holdings, Inc. プラットフォーム戦略部フロントエンドエンジニア宇田川海人 HTML3.2のよりも前の時代からウェブサイト制作、ECサイト、ウェブアプリの

4 © Metaps Holdings, Inc. せっかくCSSが使えるなら自分の業務に役に立つものを作ってみませんか？

5 © Metaps Holdings, Inc. ユーザースタイルシートとは？  「Internet Explorer」「Safari」「Firefox」「Opera」等にある（あった）、ユーザー側でスタイルシートを当てられる機能。

6 © Metaps Holdings, Inc. 実際に読み込ませてみると……  #TBP { display: none;

7 © Metaps Holdings, Inc. ではChromeは？  おそらくChromeにはユーザースタイルシートを読み込む機能がない。拡張機能で対応しているものがあり、有名どころで言うと「Stylus」「Stylish」あたりがあります。

8 © Metaps Holdings, Inc. どうせなら Chrome拡張自体を自分で作りませんか？

9 © Metaps Holdings, Inc. サンプル  コードは↓ https://github.com/Priarts/wework_event_link ※WeWork入居者向けのイベントページ用の拡張機能です ※拡張機能自体の使い方はREADMEを参照

10 © Metaps Holdings, Inc. ご清聴ありがとうございました！  よかったら「宇田川」と友だちになってください 󰚦 𝕏 @Kaitou1192