現場踏査写真管理アプリ(現場調査用)

0/0
🧭 現在の方位： --
📍 現在のGPS： --
未取得
で保存

アプリとしてインストールする方法

このツールは、ホーム画面に追加することで「アプリ」として動作し、 オフライン起動や全画面表示が可能になります。

iPhone (Safari) の場合

  1. 画面下部（または上部）の 共有ボタン ⎋ をタップします。
  2. メニューをスクロールして 「ホーム画面に追加」 を選択します。
  3. 右上の 「追加」 をタップします。
  4. ホーム画面にアイコンが追加され、次回からそこから起動できます。

Android (Chrome) の場合

  1. 画面右上の メニューボタン ⋮ をタップします。
  2. 「ホーム画面に追加」 または 「アプリをインストール」 を選択します。
  3. 確認画面で 「追加」 をタップします。
  4. ホーム画面にアイコンが追加され、次回からそこから起動できます。
注意: PCでHTMLファイルを直接開いている場合、保存機能などが一部制限されることがあります。 さくらサーバー等のWebサーバーにアップロードしてからご利用ください。

統合管理版アプリのダウンロード

現場用アプリで収集したJZIPデータを取りまとめる統合管理版（PC用）はこちらからダウンロードできます。

⬇ 統合管理版をダウンロード（ZIP）

被災状況調査システム 開発仕様書 (Phase 5.76)

Last Updated: Phase 5.76 (Google Apps Script配信時のiframeサンドボックス脱出処理を追加)

Status: App A (Stable)

1. プロジェクト背景と目的

大規模災害時、通信遮断下にある現場から、確実に被害状況を事務所へ届けるための建設コンサルタント専用ツール。鹿児島県測量設計業協会の情報専門部会が主導して開発。

  • Local-First: サーバー・DB不要。PWAとしてスマホにインストールして動作する。
  • Bucket Relay: データ連携は物理的なファイル移動（JZIP形式）で行う。
  • Offline First: Service Workerにより地図タイル含めオフライン動作を保証する。

2. 開発運用ルール（SSOT）

  • Phase管理: 会議の局面管理番号（X.XX）。package.jsonのversionおよびconfig.phaseを正とする。
  • 永遠のβ版: 現場フィードバックにより開発は永続する。「完成」と決めつけない。
  • Spec as Code: 本ファイル（src/spec.html）はプロジェクトの唯一の正解情報（SSOT）である。
  • コード提示ルール: 省略不可・全文表示・変更ファイルのみ・圧縮不可。最適化と意匠変更は判断を仰ぐ。毎回 package.json と spec.html を提示する。

3. ファイル構成 (File Manifest)

FilenameRoleNote
build.jsビルドスクリプトApp A専用。piexif.jsを先頭に結合する
index.html.templateApp A 骨格プレースホルダーは /* INSERT: CSS */ 等の形式
style.css共通スタイルCSS変数、アコーディオン、地図UI、スケッチUIを定義
header.html共通ヘッダーロゴ、タブ（アプリ/アプリ化の手順/開発方針）
introduction.htmlアプリ本体UIアコーディオン群（管理項目〜入出力）。位置図エリアにGPS修正バナー
spec.html開発仕様書本ファイル（アプリ内「開発方針」タブに埋め込み）
install_guide.htmlインストール手順iPhone/Android向けPWA追加手順・統合管理版DLリンク
jzip_spec.htmlJZIP連携仕様書AppAとAppBの連携仕様を定義する共通ドキュメント。build.jsには組み込まない。両スレッドに毎回渡して同期させる。
1_script_map.js地図管理Leaflet初期化・描画・モード切替・地図画像化・GPS修正モード。maxZoom:25（オーバーズーム対応）
1_script_sketch.js白紙メモCanvas描画（ペン/直線/文字/消しゴム/Undo）
2_script_photo.js写真管理・センサーgpsManager + azimuthManager + photoApp（GPS修正フロー含む）
3_script_main.js制御・入出力UIヘルパー・オートセーブ・JZIP入出力（EXIF書き込み含む）・プリセット・更新確認・mapCacheManager
sw.jsService Worker地図タイル・アプリ本体のキャッシュ管理（自動キャッシュ方式）
manifest.jsonPWAマニフェストstart_url/scope=/shodo-chosa/。スタンドアロン起動・アイコン定義
piexif.jsEXIFライブラリpiexifjs v1.0.6。src/直下に配置しビルド時にインライン埋め込み
rogo-AAA.txtロゴデータBase64エンコード画像（ビルド時にインライン埋め込み）

4. 実装仕様とアーキテクチャ

4.1 データ構造 (JZIP)

詳細は jzip_spec.html を参照。photoListの各要素：{ fileName, memo, tag, azimuth, lat, lng, gpsAccuracy, gpsFixed }

