Open Hinata 3

写真スケッチガイド

写真メモの写真に直接ペン描画・スタンプ・テキスト注記を追加
7種類のペンツール、10種類のスタンプ、カスタムスタンプ作成対応

OH3を開いて試す
🖊️

写真スケッチとは

写真スケッチは、写真メモの写真に直接ペンで描画・スタンプ・テキスト注記を追加できる機能です。Fabric.jsのキャンバスで写真にオーバーレイし、フローティングウィンドウ（600×550px）上で直感的に操作できます。

現場写真への損傷箇所のマーキングや、施工状況の確認記録（OK/NG/要確認）、矢印やポインタの追加など、写真を「見せるための資料」に変換するための機能です。

主な特徴
  • 7種類のペンツール — 黒・赤・青の細/太ペン + 蛍光ペン
  • 10種類のデフォルトスタンプ — OK・NG・要確認・危険・矢印・ここ・日時
  • カスタムスタンプ — テキスト（最大8文字）+色（8色パレット）で自由に作成
  • Undo/Redo — 最大30段階の操作履歴
  • クリップボードコピー — 写真+スケッチの合成画像をPNG形式でコピー
  • Wordレポート連携 — 合成画像がWordレポートにも自動反映
🖱️
Section 2

基本の使い方

写真メモのペンアイコンをクリック マイルーム → 写真メモを開き、スケッチしたい写真のペンアイコンをクリックします。
フローティングウィンドウに写真が表示される フローティングウィンドウ（600×550px）が開き、写真がキャンバス上に表示されます。ウィンドウはドラッグで移動可能です。
ペンで描画、スタンプを配置、消しゴムで修正 ツールバーからペンやスタンプを選んで写真に注記を追加します。間違えたら消しゴムやUndo（最大30段階）で修正できます。
「保存」でデータベースに保存 保存ボタンをクリックすると、スケッチデータがデータベース（sketch_data）に保存され、サムネイルに合成画像が自動反映されます。
元の写真は保持されます

スケッチはレイヤーとして保存されるため、元の写真データには影響しません。スケッチを削除すれば元の写真に戻すことができます。

✏️
Section 3

ペンツール

用途に応じて7種類のペンツールを使い分けられます。

ペン色太さ用途
黒ペン（細）黒2px文字や細かい注記の書き込み
黒ペン（太）黒6px目立つ線や輪郭の描画
赤ペン（細）赤2px修正指示や問題箇所の指摘
赤ペン（太）赤6px重要な問題箇所の強調マーキング
青ペン（細）青2px補足情報や寸法の記入
青ペン（太）青6px対策済み箇所や合格部分の表示
蛍光ペン（黄）黄（40%透過）16px注目すべきエリアのハイライト
蛍光ペンの特徴

蛍光ペンは40%の透過率で描画されるため、写真の内容を隠さずにエリアをハイライトできます。損傷範囲の全体像を示したいときや、注目すべき領域を大まかに囲みたいときに便利です。

🔖
Section 4

スタンプ機能

よく使う注記をワンクリックで配置できるスタンプ機能です。デフォルトスタンプに加え、カスタムスタンプも作成できます。

デフォルトスタンプ（10種類）

スタンプ色用途
OK緑合格・確認済みの箇所
NG赤不合格・要修正の箇所
要確認橙後日確認が必要な箇所
⚠危険赤危険箇所の警告
↑黒上方向を示す矢印
↓黒下方向を示す矢印
←黒左方向を示す矢印
→黒右方向を示す矢印
ここ赤特定箇所のポインタ
日時灰配置時に自動で現在日時を挿入
日時スタンプの自動挿入

日時スタンプは配置した瞬間の日時が自動的に挿入されます。現場での記録日時を写真に残したいときに便利です。

カスタムスタンプ

デフォルトスタンプにない注記が必要なときは、カスタムスタンプを作成できます。

カスタムスタンプの活用例

「補修済」「撤去予定」「仮設」「No.1」「A棟」など、現場に特化した用語をスタンプとして登録しておくと、毎回手書きする手間が省けます。

ブラウザごとの管理

カスタムスタンプはlocalStorageに保存されるため、ブラウザごとに管理されます。別のブラウザや端末では共有されません。

🧹
Section 5

消しゴム

描画した線やスタンプをオブジェクト単位で削除できます。

消しゴムの仕組み

Undo/Redoも活用

消しゴムで削除する以外に、Undo（元に戻す）/Redo（やり直し）も利用できます。最大30段階の操作履歴に対応しているため、複数の操作をまとめて取り消すことも可能です。

💾
Section 6

保存・エクスポート

作成したスケッチは複数の方法で保存・エクスポートできます。

データベース保存

クリップボードコピー

Wordレポート連携

合成サムネイルの自動生成

スケッチを保存すると、写真メモの一覧画面のサムネイルにもスケッチが反映された合成画像が表示されます。どの写真にスケッチが追加されているか一目で確認できます。

💡

活用事例

🏗️ 建物損傷箇所のマーキング

🔧 施工現場の注記（OK/NG/要確認スタンプ）

📸 写真への矢印・ポインタ追加

⚠️ 危険箇所の記録

写真スケッチを試してみましょう

マイルーム → 写真メモ → ペンアイコン

OH3を開く