使用技術一覧

目次

1. プロジェクトについて
2. 環境
3. ディレクトリ構成
4. 主な機能
5. 設計における工夫と考察
6. 開発者情報

プロジェクト名

GPS Viewer（CSV軌跡マップ）

プロジェクトについて

記録されたGPSデータ（CSV形式）をブラウザ上で読み込み、地図上に移動軌跡として可視化するWebツールです。 Leafletライブラリを活用し、緯度・経度情報からポリラインを描画することで、移動ルートや速度・精度の確認を容易にします。

GPS Recorder 等で収集した実験データや移動ログを、特別なソフトをインストールすることなく直感的に解析・確認できる環境を提供します。

(トップへ)

環境

項目	内容
言語	HTML5, CSS3, JavaScript (Vanilla JS)
地図ライブラリ	Leaflet 1.9.4
タイルサーバ	OpenStreetMap contributors
対応データ形式	CSV (UTF-8)

(トップへ)

ディレクトリ構成

.
├── index.html       # UI構造（地図コンテナ・コントロールパネル）
├── style.css        # レイアウト・地図デザイン・パネル装飾
├── app.js           # CSVパース・Leaflet描画制御ロジック
└── README.md        # 本ファイル

(トップへ)

主な機能

地図可視化

• 軌跡描画: 読み込んだ座標データに基づき，Leafletのポリラインを用いて移動ルートを地図上に描画します。
• 地点マーカー: 計測の「開始点」と「終了点」に自動でマーカーを設置し，ポップアップで詳細を表示します。
• 全体表示（Fit Bounds）: 記録されたすべての点が画面に収まるよう，地図の表示範囲を自動調整します。

データ解析

• CSVプレビュー: 読み込んだデータの先頭20行をテーブル表示し，生データの整合性を即座に確認可能です。
• 統計情報表示: 記録された総点数、計測開始日時、終了日時をミリ秒精度（ISO形式準拠）で抽出・表示します。

(トップへ)

設計における工夫と考察

1. 柔軟なCSVパーサの実装

「引用符（"）内のカンマを許容する」簡易的なCSVパースロジックを自前で実装しました。これにより、標準的なライブラリに依存せずとも、多様なCSVエクスポート形式に対応できる汎用性と軽量性を両立させています。

2. 時系列データの自動ソート

記録デバイス側の書き出し順序に依存せず正確な軌跡を描画するため，読み込み時に timestamp_epoch_ms に基づく昇順ソートを強制する処理を組み込みました。これにより、データが欠落したり順序が入れ替わったりしていても、正しい移動経路を復元可能です。

3. モジュール性の高いUIパネル

各機能を device-panel というクラスで構造化し、地図・プレビュー・コントロールを独立したカードとして配置しました。これにより、情報の優先順位が明確になり、分析作業における視覚的な負荷を軽減しています。

(トップへ)

開発者情報

• Name: Takato Ishii
• Portfolio: https://takato-ishii.vercel.app/

(トップへ)