Carte de Karte

Carte de Karteは、被災者の位置情報を視覚化し、救助活動を支援するためのウェブアプリケーションです。Google Maps APIを使用して被災者の位置を地図上に表示し、リアルタイムで情報を更新します。

概要

このアプリケーションは以下の機能を提供します：

• Google Maps上での被災者位置の表示
• 被災者情報の追加と更新
• リアルタイムデータ更新（Clip Viewer Lite APIを使用）
• 被災者の状態に基づいたマーカーの色分け

このアプリケーションは以下の環境で作成されています。

• Next.js : app router
• 使用言語: Typescript　アロー型の関数コンポーネントで基本的に作成

事前にインストールするもの

• Node.js (v14.0.0以上)
• npm (v6.0.0以上) または Yarn (v1.22.0以上)

インストール方法

1. リポジトリをクローンします：

   git clone https://github.com/yourusername/carte-de-karte.git
   cd carte-de-karte
   

2. 依存関係をインストールします：

   npm install
   

   または

   yarn install
   

環境設定

1. プロジェクトのルートディレクトリに.env.localファイルを作成します。

2. 以下の環境変数を設定します：

   NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key
   NEXT_PUBLIC_CLIP_VIEWER_LITE_API_KEY=your_clip_viewer_lite_api_key
   CLIP_VIEWER_LITE_USERNAME=your_username
   CLIP_VIEWER_LITE_PASSWORD=your_password
   CLIP_VIEWER_LITE_DEVICE_ID=your_device_id
   

使用方法

1. 開発サーバーを起動します：

   npm run dev
   

   または

   yarn dev
   

2. ブラウザで http://localhost:3000 を開きます。

3. 地図上に表示される被災者の位置情報を確認します。

4. 「Add Sample Victim」ボタンを使って、テスト用の被災者データを追加できます。

5. マーカーをクリックすると、被災者の詳細情報が吹き出し表示されます。

主要なファイルと依存関係

• app/page.tsx: メインページコンポーネント
• components/VictimMapMarker.tsx: Google Mapsと被災者マーカーの管理
• components/GoogleMap.tsx: Google Maps APIのラッパーコンポーネント
• lib/storage.ts: データストレージの管理
• lib/dataTransform.ts: APIデータの変換処理
• services/api.ts: Clip Viewer Lite APIとの通信

主要な外部依存関係：

• Next.js
• React
• @googlemaps/js-api-loader
• @googlemaps/markerclusterer
• axios

システム構成

データフロー

sequenceDiagram
    participant Browser as ブラウザ（Next.js）
    participant Proxy as Proxyサーバー<br>(localhost:3000)
    participant API as Clip Viewer<br>Lite API

    Note over Browser,API: 初期データ取得フロー
    Browser->>+Proxy: GET /api/data
    Proxy->>+API: APIキーを付与して転送
    API-->>-Proxy: JSONデータ返却
    Proxy-->>-Browser: データをそのまま転送

    Note over Browser: データの処理と表示<br>1. Google Map表示<br>2. マーカー配置<br>3. テーブル表示

    loop 1分ごとの更新
        Browser->>+Proxy: GET /api/data (更新確認)
        Proxy->>+API: APIキーを付与して転送
        API-->>-Proxy: 新規データ返却
        Proxy-->>-Browser: データをそのまま転送
        Note over Browser: UI更新
    end

Loading

コンポーネント構成

graph TB
    subgraph "フロントエンド（Next.js）"
        subgraph "ページコンポーネント"
            A[app/page.tsx<br>メインページ]
        end

        subgraph "カスタムコンポーネント"
            B[VictimMapMarker.tsx<br>被災者情報マッピング<br>状態管理・マーカー制御]
            D[DeviceDataPage.tsx<br>データテーブル表示]
        end

        subgraph "ベースコンポーネント"
            C[GoogleMap.tsx<br>Google Maps表示基盤<br>マーカー・クラスター基本機能]
        end
        
        subgraph "データ管理レイヤー"
            E[storage.ts<br>データストレージ管理]
            F[dataTransform.ts<br>データ変換処理]
        end
        
        A -->|被災者情報表示制御| B
        A -->|テーブル表示制御| D
        B -->|地図機能利用| C
        B -->|データ取得| E
        D -->|データ取得| E
        E -->|データ変換| F
    end
    
    subgraph "バックエンド"
        G[server.js<br>Proxyサーバー]
    end
    
    subgraph "外部サービス"
        H[Clip Viewer Lite API]
        I[Google Maps API]
    end
    
    E -->|APIリクエスト| G
    G -->|データ転送| H
    C -->|地図API利用| I

Loading

トラブルシューティング

• Google Mapsが表示されない場合は、APIキーが正しく設定されているか確認してください。
• データが取得できない場合は、Clip Viewer Lite APIの認証情報を確認してください。
• コンソールエラーが発生した場合は、すべての依存関係が正しくインストールされているか確認してください。

ライセンス

© [2024/11/18] [ushidakyotaro]. All Rights Reserved.

本ソフトウェアの著作権は[ushidakyotaro]が保持しています。 事前の書面による許可なく、閲覧目的以外での使用、複製、改変、配布を禁止します。