※審査中
新感覚 使い捨てるブックマーク
📝 プロジェクト概要
「Zatsu Mark（ザツ・マーク）」は、リサーチや一時的な作業中に、タブを開きすぎてブラウザがごちゃごちゃになってしまう問題を解決するためのChrome拡張機能です。
通常のブックマークとは異なり、「ブラウザを閉じるとすべて消える」という特性を持っています。整理整頓を気にする必要はなく、気になったページを文字通り「雑に」放り込んでおくことができる、一時的な作業用スペースを提供します。
ちょっと気になった動画や、その時は共有するか迷ったコンテンツでも、とりあえず雑に放り込んでおく。そんな緩い使い方をオススメしております。
✨ 主な特徴と機能
- 使い捨てのセッション管理
ブラウザのセッションストレージを活用し、ブラウザ終了時にデータが自動で破棄される設計です。 - システムに溶け込むUI
既存のブックマークバーの直下に配置。ライトモード・ダークモードに自動追従し、Chromeの純正機能のような違和感のないデザインを実現しました。 - 溢れ防止のオートキュー
バーの表示幅を監視し、画面幅を超えた場合は最も古いブックマークから自動的に削除され、常に最新の履歴が維持されます。 - 爆速ショートカット
Alt + S キーを押すだけで、アクティブなタブを瞬時に保存。マウス操作すら不要です。
🚀 使い方
- 気になったWebページを開いている状態で、ブラウザ上部の「Zatsu Mark」バーにある 「+ 保存」 ボタンをクリックするか、ショートカットキー（Alt + S）を押します。
- バーの左端から順番に、ページのファビコンとタイトル（12文字制限）が疑似ブックマークとして追加されていきます。
- 保存した疑似ブックマークをクリックすると、そのページへすぐにアクセスできます。
- 作業が終わり、ブラウザを閉じると、保存されたZatsu Markはすべて綺麗に消去されます。
🛠 技術的なこだわり・乗り越えた課題
この拡張機能の開発において最も難易度が高かったのは、「既存のWebサイトのレイアウトを一切崩さずに、最上部に自前のバーを挿入する」という高度なDOM操作とレイアウト制御です。
- 固定ヘッダー（fixed / sticky）との共存
YouTubeなど、画面上部にヘッダーが固定されているサイトでは、単純にバーを挿入するとヘッダーとコンテンツが被ってしまいます。これを解決するため、JavaScriptを用いてページ内のすべての固定要素を検知し、バーの高さ分（34px）だけ動的に相対移動させるアルゴリズムを実装しました。 - 動的レイアウト監視
スクロールや非同期処理によって後から生成・移動される要素に対応するため、DOMの変化を常時監視し、レイアウト崩れを自動で補正するエンジンを組み込んでいます。 - 全画面表示（F11 / 動画プレイヤー）のシームレスな対応
ユーザーが動画を全画面表示した際、Zatsu Markが邪魔にならないよう全画面イベントや画面サイズを検知。全画面時にはバーを非表示にするだけでなく、押し下げていたWebページのレイアウトを一時的に完全に元に戻し、全画面解除時に再びバーを描画して押し下げるという、複雑な状態管理を実現しています。
🎯 アピールポイント
このプロジェクトを通じて、以下の能力を証明しています。
- 高度なDOM操作とブラウザの挙動理解
様々な構造を持つWebサイトに対し、汎用的かつ安全に要素を挿入・制御する技術力。特に、固定要素の相対移動や全画面表示時のレイアウト復元など、エッジケースに対応する実装力があります。 - パフォーマンスを意識した設計
DOMの常時監視という負荷のかかる処理に対し、適切な間隔での実行や変更の差分チェックを行うことで、ブラウザのパフォーマンス低下を防いでいます。 - ユーザー体験（UX）へのこだわり
「雑に使える」というコンセプトを体現するため、ショートカットキーによる操作の簡略化、OSのテーマに合わせた配色、画面幅に応じた自動整理など、細部にまでこだわった設計を行いました。
💻 使用技術
JavaScript (Vanilla JS) / CSS3 (Flexbox, Media Queries) / Chrome Extension API (Manifest V3)
※コメントポリシーはこちらから。