マップ画面実装

[TinyKitten]

Summary by CodeRabbit

• 新機能

  • マップタブを追加しました。デバイスの位置と軌跡をマップ上で表示でき、タブには地図アイコンと「マップ」タイトルを表示します。
  • デバイス用フィルター（チップ選択・リセット）、軌跡の表示、接続状況バッジ、触覚フィードバックを追加。Webでは地図が利用できない旨の代替表示を提供します。

• 改善

  • アコーディオンのアニメーションをmax-heightベースに最適化しました。

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

地図表示機能を追加。react-native-mapsを導入し、MapScreenコンポーネント、デバイス軌跡フック、色割当ユーティリティを実装。タブレイアウトに"map"タブを追加し、アコーディオンの高さロジックをmax-heightベースに統一しました。

Changes

Cohort / File(s)	Summary
プラグイン・依存性 app.config.ts, package.json	react-native-mapsをplugins/依存に追加。package.jsonにreact-native-maps: ^1.26.20追加、dev:metroスクリプトから--webフラグを削除。
タブとアイコン app/(tabs)/_layout.tsx, components/ui/icon-symbol.tsx	タブレイアウトにmapタブを追加（タイトル"マップ"、アイコンmap.fill）。アイコンマッピングに"map.fill" -> "map"を追加。
Map画面と関連ロジック app/(tabs)/map.tsx, hooks/use-device-trajectory.ts, constants/map-colors.ts	新規MapScreen実装（react-native-maps条件読み込み、トラジェクトリ描画、マーカー、フィルタ用アコーディオン、webフォールバック）。useDeviceTrajectoryフックとMAP_TRAJECTORY_COLORS/getDeviceColorを追加。
既存アコーディオン修正 app/(tabs)/logs.tsx, app/(tabs)/timeline.tsx	アコーディオン関連定数・共有値をheight→maxHeightへ名称変更し、アニメーションでmaxHeightを使用するよう修正（ロジック名称と依存配列を更新）。
ストア微修正 lib/location-store.tsx	ADD_UPDATEでのdeviceIdsデデュプリケーション処理を配列条件チェックへ変更（既存デバイスは残し、新規のみ追加）。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MapScreen
    participant LocationStore as Location Store
    participant Hook as useDeviceTrajectory
    participant RNMaps as react-native-maps
    participant Reanimated as Reanimated

    User->>MapScreen: マップ画面を開く/デバイスを選択
    MapScreen->>LocationStore: ロケーション更新を購読
    LocationStore-->>MapScreen: 位置更新を配信
    MapScreen->>Hook: 更新と選択デバイスを渡す
    Hook-->>MapScreen: デバイス別の座標配列を返却
    MapScreen->>Reanimated: アコーディオン開閉アニメーション開始
    MapScreen->>RNMaps: Polyline/Markerを描画、fitToCoordinatesを呼ぶ
    RNMaps-->>User: 地図上に軌跡とマーカーを表示

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 分

Possibly related PRs

• feat: マップピンの吹き出しに移動速度・精度・バッテリー残量を表示 #14: マップ／デバイス関連スクリーンの追加/削除を含むPRで、今回のMapScreen追加と直接競合し得る変更がある。
• Revert "pnpmは要らないはず" #18: タブレイアウトの構成を変更するPRで、app/(tabs)/_layout.tsxへの影響が共通している。

Poem

ぴょんと跳ねるウサギの地図帳、
色づく軌跡が森を辿る。
タブを開けばポンと広がる景色、
ピンが光り、道が踊るよ。
新しいマップへ、ぴょん！🐰

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 62.50% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR タイトル「マップ画面実装」はプルリクエストの主要な変更内容を正確に反映しており、新しいマップ画面機能の追加という核となる目的を明確に表現しています。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@app/`(tabs)/_layout.tsx:
- Around line 45-51: Add the missing mapping for the IconSymbol component by
updating the MAPPING object in icon-symbol.tsx: add an entry with key "map.fill"
and value "map" so IconSymbol (used in Tabs.Screen with name "map" and prop
name="map.fill") resolves correctly on Android/Web and avoids the runtime error.

In `@app/`(tabs)/map.tsx:
- Around line 281-298: The current trajectories.map wraps Marker and Polyline
inside a <View>, which breaks react-native-maps overlays; remove the <View>
wrapper and render Marker and Polyline as direct children of MapView instead,
using a keyed React.Fragment for each trajectory (e.g., React.Fragment with
key={trajectory.deviceId}) so the key remains associated with the mapped item;
keep the existing conditional renders for Polyline, Marker and continue using
getDeviceColor(trajectory.deviceId, state.deviceIds) and
trajectory.latestPosition as before.

🧹 Nitpick comments (4)

constants/map-colors.ts (1)

17-20: JSDocコメントと実装の不一致

コメントでは「デバイスIDのハッシュ値を使って色を決定する」と記載されていますが、実際の実装は indexOf によるインデックスベースの色割り当てを行っています。コメントを実装に合わせて修正することをお勧めします。

📝 コメント修正案

 /**
  * デバイスIDからPolylineの色を取得
- * デバイスIDのハッシュ値を使って色を決定する
+ * デバイスIDの配列内インデックスを使って色を決定する
  */
 export function getDeviceColor(deviceId: string, deviceIds: string[]): string {

app/(tabs)/logs.tsx (1)

214-231: アコーディオンロジックの共通化を検討

timeline.tsx と logs.tsx のアコーディオンアニメーションロジック（toggleFilter、contentStyle、arrowStyle など）はほぼ同一です。将来的にカスタムフック（例: useAccordionAnimation）やコンポーネントへの抽出を検討すると、メンテナンス性が向上します。

hooks/use-device-trajectory.ts (1)

65-69: 純粋関数のモジュール配置について検討してください。

getAllCoordinatesはuseMemoなどのReact APIを使用しない純粋関数です。現在の配置でも動作しますが、将来的にユーティリティとしてlib/utils.ts等に移動することで、他のモジュールからも再利用しやすくなります。

app/(tabs)/map.tsx (1)

77-87: trajectoriesの参照変更による過剰なfitToCoordinates呼び出しに注意してください。

trajectoriesはuseMemoから返される配列で、updatesやselectedDevicesが変わるたびに新しい参照が生成されます。位置情報の更新頻度が高い場合、fitToCoordinatesが頻繁に呼ばれてパフォーマンスに影響する可能性があります。

必要に応じて、座標数の変化時のみフィットさせるなどの最適化を検討してください。