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 = '' + image.outerHTML + ''; } window.scroll({ top: 0, behavior: 'smooth' }); main.js リンクカードの画像ファイル名に個別ページ用のURLのパラメー ターがあるので、そのimgタグを収集 取得したURLからファイル名を取得し、拡張子や余計なものを削除 画像自体をaタグで囲って、個別ページ用のURLを設定 これにより「⌘command＋クリック」や「右クリック」で別ウィン ドウ遷移を可能にしている イベントページ自体は無限スクロールの仕様なので、一旦全部読み 込ませてから拡張機能を発動させるため、最後にページトップに戻 る処理 ■なんでこんな拡張機能を作ったのか？ このページはSPAで、各リンクもJS経由で遷移という仕様になってい る。個別ページを見た後にブラウザでページバックを選択すると、読 み込んでいたページやスクロールがリセットされてしまうので、それ が不便でせめて別ウィンドウを開いてストレスを軽減させたかったの で作成。

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