4.2 写真機能

  • 写真エリアのUI配置順（確定）: ナビゲーション → プレビュー → タグ・削除 → 📷撮影・📁ファイル選択 → 写真の備考 → センサーエリア（撮影方向・位置情報）
  • カメラinput分離（iPhone対応）: photo-camera-input（handleCameraFile・GPS自動記録）/ photo-file-input（handleFileSelect・EXIF読み込み）
  • 撮影ボタン: 「誤差○m」を直接表示。未取得時は点滅。GPS起動はDOMContentLoadedで実施。
  • 位置情報4状態: ○m（精度あり）/ 修正済み（地図タップ後・青）/ 不明（EXIFから）/ 未取得
  • GPS修正フロー: 修正ボタン→写真タブ閉じ→位置図タブ開く（現在ズーム+2）→地図タップ→写真タブに戻る
  • JZIPエクスポート時のEXIF書き込み: piexifjsでGPS座標・方位をJPEGに書き込む。エラー時フォールバック。
  • リサイズ横幅指定: 入出力タグで800/1200/1600/2000px・なしを選択。デフォルト1200px。

4.3 地図機能

  • ポリライン描画の完了はボタン専用（マーカータップ無効）。
  • モード：位置図（メイン・赤）/ 地図メモ（サブ・青）/ 白紙メモ（Canvas）/ GPS修正モード
  • maxZoom:25（オーバーズーム対応）: maxNativeZoom:18（地理院）/19（ESRI）でタイルを拡大表示。
  • 地図初期化タイミング: storageManager.load()では初期化せず、アコーディオンを開いたときにinvalidateSize()→ペンディングデータ復元の順で実行。DOMサイズ0での初期化を防ぐ。
  • 地図キャッシュ: 表示したタイルを自動でCache Storageに蓄積（Stale-While-Revalidate方式）。意図的な一括先読み機能はUI非搭載。
  • 写真の位置図表示（Phase 5.75追加）: 位置情報を持つ写真をphotos[]から抽出し、mapApp.photoLayerGroupにカメラアイコン（📷）マーカーとして表示。位置図タブを開くたび（アコーディオン展開・GPS修正フロー開始時）にmapApp.renderPhotoMarkers()で再描画する。
  • 撮影方向の矢印表示: azimuth記録済みの写真は、カメラアイコンから赤い矢印を伸ばして撮影方向を示す（0°=真北、時計回りに回転）。azimuth未記録の写真はアイコンのみ。選択中の写真は青リングで強調。マーカータップで写真・タグ・方位・備考をポップアップ表示し、対象写真を選択状態にする。

4.4 キャッシュ管理

  • 自動キャッシュ: 地図表示時に自動でタイルをキャッシュ。ユーザー操作不要。
  • キャッシュ開放: 入出力データ操作タブの「地図キャッシュを開放する」ボタンでCache Storageを削除。LocalStorage（入力データ・プリセット）には影響しない。
  • iOSの注意: ストレージ不足時にiOSがPWAのキャッシュを自動削除する場合がある。その際は再度地図を表示してキャッシュを再蓄積する。

4.5 オートセーブ仕様

  • 保存先：LocalStorage（キー: survey_app_autosave）
  • 写真はdataUrlを保存しない。メタ情報（tag・memo・azimuth・lat・lng・gpsAccuracy・gpsFixed）のみ保存。
  • 復元時はメタ情報のみ復元。実画像はJZIP読み込みで復元する運用。

4.6 PWA・デプロイ

  • GitHub Pages: https://kspa-joho.github.io/shodo-chosa/
  • manifest.jsonのstart_url/scope: /shodo-chosa/
  • Service Workerによる完全オフライン起動。更新確認ボタンでPhase番号比較・手動更新。
  • Google Apps Script経由配信時の注意（Phase 5.76追加）: GASのdoGetはHTMLをGoogle製ラッパーページ内の<iframe>として配信するため、iOS SafariがトップページのみのViewportメタタグしか参照しない仕様と衝突し、「拡大縮小が固定されない」現象が発生する。方位センサー・GPSの権限もiframe内では不安定になりうる。対策として、<head>先頭でwindow.top !== window.selfを検知した場合にwindow.top.locationへ自ページURLを代入し、iframeから脱出（トップレベル遷移）する処理を追加した。file://や直接ホスティングされたURLで開く場合は何もしない（無害）。

5. 重要な決定事項

  • カメラinput分離方針: iOSのmultiple不安定問題を根本解決。今後変更しない。
  • 位置情報の削除ボタン廃止: 誤操作防止のため削除ボタンは設けない。修正は地図タップ上書きのみ。
  • EXIFはエクスポート時に書き込む: リサイズ時にEXIFが消えるため、JZIP生成時にpiexifjsで書き直す。
  • 地図タップ修正後はgpsFixed=true: gpsAccuracyはnull。表示は「修正済み（座標）」。
  • 地図キャッシュは自動蓄積方式: 意図的な一括先読みUIは搭載しない。キャッシュ開放のみUIで提供。
  • 地図初期化はアコーディオンopen時: DOMサイズ0での初期化バグを防ぐため確定。今後変更しない。
  • iPhone動作確認: 部会メンバーへのお披露目時に実機確認を行う。

6. 次に行うタスクの積み残し

  • iPhone実機での方位センサー・カメラ・GPS動作確認（部会お披露目時）
  • App B帳票への方位・GPS出力対応（要検討・AppBスレッドで実施）
  • 試験運用後の現場フィードバック反映
  • App Bとのフィールド定義の整合確認（jzip_spec.htmlで管理）

7. PWA更新管理

アプリ更新管理

現在のバージョン: Phase 5.76

保存しました