Zatsu Mark
新感覚 使い捨てるブックマーク
プロジェクト概要
Zatsu Markは、ブラウザでのリサーチ中や一時的な作業中に発生する「タブの乱雑さ」を解消するために開発されたChrome拡張機能です。
最大の特徴は、すべての保存データが「ブラウザを閉じると同時に完全に消去される」点にあります。整理整頓のストレスを感じることなく、今必要なページを直感的にキープできる、作業効率化のための「使い捨て」サイドバーです。
主な特徴と機能
- 非侵入型のサイドバーUI
ブラウザの左端に隠れる設計を採用。普段は画面を一切占有せず、左端にマウスを合わせるだけでスライドして出現します。Webサイトの表示領域を狭めないため、ブラウジング体験を損ないません。 - 完全な揮発性メモリ管理
データをローカルストレージではなくセッションストレージで管理。ブラウザ終了とともにデータが自動破棄されるため、古いブックマークが蓄積して管理が複雑化するリスクを排除しました。 - キーボードによる爆速保存
マウス操作を介さず、ショートカットキー（Alt + S）による一発保存に対応。リサーチの速度を止めない設計にこだわりました。 - 視覚的な自動整頓
表示幅に合わせて、古い項目を自動的にポップ（削除）するアルゴリズムを搭載。常に手元に必要な情報だけがある状態を維持します。
技術的なこだわりと解決した課題
本プロジェクトにおいて最も注力したのは、いかなるWebサイトのレイアウトも破壊せずにUIを挿入するという課題でした。
- レイアウト干渉の根本的解決
当初はページ全体を押し下げる手法をとっていましたが、カクヨム等の動的なメニュー計算を持つサイトと衝突することが判明しました。そこで、ページレイアウトを押し下げる手法を完全に廃止し、サイト側の座標計算を狂わせないオーバーレイ配置へと設計を刷新しました。 - YouTubeの複雑な動的DOMへの対応
YouTubeは独自のレイアウトエンジンを持っており、通常のJS介入ではレイアウトが崩れます。CSS変数（–ytd-masthead-height）の直接書き換えや、全画面表示（F11 / 動画プレイヤー）の検知・連動制御を実装することで、動画再生体験を一切損なわない環境を構築しました。 - 競合状態の排除
データの保存・描画・削除判定において、非同期処理による無限ループや競合が発生しないよう、requestAnimationFrameや状態管理フラグを駆使して堅牢なデータフローを実装しました。
アピールポイント
- ユーザーの操作を奪わないUI設計
ブラウザのどのページを開いていても、サイトの機能を阻害しない「隠れるサイドバー」という選択は、ユーザー体験を第一に考えた意思決定の結果です。 - 堅牢なDOM操作スキル
YouTubeのような巨大で複雑なWebアプリケーションに対して、安全かつ継続的にUIを共存させるための適応力を示しました。 - 継続的な改善プロセス
ユーザーからのフィードバック（特定のサイトでの挙動やレイアウトのズレ）に基づき、原因を特定し、既存のコードの安定性を犠牲にすることなく改善を繰り返すという、実際の製品開発に近いサイクルを経験しました。
使用技術
JavaScript (Vanilla JS) / CSS3 (Transition, Flexbox, Fixed Positioning) / Chrome Extensio
※コメントポリシーはこちらから。