「これ何pxだっけ」を、
ドラッグ一発で聞かなくていい関係に。
Webページ上でドラッグするだけでピクセル距離・サイズを計測。直線と矩形の2モード、 計測履歴の保存＆再現、要素への自動吸着まで備えた、現場で使うための画面定規です。
Problem
定規系拡張機能はもう十分あるのに、
なぜかいつも「帯に短し」だった。
計測した数値、どうせもう一度使う。なのに大抵のツールはその場限り。 「さっきの計測、もう一回見たい」がずっと地味に不便だった。
01
計測結果が消えるページをリロードしたら終わり。同じ箇所をもう一度測り直す羽目になる。
02
斜めにズレる水平・垂直のつもりが手ブレで斜線に。数値がちょっとだけ信用できない。
03
幅と高さを別々に測る矩形の要素なのに、2回ドラッグしないと幅と高さが揃わない。
04
要素の端に合わせづらいピクセル単位で端を狙うのに毎回集中力を使う。手元がちょっとブレるだけでやり直し。
Features
計測して、残して、また使う。
それを全部ドラッグの中で完結させる。
直線モード（自由・水平・垂直）
2点間の距離を計測。「水平のみ」「垂直のみ」で斜めのブレを禁止できるほか、自由モード中もShiftキーを押している間だけ一時的に水平・垂直へロックできます。
矩形モード
ドラッグした範囲の幅と高さを同時に計測。四辺それぞれに数値を表示するので、要素のサイズをひと目で確認できます。
計測履歴
計測結果は自動でリストに追加。クリックすれば同じ位置に計測線を再現し、該当箇所まで自動スクロールします。「保存」を押すまではブラウザを閉じると消える一時履歴として扱われるので、試行錯誤も気兼ねなく。
表示カラー＋プリセット保存
計測線の色を自由に選択。よく使う色はプリセットとして保存し、次回以降すぐに呼び出せます。
要素への自動吸着 β版
ONにすると、ページ上の要素の辺（上下左右）にカーソルを近づけた際に自動でスナップ。吸着した辺は緑色でハイライト表示されます。デフォルトはOFFで、動作が不安定なページではいつでも無効化できます。
Googleアカウント間で履歴共有（任意）
同じGoogleアカウントでログインしているChrome間で、計測履歴をchrome.storage.syncを通じて同期。デフォルトはOFFで、必要な人だけがONにする設計です。
日本語・英語対応
Chromeの表示言語設定に応じて、パネルの文言が自動的に日本語または英語に切り替わります。
How to use
覚えることは、たった3ステップ。
STEP 1
アイコンをクリックしてパネルを開く
ツールバーの画面定規アイコンをクリックすると、右側に計測パネルが開きます。「直線」または「矩形」を選択してください。
STEP 2
ページ上でドラッグする
測りたい2点、または範囲をドラッグするだけ。
|-----234px-----|STEP 3
履歴から見返す・再現する
計測結果は自動でリストに残ります。あとで見返したいときはクリックひとつで同じ位置に再現。必要なら保存ボタンでブラウザを閉じても消えないようにできます。
Privacy
計測データは、外に出ません。
個人を特定する情報は収集しません。設計段階からそう決めています。
- 外部サーバーへの送信なし。計測履歴はブラウザ内（chrome.storage.local）に保存されるのみ。
- 共有はデフォルトOFF。Googleアカウント間同期を使う場合のみ、任意でONにできます。
- 保存前提のUI設計。「保存」ボタンを押すまでは一時履歴として扱い、意図しないデータ永続化を防ぎます。
- 入力値は表示前に検証。保存データを読み込む際は形式をチェックし、想定外の値は安全な既定値に置き換えます。
「さっきの計測、もう一回見たい」を
なくすところから。
公開準備中です。公開後、このページからストアへ移動できるようになります。
Chrome ウェブストアへ（公開準備中）Chromeウェブストア公開後、URLはこのページで更新されます。