ユーザースクリプトでUIコンポーネントを非表示にするなど

2025/12/20（土）秋葉原電脳倶楽部 技術発表会 #26 で発表した資料です
https://akiba.connpass.com/event/377612/

Transcript

1. 2025年12⽉20⽇(⼟) 秋葉原電脳倶楽部 技術発表会 #26, meow (@meow_noisy)
2. 発表概要 u Notionの右下の「Notion AI」アイコンを ユーザースクリプトで消す⽅法を考えたことについて発表する u 留意点 u Webアプリ版Notionを対象とする u 今回紹介する⽅法は、基本的にはデスクトップ版Notionアプリで は使えない u 2025年12⽉時点のNotion UIを使って説明している
3. アジェンダ u Notionについて u ユーザースクリプトについて u Tampermonkeyで右下のアイコンを消すことの実践 u プラスアルファ: 空⾏でスペースキーで起動するのを防ぐ u おわりに
4. アジェンダ u Notionについて u ユーザースクリプトについて u Tampermonkeyで右下のアイコンを消すことの実践 u プラスアルファ: 空⾏でスペースキーで起動するのを防ぐ u おわりに
5. Notion とは u 情報管理のためのワークスペース u メモ・タスク管理・データベース・Wikiなどを⼀体化できる u 個⼈のノートアプリからチームのプロジェクト管理・ナレッジ共有と してまで幅広く利⽤可能 u 個⼈的に気に⼊っている点 u markdown記法で⽂章を表現できる u 同期がちゃんとしている u 私がnotionに乗り換える前に使っていたサービスでは、 同期失敗が頻発し競合ページが複製されまくっていた u ドキュメント間に階層構造を作れる u ページ内にページを作ることができて情報整理しやすい u ブラウザで使える u win, mac, linux どこでも使える 画像: https://www.notion.com/ja
6. Notion AI の顔アイコンが追加 u NotionにはNotion AIというAIアシスタント機能があった u ページ内の⽂章をAIに編集させるなどが可能 u 2024年9⽉ごろに、Notion AIを呼び出す際の 右下のアイコンが顔になる ※当時の画像を持っていないので 2025.12 の時点でのアイコンを使っている
7. Notion AI の顔アイコンの煩わしさ u ユーザが操作していない状態の時、gifアニメで顔が動く。 このアニメーションが⾮常に煩わしかった u 2025.12時点では動きがマイルドになっているが、実装された当 時はディズニー映画みたいなダイナミックな動きで顔がキョロキョ ロしていた u 消すオプションも無い u 有料プラン⼊っても切る設定がなかった u 流⽯に我慢できなかった u 執筆を⽌める度にアニメーションが⾛る u → 実⼒⾏使を決意 顔が動くアニメーション https://x.com/NotionHQ/status/1839327386892115992
8. 予備調査: ⼿動でコンポーネントを消してみる u ブラウザの検証ツールでコンポーネントのCSSセレクタを取得、 remove() で消せることを確認 u → ユーザースクリプトの出番 検証ツールで要素のパスを取得 検証ツールのコンソールでremove()を実⾏ アイコンが消えた
9. アジェンダ u Notionについて u ユーザースクリプトについて u Tampermonkeyで右下のアイコンを消すことの実践 u プラスアルファ: 空⾏でスペースキーで起動するのを防ぐ u おわりに
10. ユーザースクリプトとは u Webページにユーザー側から差し込んで動作を 変えたり機能を追加したりするための⼩規模の (jsの)スクリプト u 専⽤のブラウザ拡張を通して特定のURLで ⾃動実⾏し、webサイトが提供すること以上の ことができるようになる u ユーザースクリプトのためのブラウザ拡張は いくつかあるが、本記事では Tampermonkey を使⽤する u 別にGreasemonkeyなどでもよいはず ※⽣成AIで作成。フォントが崩壊していた部分は上から⽂字を張っています 実⾏ 変わる ⾒た⽬や挙動がカスタマイズされる
11. アジェンダ u Notionについて u ユーザースクリプトについて u Tampermonkeyで右下のアイコンを消すことの実践 u プラスアルファ: 空⾏でスペースキーで起動するのを防ぐ u おわりに
12. Tampermonkey のインストール u webブラウザの拡張機能としてインストール u https://chromewebstore.google.com/detail/tampermonke y/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja u 本スライドではchromeを使⽤ アイコンクリックするとこのような感じ ストア
13. Tampermonkey の使い⽅ u Tampamonkeyメニューから「新規スクリプトを追加」を選択 u エディタが開かれる u エディタにユーザースクリプト⽤のヘッダ(スクリプト名、どの サイトで実⾏するかなど)を書き、実⾏したいjsのスクリプトを 書く u ここらへんは⽣成AIの活⽤どころ(後述)
14. Tampermonkeyでアイコンを消す1/3 u ⽣成AIにユーザスクリプトを書かせる
15. [参考]AIが⽣成したスクリプト例 // ==UserScript== // @name Hide Notion Assistant Corner // @namespace https://tampermonkey.net/ // @version 1.0.0 // @description Remove Notion assistant corner button // @match https://www.notion.so/* // @grant none // ==/UserScript== (function () { 'use strict'; const selector = '#notion-app > div > div > div:nth-child(1) > div > div.notion-assistant-corner-origin-container > div'; const removeTarget = () => { const el = document.querySelector(selector); if (el) { el.remove(); return true; } return false; }; // すでに存在していれば即削除 if (removeTarget()) return; // SPA対策: DOM変化を監視 const observer = new MutationObserver(() => { if (removeTarget()) { observer.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true, }); })();
16. Tampermonkeyでアイコンを消す2/3 u Tampermonkeyのエディタに前ページのユーザースクリプ トをコピペし登録
17. Tampermonkeyでアイコンを消す3/3 u ブラウザ更新すると、⾮表⽰になる u 正常にユーザースクリプトが起動している ユーザースクリプトを起動するページだと アイコンにも(スクリプト数の)バッジが付く
18. ⚠ユーザースクリプトの注意事項 u ユーザースクリプトは便利だがもちろん注意点もある u DOMに機微情報を直接埋め込むと、Webアプリやページ内の他の スクリプトから参照される可能性があるため、パスワードやAPI キーなどの機密情報は埋め込まない u 野良で配布されているユーザスクリプトもむやみに使⽤しないよう に注意する u たとえ、“download all images automatically”みたいな便利そうな ⽂句を謳っていたとしても u 限界点として、アプリの仕様が変わればまたやりなおし u いたちごっこだが、⽣成AIのおかげで⽐較的楽に修正できるはず
19. アジェンダ u Notionについて u ユーザースクリプトについて u Tampermonkeyで右下のアイコンを消すことの実践 u プラスアルファ: 空⾏でスペースキーで起動するのを防ぐ u おわりに
20. プラスアルファを書く背景 u ここまでアイコンを消す⽅法を書いたが すでに先⾏事例がネットにあった u ただし採った⽅法は異なる u NotionのうざいAIアイコンを消す⽅法 ︓課⾦して即解約した私がたどり着いた 唯⼀の対処法｜munyoru u https://note.com/munyoru/n/n3c60 40c4864c u 私の発表が⼆番煎じだったのは残念だっ たが、同じサムネでかつ、同じポイント で同じようにキレていて、同じ論調だっ たのは握⼿したい気持ちになった
21. 先⾏事例の⽅法 u AdGuardのような広告ブロッカーでアイコンを(広告と⾒な して)選択して消す⽅法だった u このほうが広告ブロッカーを⼊れるだけなので楽だと思う
22. 先⾏⼿法の限界点 u 広告ブロッカーだとNotion編集中、 カーソルが空⾏にあった時にスペース キーを押してしまうとnotion aiが起 動してしまうことが防げないと述べら れていた u ミスタイプすることがあり、意外に煩わ しかったりする u 広告ブロッカーとの差別化として、 ユーザースクリプトでこれを防いでみ る スペース キー Notion AIが起動する…
23. キーバインド変更の ユーザースクリプトを作成 u notionのページ(html, js)をローカルに保存 u 保存したページファイル群のあるディレクトリ下でコー ディングAIエージェント(Codexなど)にnotionページを 参照させて依頼するだけ notion ページの ファイル群
24. キーバインド変更スクリプトを Tampamonkeyで実⾏ u ⾏頭 スペースでも notion ai が起動しないことを確認 u もちろん、前項の右下アイコン消すスクリプトと併⽤も可能 わかりにくいがNotionの⾏頭でスペースキーを押しても ただの空⽩になっている ⽣成されたスクリプトをTampamonkeyに登録
25. [参考]「ユーザースクリプトで キーバインド変更」の応⽤例 u 「chatgpt(ブラウザ版)のenterキーを、送信ではなく改⾏ にする」、みたいなことも、同じ要領でできる u 誤送信が防げて気兼ねなく⽂章を勢いでかけるので精神的に良い 勢い余ってenterキーを押しても安全! chatgptのページをcodexに⾷わせて作らせたユーザースクリプト
26. アジェンダ u Notionについて u ユーザースクリプトについて u Tampermonkeyで右下のアイコンを消すことの実践 u プラスアルファ: 空⾏でスペースキーで起動するのを防ぐ u おわりに
27. まとめ u notionのアイコンを(⽣成AIを活⽤しながら) ユーザースクリプトを⽤いて消すことについて Tampamonkeyの簡単な使い⽅とともに説明した u その他、ユーザースクリプトを使ったnotionの 拡張事例についても説明した u ⽣成AIに対象ページのhtml,css,jsを参照できるように して依頼して実現 u ユーザースクリプトは結構ユーザー体験が変わる のでご興味があれば! u ⽣成AIのお陰でユーザースクリプトの敷居が ⼤幅に下がったので検討の余地はあると思います おまけ: 実際に本⼈に聞いた結果はこちら。 ⾃分がnotion aiであることは理解しているが 解答は不正確だった。
28. 参考⽂献 u Tampermonkeyとは︖初⼼者向け使い⽅と簡単スクリプ ト解説 | 初⼼者エンジニアのつぶやき u https://www.takatechskill.com/archives/1112
29. ご清聴ありがとうございました @meow_noisy