Open Hinata 3

フリーメモ ガイド

地図上のポイントに紐づくフルスクリーン描画ノート
ペン描画・画像貼り付け・OCR手書き文字認識に対応

OH3を開いて試す
📝

フリーメモとは

フリーメモは、地図上のポイントに紐づけたフルスクリーン描画ノートです。Fabric.jsキャンバス上でペン描画・画像貼り付け・OCR手書き文字認識が可能で、現場調査やフィールドワークでの記録に最適です。

「フィールドノート」との違い

「フリーメモ」は地図上のポイントに紐づく描画ノート（Fabric.jsキャンバス）です。一方「フィールドノート」は写真・音声・GPSを統合管理するフィールド調査ツールで、まったく別の機能です。

作成したメモはGeoJSONのフィーチャープロパティにBase64 JSONとして保存され、地図上にメモアイコンとして表示されます。共有ドロー機能と連携することで、チームでのメモ共有も可能です。

主な特徴
  • フルスクリーンエディタ — 広い描画領域でストレスなくメモを作成
  • 10種類のペン — 黒・赤・青・緑の細/太 + 蛍光黄・蛍光桃
  • 画像挿入 — ファイル選択またはカメラ撮影で写真を貼り付け
  • OCR認識 — Google Vision APIで手書き文字を自動認識
  • 形状自動補正 — 円・四角形・三角形・直線に自動変換
  • Undo/Redo — 最大30段階の操作履歴
🖱️
Section 2

基本の使い方

フリーメモボタンをクリック フリーハンドスケッチツールバーから「フリーメモ」ボタンをクリックします。
地図上にポイントを作成 地図上でクリックしてポイントを作成すると、フルスクリーンエディタが自動的に開きます。
描画・画像挿入・OCR認識 ペンで描画したり、写真を挿入したり、手書き文字をOCRで認識します。
タイトルを入力して保存 タイトルを入力して保存すると、地図上にメモアイコンが表示されます。
既存メモの編集

地図上のメモアイコンをクリックすると、保存済みのフリーメモを再度開いて編集できます。描画内容の追記や画像の追加が可能です。

🖊️
Section 3

描画ツール

フリーメモには豊富な描画ツールが用意されています。用途に応じて使い分けることで、効率的にメモを作成できます。

ペンの種類

ペン色太さ用途
黒 細黒細い文字や細かい描画
黒 太黒太い見出しや強調
赤 細赤細い注釈や修正箇所
赤 太赤太い重要な強調
青 細青細い補足情報
青 太青太いエリアの囲みなど
緑 細緑細い完了マークや確認済み
緑 太緑太いエリアの強調
蛍光黄黄太い半透明ハイライト表示
蛍光桃桃太い半透明ハイライト表示

その他のツール

ペンの切り替え

ツールバー上のカラーボタンをタップするだけで瞬時にペンを切り替えられます。太さの切り替えも同様にワンタップで可能です。

📷
Section 4

画像挿入

フリーメモには画像（写真）の挿入機能があります。現場で撮影した写真を貼り付けて、描画と組み合わせた視覚的なノートを作成できます。

画像の挿入方法

自動リサイズ

挿入された画像は、パフォーマンスとデータサイズを最適化するため自動的にリサイズされます。

項目設定値
最大サイズ600px（長辺）
圧縮品質JPEG 60%
フォーマットJPEG

画像の操作

現場写真との組み合わせ

現場で撮影した写真を挿入し、その上にペンで注釈や矢印を描き加えることで、状況を的確に記録できます。写真だけでは伝わりにくい情報をビジュアルに補足できます。

データサイズについて

画像はBase64エンコードされてGeoJSONに埋め込まれるため、多数の画像を挿入するとデータサイズが大きくなります。必要な写真を厳選して挿入することをおすすめします。

🔍
Section 5

OCR機能

フリーメモにはキャンバス上の手書き文字を自動認識するOCR機能が搭載されています。描画した文字をテキストデータに変換し、報告書やデータベースへの入力に活用できます。

OCRの仕組み

キャンバスをPNGに変換 キャンバスの内容を3倍解像度のPNG画像に変換します。高解像度化により認識精度を向上させています。
Google Vision APIで認識 DOCUMENT_TEXT_DETECTIONモードで手書き文字を認識します。日本語・英語に対応しています。
認識結果をダイアログ表示 認識結果がダイアログに表示されます。クリップボードへのコピーもワンクリックで可能です。
対応言語
  • 日本語 — ひらがな・カタカナ・漢字・数字を認識
  • 英語 — アルファベット・数字を認識
認識精度を上げるコツ

太めのペン（黒太など）で大きく丁寧に書くと認識精度が向上します。文字間のスペースを適度にとり、重なりを避けると、より正確な結果が得られます。

⭕
Section 6

形状自動補正

フリーメモには形状自動補正機能が搭載されています。フリーハンドで描いた図形が、自動的にきれいな形に補正されます。

補正される形状

描いた形補正結果
丸っぽい形円に自動補正
四角っぽい形四角形（矩形）に自動補正
三角っぽい形三角形に自動補正
まっすぐな線直線に自動補正
フリーハンドスケッチとの共有設定

形状自動補正は、フリーハンドスケッチ機能と同じアルゴリズム・同じlocalStorage設定を共有しています。一方で設定を変更すると、もう一方にも反映されます。

補正のON/OFF

形状自動補正が不要な場合は、設定でOFFにすることができます。手書きの雰囲気をそのまま残したいときはOFFにして使用してください。

💾
Section 7

保存形式

フリーメモの描画データは、GeoJSONフィーチャーのプロパティとして保存されます。保存の流れは以下のとおりです。

保存の流れ

Fabric.js JSONにシリアライズ キャンバス上のすべてのオブジェクト（線・画像・テキスト）をFabric.js JSON形式に変換します。
Base64エンコード JSONデータをBase64文字列にエンコードし、コンパクトな形式に変換します。
GeoJSONプロパティに保存 Base64データをフィーチャーのmemoDataプロパティに格納。hasMemo: trueフラグにより地図上にメモアイコンが表示されます。

保存先

保存先条件説明
ローカル（GeoJSON）通常のドローブラウザ上のGeoJSONデータとして保持
サーバー共有ドロー時Firebase経由でサーバーに保存・チームと共有
ブラウザデータの注意

ローカル保存の場合、ブラウザのキャッシュクリアやシークレットモードではデータが失われる可能性があります。重要なメモは共有ドロー機能を使ってサーバーに保存するか、GeoJSONファイルとしてエクスポートしてください。

💡

活用事例

🏗️ 現場調査の記録

🌿 フィールドワーク

🏫 教育・学習

📋 防災・点検

フリーメモを作成してみましょう

フリーハンドスケッチツールバー → フリーメモボタン

OH3を開く