MetricCanvas の使い方

ステップ 1 — 画像をアップロード

左サイドバーのアップロードエリアをクリックするか、1枚以上の画像をキャンバスに直接ドラッグ＆ドロップしてください。MetricCanvas は複数画像を同時にサポートし、各画像は無限キャンバス上の独自レイヤーに配置されます。

アップロード後、クリック＆ドラッグでキャンバスを移動したり（またはツールバーの Pan ツールを使用）、マウスホイールやズームボタンで拡大・縮小できます。画像は自由に再配置できます — キャンバスには固定された端がありません。

高解像度のスキャンを扱う場合は、較正前に較正線を描く領域までズームインしてください。較正クリックがより正確であればあるほど、導出されるすべての測定値がより正確になります。

ステップ 2 — スケールを較正する

較正は最も重要なステップです。ツールバーから較正ツールを選択し、画像内の既知の実寸距離に対応する2点をクリックしてください。ダイアログが表示され、その距離を入力し、単位（メートル、センチメートル、フィート、インチ、または任意のカスタム単位）を選択します。

2つの較正モードがあります：

• ライン — 長さがわかっている直線セグメントの両端点をクリックします。壁、廊下、線状の特徴に最適です。
• 直径 — 円形オブジェクトの直径の両端をクリックします。パイプ、柱、または既知のサイズを持つ円形の特徴に便利です。

保存後、スケールが設定されます。MetricCanvas は、この基準を使用して、その画像上の後続のすべての測定においてピクセル距離を実寸値に変換します。

ヒント： 画像内で見つけられる最も長い識別可能な基準を使用してください。10 mの基準線は0.5 mのものより正確です。なぜなら、クリック配置のわずかな誤差の影響が比例的に小さくなるからです。

ステップ 3 — 距離を測定する

測定ツールを選択し、画像内の2点をクリックしてください。MetricCanvas はそれらの間に線を描き、較正に基づいて実寸距離を計算し、結果をキャンバス上に直接ラベルとして表示します。

必要な数だけ測定値を追加できます。各測定値はサイドバーの測定パネルに一覧表示され、説明的な名前に変更できます（例：「キッチンの幅」や「廊下から寝室のドアまで」）。

ラベルは、選択ツールに切り替えてドラッグすることで再配置できます。再測定が必要な場合は、サイドバーから古い測定値を削除して新しいものを描くだけです。

ステップ 4 — レイヤーを管理する

アップロードした各画像は別々のレイヤーになります。サイドバーのレイヤーパネルには、現在のセッションのすべてのレイヤーが表示されます。各レイヤーの表示/非表示を切り替えたり、ドラッグして並べ替えたりできます。

レイヤーは、複数の画像を重ね合わせたい場合 — 例えば、同じ空間の間取り図と参考写真 — または同じ図面の異なるバージョンを比較する場合に便利です。

ステップ 5 — 作業をエクスポートする

測定が完了したら、エクスポートパネルから3つの出力形式が利用できます：

• PNG — すべての測定線とラベルを含む、完全な解像度の注釈付き画像としてキャンバス全体をエクスポートします。同僚との共有やレポートへの含めるのに便利です。
• CSV — すべての測定値を、ラベル、ピクセル距離、実寸値、単位の列を持つスプレッドシート互換のテーブルとしてエクスポートします。Excel、Google Sheets、または任意のデータパイプラインへのインポートに最適です。
• TXT — 測定値をプレーンテキストとしてエクスポートします。1行に1つずつ。素早いメモや文書への貼り付けに便利です。

すべてのエクスポートはブラウザ内で完全に生成されます。サーバーに何もアップロードされません。

元に戻す、やり直し、セッションの保持

MetricCanvas は、セッション中に完全な元に戻す/やり直しの履歴を保持します。ツールバーの元に戻す/やり直しボタン、または標準的なキーボードショートカット（WindowsではCtrl+Z / Ctrl+Y、MacではCmd+Z / Cmd+Shift+Z）を使用してください。

セッションはブラウザのローカルストレージに自動的に保存されます。タブを閉じて後で戻ってきた場合、すべての画像、較正、測定値を含むキャンバスが、正確にそのまま復元されます。

