Tag Archives: Bookmarklet

cursorulerを作ってみた

0
Filed under Bookmarklet, JavaScript
Tagged as , , ,

ウェブを見ていて、「ここのサイズって何pixel?」と思うことが何回かあって、そのたびに、スクリーンショットを撮って、photoshopで拡大して計ってみて、ということが面倒だった。

正確に分からなくてもいいことが多く、大体30ピクセルくらい?とか分かれば十分なのに、そういうことに適したツールが見あらたなくて、作ってしまいました。

それが、ブラウザ上にピクセル定規を表示するツール「cursoruler」です。

cursoruler

使い方

cursorulerページのブックマークレットをブックマークフォルダに入れます。

bookmarkletをクリックすると、マウスカーソルのやや左上を基点に、一辺500ピクセルの定規を表示します。

基点部分には一辺10pixelの赤い矩形を表示しています。

また、目盛りは1ピクセル単位で書いてあり、100ピクセル毎に赤い●のある目盛りを書いています。

おまけとして、基点位置の座標も表示しています。
cursoruler-functions

ブックマークレット

いろいろツールを作る仕組みを考えたのですが、当面ブラウザ上で動くだけで良いかな、と思って、bookmarkletとして作ることにしました。

定規画像は、このサーバから取得するようになっているけど、まぁ、そんなに問題は起きないでしょう。

試してみた感想、意見、要望とかもらえるとうれしいです!