Firefoxだけに実装された関数で本文を縮小して現在見ている部分を分かりやすく表示する「ミニマップ機能」を実現したフロントエンドエンジニアが登場

FirefoxではCSS関数の一つとして、他の要素の内容をそのまま表示する「element()」が実装済みです。その関数を利用して、フロントエンドエンジニアのステファン・ジュディスさんが通常のブログにミニマップ機能を実装しています。

A Firefox-only minimap | Stefan Judis Web Development
https://www.stefanjudis.com/a-firefox-only-minimap/

ミニマップはプログラミング用のエディタなどによく実装されており、例えばVisual Studio Codeでは下図のようにミニマップが表示されます。コードの全体像が見えるため、自分が今どのあたりを閲覧・編集しているのかを確認しやすく、またコードの特定の場所までスクロールする時も目的の場所が見つかりやすくなっています。

ジュディスさんは、上記と同等の機能を自分のブログに実装したというわけ。Firefoxでブログの記事画面を開くと、本文の隣に本文全体を縮小したミニマップが表示されており、さらに青い枠で「今見ている部分はどこなのか」が一発でわかるようになっています。

ただのスクリーンショットではなく「element()」というCSS関数を利用することで「現在の表示」をそのまま縮小表示できるため、画像や埋め込みのロード状況やテキストを選択して反転している部分などが全て反映されています。

ジュディスさんによると、「現在表示中の画面」を示すのにJavaScriptを利用しているものの、基本的には下記の通り「-moz-element(#main)」という短いコードだけで実装しているとのこと。

mini-map .screen-image .canvas {
  background: white -moz-element(#main) no-repeat scroll center center / contain;
}

なお、element関数はFirefoxだけに「-moz-」というベンダープレフィックス付きで実装されており、Google ChromeやSafariでは利用できない点に注意が必要です。