オンライン定規 (Online Ruler)

1:1 精密スクリーン定規。物理キャリブレーション対応で、センチとインチを計測可能。

📏 オンライン定規：正確な1対1画面測定＆実物校正ツール —— 画面を本物の「実物定規」と「分度器」へと変える、軽量かつ高精度なプロフェッショナル向けブラウザ拡張機能です。 ----------------------------------- 画面上のオブジェクトのサイズを測る際、解像度やズームレベルの違いによって正確な寸法が得られず、困ったことはありませんか？「オンライン定規（Online Ruler）」は、こうしたよくある悩みを解決するために特別に設計されました。独自の「実物校正（物理キャリブレーション）」技術を活用し、モニターの実際のPPI（1インチあたりのピクセル数）に基づいて正確な1対1スケールを動的に表示します。 デザイナー、エンジニア、あるいは単に画面上の小さなオブジェクトを測定する必要がある一般ユーザーの方まで、この拡張機能は、最も直感的で信頼性の高いデジタル測定ソリューションを提供します。 🎉 v2.1.0 アップデート：三点式動的分度器が登場 ----------------------------------- 今回のアップデートでは、ウェブページ上の角度測定能力をさらに強化し、実際のデザイン調整シーンに最適な「三点式動的分度器」を新規追加しました： ✨ 三点式動的分度器：頂点と2つの端点で構成される角度測定ツールをページ上に追加。3つのポイントを動かすことで、任意の角度に素早く合わせることができます。 ✨ リアルタイム角度計算：端点をドラッグすると、2本のアーム間の角度を自動計算して度（°）で表示。0°から360°までの測定に対応しています。 ✨ 動的な測定アームの延長：2本の測定アームは端点をドラッグすることで自在に延長可能。大きなウェブ要素や画像のエッジ、デザイン画の斜線にも正確にフィットします。 ✨ 半透明の扇形領域：アームの間に半透明の扇形が表示され、測定範囲を一目で確認できます。扇形の透過率は個別に調整可能です。 ✨ アームごとの角度スナップ：各アームは、水平、垂直、または45度ごとの主要な角度に近づくと自動的に吸附（スナップ）し、正確な整列をサポートします。 ✨ カラー切り替えと中心点：複数のカラー設定に対応。頂点は透明な中空円と明確な中心点デザインを採用しており、測定したい位置にピンポイントで合わせられます。 🌟 主な機能 (Core Features) ----------------------------------- ✨ 実物レベルの校正 (Physical Calibration)： クレジットカード、A4用紙、あるいは硬貨などの身近な実物を使用して、画面の正確なPPIを自動的に算出します。+/- ボタンによる1ピクセル単位の微調整にも対応。 📏 3つの主要測定ツール： 画面定規：メートル法とヤード・ポンド法の両方に対応し、長さ、間隔、要素サイズを測定。 標準分度器：PPI校正データに基づく実寸サイズでレンダリングされる、360度回転可能な半透明分度器。 三点式動的分度器：頂点と2つの端点で任意の角度を測定。リアルタイム角度表示、アーム延長、扇形ビジュアライズに対応。 🧩 複数ツールの同時表示： 同一ページ内に複数の定規、標準分度器、三点式分度器を追加でき、複雑な比較測定や幾何学的なポジショニングのニーズに応えます。 📏 2つの測定モード： 独立ウィンドウモード：画面の最前面に常に表示される、すっきりとした定規ウィンドウを開きます。 ページオーバーレイモード：ウェブページ上に定規や分度器を直接重ねて表示。透過率の調整も可能です。 🔄 回転、スナップ、角度合わせ： 回転ハンドルを使用して定規や標準分度器の角度をリアルタイム調整。45°/90°などの主要な角度へのスナップ機能に対応。三点式分度器のアームも45度ごとのスナップに対応しています。 🔄 ゼロ点オフセット＆リセット (定規)： 実物の定規にある「ゼロ点」の端を再現し、任意の開始位置（mm）を設定可能。ワンクリックで基準点をリセットできます。 🎨 リアルな材質、カラー、透過率： 定規は木目調、プラスチック、金属の各テクスチャ（動的SVGフィルター）をサポート。分度器は複数の半透明カラースキーム（クラシックブルー、テックグリーン、バイタルオレンジ等）により、背景を選ばず見やすく表示されます。三点式分度器は扇形部分の透過率を個別に設定可能です。 📏 充実した目盛り表示： メートル法：センチメートル（CM）およびミリメートル（MM）。 ヤード・ポンド法：インチ単位。1/16インチ単位までの高精度な分割表示。 🔄 柔軟な操作ロジック： エッジ全体でのサイズ調整：定規の端であればどこをドラッグしても長さを調整できます。 リアルタイム同期：Popupでの設定、材質、カラーの変更は即座に反映されます。 💾 プライバシーとローカル保存： すべてのキャリブレーションデータ（PPI、単位設定、オフセット等）は、ブラウザのローカル環境内にのみ保存されます。 📖 使用方法 (Instructions) ----------------------------------- 1. 初回利用時：アイコンをクリックして「キャリブレーションモード」に入ります。 2. キャリブレーション：基準となる実物を用意し、画面に当ててスライダーを調整し、マークを一致させます。 3. 測定の開始：「現在のページに定規を追加」「分度器を追加」または「三点式動的分度器を追加」をクリックします。 4. スタイルの切り替え：ツールバーのアイコンをクリックして、材質、カラー、透過率を調整します。 5. 位置と角度の調整：ツールをドラッグして移動させます。定規や標準分度器は丸いハンドルで回転させ、三点式分度器は頂点や端点をドラッグして角度を合わせます。 🎨 デザイン哲学 (Design Philosophy) ----------------------------------- 精度を最優先：厳密な数式 `pixelsPerMm = ppi / 25.4` に基づく設計で1:1を再現。 ツールキットの思考：定規と分度器の組み合わせにより、UIデバッグ、設計図の校正、教育など多様なシーンに対応。 直感的な操作：大きなドラッグハンドル、中心点の明確な透明頂点、角度スナップ機能により、測定のストレスを最小限に抑えます。 🗺️ ロードマップ (Roadmap) ----------------------------------- 補助基準線：高さの比較などを容易にするための十字線やスナップ機能。 キャリブレーション基準の拡充：A5用紙や主要なスマートフォンの画面サイズへの対応。 アノテーション機能：測定ポイントに簡単なテキストや線のメモを追加。 💬 フィードバック・ご提案 ----------------------------------- 絶対的な精度を求めるユーザーのために開発しました！アイデアや問題点があればお気軽にご連絡ください。皆様の声が私たちの改善の源です。 正確な測定が、指先ひとつで！🚀