最初からやり直すには、キャンバスをリセットボタンを使用してください。これにより、現在のセッションからすべてのレイヤーと測定値がクリアされます。

複数の画像を使った作業

1つのセッションで複数の画像をアップロードし、同じキャンバス上に配置しておくことができます。各画像は独自のレイヤーを持ち、独自の較正を行うことができます。これは、異なるスケールの画像を扱う場合 — 例えば、敷地計画と1つの区画の詳細な間取り図 — に便利です。

測定値は常に現在アクティブなレイヤー上に描かれます。複数の画像を開いている場合は、測定前に正しいレイヤーを選択していることを確認してください。

計算の仕組み

MetricCanvas は単純な比率を使用します：1つの既知の基準からスケールを確立すると、画像内のすべてのピクセル距離を実寸値に変換できます。核心となる式は：

ここで ピクセル距離 は、2つの較正クリック間のユークリッド距離です：

その後のすべての測定は同じパターンに従います：

これは、スケールが線形に伝播することを意味します：1つの壁で画像を較正すると、他のすべての距離 — ドア、窓、対角線スパン、部屋の対角線 — も同じ比率から導出されます。ツールは各測定ごとに再較正を必要としません。1つの良い基準が画像全体を unlocked します。

実践例： 間取り図があり、左側のリビングの壁が4.5 mであることを知っています。較正時にその壁の両端をクリックし、間に310ピクセルあると測定しました。スケールは 4.5 ÷ 310 ≈ 0.0145 m/px になります。次に廊下を測定して220ピクセル得た場合、実寸は 220 × 0.0145 ≈ 3.19 m です — 間取り図についてそれ以上何も知らなくても。

同じ原理が写真にも適用されます。部屋の写真で1つのオブジェクトがわかっている場合（例えば、標準的なドアの高さは2.1 m）、それに対して較正し、窓の幅、ソファの長さ、または2つの壁間の距離を測定できます — すべて、測定対象のオブジェクトがおおよそ同一平面上にある限り、あらゆる角度から撮影された1枚の写真から。

円較正（直径モード）の場合、式は同じです — MetricCanvas は、クリックした2つの直径方向の反対点間の距離を計算し、同じ比率を適用するだけです。これは、柱、パイプ、丸テーブル、または既知の直径を持つ円形の基準に便利です。

実践例：1つの壁からすべてを知る

JPEG形式の間取り図を受け取ったが、印刷されたスケールがなく、わかっているのは1つだけ：主寝室の幅が3.6 mであること。建物内の他のすべての測定値を導出する方法は以下の通りです：

この時点から、MetricCanvas は以下を教えてくれます：アパートの全幅、キッチンの長さ、廊下の幅、窓から壁までの距離、あらゆる部屋の対角線。すべての測定値は、単一の3.6 m基準から導出されます。完全な注釈付き画像またはデータテーブルをエクスポートして、建築家、請負業者、または数字が必要な人と共有できます。

これが機能するのは、間取り図が正投影図だからです — すべての距離は、平らな2Dビューにスケール通りに描かれています。同じ原理は、正しく投影されたあらゆる図面に適用されます：敷地計画、立面図、電気回路図など。

正確な結果を得るためのヒント

• 画像の最も高解像度なバージョンを使用してください。2点間のピクセルが多いほど、測定の丸め誤差が少なくなります。
• 較正点と測定点を配置する際は、できるだけズームインしてください — 2ピクセルのクリックミスは、低倍率ズームより高倍率ズームで影響が小さくなります。
• 較正基準は、主に測定する方向に平行なものを選んでください。水平な基準は、水平方向の測定に最適です。
• 印刷されたスケールバー付きの間取り図の場合は、壁ではなくスケールバーに対して較正してください。印刷されたスケールバーは、図面の歪みやスキャンの傾きを考慮しているからです。
• 画像が角度を持って撮影された写真（真の正投影図ではない）場合、測定は撮影された表面の平面内でのみ正確です。遠近感の歪みは、追加の基準点なしでは修正できません。