## 🎯 はじめにスマートフォンのカメラで通行人や車両をリアルタイムにカウントするアプリ「**ミチミエール**」を個人開発しました。本記事では、Flutter上でYOLO11による高精度な物体検出と、Kalman Filter + Hungarianアルゴリズムによるトラッキングを実装し、**30-60 FPSのリアルタイム処理**を実現するまでの技術的な全貌を解説します。 ![人物トラッキングの様子](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/da2ddadc-825b-46b5-89ce-be772321ffbc/840a9b24-d1be-45d1-83dd-93f438a2aac0.jpeg) *キャプションをここに記入* **主な実装内容：** - YOLO11モデル（TensorFlow Lite）のFlutter統合 - Kalman Filter + Hungarian Algorithmによる高精度トラッキング - ライン通過判定による重複なしカウント - Firebase連携によるデータ管理 - 30-60 FPSのリアルタイム処理 **技術スタック：** ``` Flutter 3.9.2+ / Dart 3.9.2+ YOLO11 (ultralytics_yolo 0.1.39) Riverpod 2.6.1 (状態管理) Firebase (Auth, Firestore, Storage, Analytics) ``` **アプリ情報：** - 公式サイト: https://michimieru.com - App Store: [公開中] - Google Play: [公開中] ## 💡 なぜこのアプリを作ったのか道路の交通量調査やイベント会場の来場者数カウントは、従来は**人手による目視カウント**や**高額な専用機器**が必要でした。「スマートフォン1台で、誰でも簡単に通行量を計測できるアプリがあれば便利なのでは？」この素朴な疑問から、AIを活用した通行量カウントアプリの開発をスタートしました。 **主な用途：** - 道路の交通量調査 - 歩行者通行量の計測 - イベント会場の来場者数カウント - 商業施設の入退場管理 - 都市計画のためのデータ収集 --- ## 🏗️ アーキテクチャ全体像 ``` ┌─────────────────────────────────────┐ │ Flutter UI Layer │ │ (line_tracking_page.dart) │ ├─────────────────────────────────────┤ │ State Management (Riverpod) │ ├─────────────────────────────────────┤ │ Line Counter Service │ │ - ライン通過判定 │ │ - 方向別カウント │ ├─────────────────────────────────────┤ │ Line Tracker Service │ │ - Kalman Filter予測 │ │ - Hungarian割り当て │ │ - トラックライフサイクル管理 │ ├─────────────────────────────────────┤ │ YOLO11 Detection │ │ (ultralytics_yolo) │ │ - TensorFlow Lite推論 │ │ - 物体検出 (person, car) │ ├─────────────────────────────────────┤ │ Camera Stream (Native) │ │ - iOS: AVFoundation │ │ - Android: CameraX │ └─────────────────────────────────────┘ ↓ ┌─────────────────────────────────────┐ │ Firebase Backend │ │ - Firestore (データ保存) │ │ - Auth (認証) │ │ - Storage (画像保存) │ └─────────────────────────────────────┘ ``` --- ## 🤖 YOLO11のモバイル実装 ### 1. モデル選定とサイズ比較 YOLO11には複数のモデルサイズがあり、精度と速度のトレードオフを考慮して選択する必要があります。 | モデル | サイズ | 推論速度 (iPhone 14 Pro) | 精度 (mAP) | |--------|--------|---------------------------|-----------| | yolo11n | 5.8 MB | ~60 FPS | 普通 | | **yolo11s** | **21 MB** | **30-45 FPS** | **良好** ⭐ | | yolo11m | 49 MB | 20-30 FPS | 高精度 | 本アプリでは、**yolo11s（スモール）**を標準モデルとして採用。ユーザーは設定から**yolo11m（ミディアム）**に切り替えて高精度モードも利用可能です。 ### 2. TensorFlow Liteへの変換 YOLOモデルをモバイルで動かすには、TensorFlow Lite形式への変換が必要です。 **モデル変換のコード例：** ```python # Pythonスクリプトでの変換処理 from ultralytics import YOLO # PyTorchモデルをロード model = YOLO('yolo11s.pt') # TensorFlow Lite形式でエクスポート model.export( format='tflite', imgsz=640, int8=False, # 量子化なし（精度優先） ) ``` **エクスポートされるファイル：** - `yolo11s.tflite` (21 MB) - `labels.txt` (クラスラベル) これらを `assets/` ディレクトリに配置し、pubspec.yamlで登録します。 ```yaml # pubspec.yaml flutter: assets: - assets/model.tflite - assets/labels.txt ``` ### 3. Flutterへの統合 `ultralytics_yolo` パッケージを使用してYOLOを統合します。 **Flutterでの実装例：** ```dart // YOLOView ウィジェットの設定 import 'package:ultralytics_yolo/ultralytics_yolo.dart'; YOLOView( controller: _yoloController, modelPath: 'yolo11s', // または 'yolo11m' task: YOLOTask.detect, useGpu: true, // GPU使用（iOS: Metal, Android: GPU Delegate） confidenceThreshold: 0.25, // 信頼度閾値 iouThreshold: 0.45, // IoU閾値 streamingConfig: const YOLOStreamingConfig( includeDetections: true, includeProcessingTimeMs: true, maxFPS: 30, ), onResult: _handleDetections, // 検出結果のコールバック ) ``` ### 4. 検出結果の処理 YOLOからの検出結果を受け取り、トラッカーに渡します。 **検出結果の処理コード：** ```dart void _handleDetections(List results) { final acceptedDetections = {}; for (final detection in results) { final classId = kClassNameToId[detection.className]; if (classId == null) continue; final confidence = detection.confidence; if (confidence < _trackLowThresh) continue; // バウンディングボックスを画面座標に変換 final rect = _convertToGlobalCoordinates( detection.boundingBox, detection.normalizedBox, ); if (rect.isEmpty) continue; // 高信頼度 or 既存トラックとマッチする検出のみ受け入れ bool accepted = confidence >= _trackHighThresh; if (!accepted) { accepted = _confirmedTracks.any((track) { return track.classId == classId && _iou(track.bbox, rect) >= _matchIouThresh; }); } if (accepted) { acceptedDetections[rect] = classId; } } // トラッカーを更新 final updatedTracks = tracker.update(acceptedDetections); // ラインカウンターを更新 lineCounter.update(updatedTracks, _viewSize!); } ``` **ポイント：** - 低信頼度の検出でも、既存トラックとIoUが高ければ受け入れる（追跡の継続性） - 座標変換：カメラ座標系 → 画面座標系の変換が必要 --- ## 🎯 高精度トラッキングの実装物体検出だけでは、フレーム間でIDが変わってしまい、同一の人物を追跡できません。ここで**トラッキング**が必要になります。 ### トラッキングの目的 1. **IDの安定化**：同一物体に一意のIDを割り当て続ける 2. **オクルージョン対応**：一時的に見えなくなっても追跡を継続 3. **重複排除**：同じ物体を複数回カウントしない ### アルゴリズム選定：Kalman Filter + Hungarian Algorithm DeepSORT風のアルゴリズムを採用しました（外観特徴なし）。 **構成要素：** - **Kalman Filter**：物体の運動モデルで次フレームの位置を予測 - **Hungarian Algorithm**：検出とトラックの最適割り当て - **トラックライフサイクル**：Tentative → Confirmed → Deleted ### 実装の全貌以下、トラッカーの核心部分の実装です。 #### 1. Kalman Filterによる予測 **実装コード：** ```dart // 状態ベクトル: x = [cx, cy, a, h, vx, vy, va, vh]^T // cx, cy: 中心座標 // a: アスペクト比 // h: 高さ // vx, vy, va, vh: 速度 void predict(List x, List> P, {double dt = 1.0}) { final F = _motionMatrix(dt); // 状態遷移行列 final Q = _motionNoise(dt); // プロセスノイズ // x' = F x final x1 = _matVec(F, x); // P' = F P F^T + Q final FP = _matMul(F, P); final P1 = _matAdd(_matMul(FP, _matTranspose(F)), Q); _copyVec(x1, x); _copyMat(P1, P); } ``` #### 2. マハラノビス距離によるゲーティング検出とトラックの関連付けの前に、**マハラノビス距離**でフィルタリングします。 **ゲーティングの実装：** ```dart double mahaSq(List x, List> P, List z) { final H = _updateMatrix(); // 観測行列 final R = _measureNoise(); // 観測ノイズ // y = z - Hx (イノベーション) final y = _vecSub(z, _matVec(H, x)); // S = H P H^T + R (イノベーション共分散) final S = _matAdd(_matMul(_matMul(H, P), _matTranspose(H)), R); // d^2 = y^T S^{-1} y final Sinv = _matInv(S); final t1 = _matVec(Sinv, y); return _dot(y, t1); } ``` マハラノビス距離が閾値（デフォルト: 9.4877）を超える場合、その検出は候補から除外されます。 #### 3. コスト行列の構築 **コスト計算の実装：** ```dart // コスト = λ * (1 - IoU) + (1-λ) * normalized Mahalanobis distance final cost = List.generate(nTrk, (_) => List.filled(nDet, 1e6)); for (int i = 0; i < nTrk; i++) { final ti = tracks[i]; final tb = ti.toRect(); for (int j = 0; j < nDet; j++) { final mj = detZ[j]; // マハラノビス距離でゲーティング final maha = kf.mahaSq(ti.mean, ti.cov, mj); if (maha > gateThreshold) continue; // IoU計算 final db = detections[j].bbox; final iou = _iou(tb, db); if (iou < iouMin) continue; // コスト計算 final mahaNorm = min(maha / gateThreshold, 1.0); final c = lambdaCost * (1.0 - iou) + (1.0 - lambdaCost) * mahaNorm; cost[i][j] = c; } } ``` **パラメータ：** - `lambdaCost = 0.7`：IoUを重視（0に近いと運動モデル重視） - `iouMin = 0.01`：最小IoU閾値 - `gateThreshold = 9.4877`：カイ二乗分布の5%点（自由度4） #### 4. Hungarian Algorithm（ムンクレス法）コスト行列から最適割り当てを求めます。 **Hungarianアルゴリズムの実装：** ```dart List> _hungarian(List> cost) { // 1. 行削減 for (int i = 0; i < n; i++) { final minVal = a[i].reduce(min); for (int j = 0; j < n; j++) a[i][j] -= minVal; } // 2. 列削減 for (int j = 0; j < n; j++) { double minVal = double.infinity; for (int i = 0; i < n; i++) minVal = min(minVal, a[i][j]); for (int i = 0; i < n; i++) a[i][j] -= minVal; } // 3. ゼロにスターを付ける // 4. カバーされた列をカウント // 5. パスを増強 // 6. 行列を調整 // ... (詳細は省略) return result; // (trackIdx -> detectionIdx) のマッピング } ``` Hungarian Algorithmにより、**グローバル最適な割り当て**が得られます。 #### 5. トラックのライフサイクル管理 ```dart enum TrackState { tentative, confirmed, deleted } // マッチしたトラックを更新 for (final m in matches) { final t = tracks[m.key]; final z = detZ[m.value]; // Kalman更新 kf.update(t.mean, t.cov, z); t.hits += 1; t.timeSinceUpdate = 0; // 仮トラックの確定 if (t.state == TrackState.tentative && t.hits >= minHits) { t.state = TrackState.confirmed; } } // マッチしなかったトラックを削除 for (final i in unmatchedTrkIdx) { final t = tracks[i]; if (t.timeSinceUpdate > maxAge) { t.state = TrackState.deleted; } } // 削除フラグのトラックを除去 tracks.removeWhere((t) => t.state == TrackState.deleted); ``` **パラメータ（15fps環境に最適化）：** - `minHits = 1`：確定に必要な連続ヒット数 - `maxAge = 90`：見失い許容フレーム数（6秒） --- ## 📏 ライン通過判定アルゴリズムトラッキングだけでは「いつ、どの方向に通過したか」が分かりません。ここで**ライン通過判定**を実装します。 ### 基本原理画面上に仮想ラインを設定し、トラックの重心がラインを**符号変化して通過**したときにカウントします。 ``` ↑ 正方向（+normal） | ───────────●─────────── ← ライン | ↓ 逆方向（-normal） ``` ### 実装のポイント #### 1. 符号付き距離の計算 **ライン定義のコード：** ```dart // LineCounterクラスの実装 class LineCounter { Offset center; // ライン中心（正規化座標 0.0〜1.0） double angleRadians; // ライン角度（ラジアン） // ライン法線ベクトル Offset get normal => Offset(-sin(angleRadians), cos(angleRadians)); // 点からラインへの符号付き距離 double signedDistanceTo(Offset point) { final toPoint = point - center; return toPoint.dx * normal.dx + toPoint.dy * normal.dy; } } ``` #### 2. 重心の平滑化（EMA）フレーム間のノイズを除去するため、**指数移動平均（EMA）**で重心を平滑化します。 **EMA平滑化の実装：** ```dart // 重心の平滑化処理 final prevEma = _emaById[id] ?? currNorm; final ema = Offset( smoothingAlpha * currNorm.dx + (1 - smoothingAlpha) * prevEma.dx, smoothingAlpha * currNorm.dy + (1 - smoothingAlpha) * prevEma.dy, ); _emaById[id] = ema; ``` **`smoothingAlpha = 0.7`**：現在値を70%、過去値を30%の重みで合成 #### 3. 通過判定の条件符号が変わっただけではカウントしません。以下の条件を**すべて満たす**場合にカウントします。 **通過判定のロジック：** ```dart // 符号変化の検出 final changedSign = (lastSignedDistance * signedDistance) < 0; // 法線方向の移動量 final movementAlongNormal = movement.dx * normal.dx + movement.dy * normal.dy; final normalTravel = movementAlongNormal.abs(); // 距離変化量 final deltaDistance = (signedDistance - lastSignedDistance).abs(); // カウント条件 if (changedSign && (movementMagnitude >= minDeltaNormalized || normalTravel >= minDeltaNormalized) && normalTravel >= minCrossingDistanceNormalized && deltaDistance >= minCrossingDistanceNormalized / 2) { // 方向判定 bool forward = movementAlongNormal > 0; if (invertDirection) forward = !forward; if (forward) { forwardCount += 1; } else { backwardCount += 1; } // クールダウン設定（重複カウント防止） _cooldowns[id] = cooldownFrames; } ``` **パラメータ（15fps環境に最適化）：** - `minDeltaNormalized = 0.003`：微小移動フィルタ - `minCrossingDistanceNormalized = 0.008`：最小通過距離 - `cooldownFrames = 20`：カウント後のクールダウン（約1.3秒） #### 4. クールダウン機構同じトラックが短時間で複数回カウントされるのを防ぐため、カウント後に一定フレーム数の**クールダウン**を設けます。 **クールダウンの実装：** ```dart final cooldown = _cooldowns[id]; if (cooldown != null) { // クールダウン中は処理をスキップ continue; } // カウント後 _cooldowns[id] = cooldownFrames; // 20フレーム（約1.3秒） ``` --- ## ⚡ パフォーマンス最適化 ### 達成した性能指標 | 項目 | 値 | |------|-----| | **FPS** | 30-60（デバイス性能に依存） | | **平均レイテンシ** | 50-100ms | | **メモリ使用量** | 200-400MB | | **モデルサイズ** | yolo11s: 21MB / yolo11m: 49MB | ### 最適化のポイント #### 1. GPU使用の有効化 ```dart YOLOView( useGpu: true, // iOS: Metal, Android: GPU Delegate ) ``` GPUを使用することで、推論速度が**2-3倍**向上します。 #### 2. フレームレートの制限 ```dart streamingConfig: const YOLOStreamingConfig( maxFPS: 30, // 30fpsに制限 ), ``` 60fpsで処理してもバッテリーを消費するだけなので、30fpsに制限。 #### 3. 座標変換の最適化カメラ座標系から画面座標系への変換は毎フレーム実行されるため、計算を最適化します。 **座標変換の実装：** ```dart Rect _convertToGlobalCoordinates(Rect boundingBox, Rect normalizedBox) { // RenderBoxのキャッシュ final renderBox = _yoloViewKey.currentContext?.findRenderObject() as RenderBox?; if (renderBox == null) return boundingBox; // カメラフレーム情報の推定（EMAで平滑化） final frameInfo = _updateCameraFrameInfo(boundingBox, normalizedBox); // Aspect Cover変換 final localRect = _mapRectWithAspectCover( normalizedBox, renderBox.size, MediaQuery.of(context).orientation, frameInfo, ); return localRect ?? Rect.zero; } ``` #### 4. トラッキングパラメータのチューニング 15fps環境（低速デバイス）でも安定動作するようパラメータを調整しました。 ```dart // デフォルト値（15fps想定） static const int defaultMaxAge = 90; // 6秒間見失いを許容 static const int defaultMinHits = 1; // 1フレームで確定 static const double defaultIouMin = 0.1; // 低IoUでも許容 ``` 通常のDeepSORT（30fps想定）の値から、フレーム数を倍に調整しています。 #### 5. ステート最小化不要な状態変更を減らし、Widget再ビルドを最小限に抑えます。 ```dart // UIとロジックの分離 final tracker = ref.read(lineTrackerServiceProvider); // read（再ビルドなし） final lineCounter = ref.watch(lineCounterServiceProvider); // watch（必要時のみ） ``` --- ## 😰 苦労した点と解決策 ### 1. カメラ座標系の不一致 **問題：** YOLOの検出座標とFlutterの画面座標が一致せず、バウンディングボックスがズレる。 **原因：** - カメラのアスペクト比（4:3）と画面のアスペクト比（9:16）が異なる - iOSとAndroidで座標系が異なる - 画面の向き（Portrait/Landscape）で変換が変わる **解決策：** normalizedBox（0.0〜1.0の正規化座標）から逆算してカメラ解像度を推定し、Aspect Coverでマッピング。 **カメラサイズ推定の実装：** ```dart Size _estimateCameraSize(Orientation orientation, _CameraFrameInfo? frameInfo) { final longSide = frameInfo?.longSide ?? 4.0; final shortSide = frameInfo?.shortSide ?? 3.0; if (orientation == Orientation.portrait) { return Size(shortSide, longSide); // 縦向き: 短辺×長辺 } return Size(longSide, shortSide); // 横向き: 長辺×短辺 } ``` ### 2. トラッキングIDの不安定性 **問題：** 人が重なったり、一時的に見えなくなると、IDが変わってしまう。 **解決策：** - `maxAge = 90`（6秒）に設定し、長時間の見失いに対応 - マハラノビス距離ゲーティングで、運動モデルに基づく予測を活用 - IoU閾値を`0.1`まで下げ、大きくズレた検出でもマッチング可能に ### 3. 重複カウント **問題：** 同じ人が複数回カウントされてしまう。 **解決策：** - **クールダウン機構**：カウント後20フレーム（約1.3秒）は同じIDをカウントしない - **通過距離の閾値**：ライン法線方向に一定距離以上移動した場合のみカウント - **微小移動フィルタ**：ノイズによる誤検出を除去 ### 4. モデル切り替え時のクラッシュ **問題：** yolo11s ↔ yolo11m を切り替えると、iOSでカメラがクラッシュする。 **解決策：** 古いコントローラーを完全に停止してから、1秒待ってから新しいコントローラーを起動。 **モデル切り替えの実装：** ```dart void _switchModel(String newModel) async { // トラッカーとカウンターをクリア trackerService.clear(); lineCounter.resetCounts(); // 古いコントローラーを停止 await _yoloController.stop(); // カメラリソースの解放を待つ（iOSでは長めに待つ） await Future.delayed(const Duration(milliseconds: 1000)); if (!mounted) return; // YOLOViewを完全に再構築 setState(() { _yoloController = YOLOViewController(); _selectedModel = newModel; }); // カメラ初期化を待つ await Future.delayed(const Duration(milliseconds: 500)); if (mounted) { _yoloController.setConfidenceThreshold(_confidenceThreshold); _yoloController.setIoUThreshold(_iouThreshold); } } ``` ### 5. バックグラウンド移行時のデータ保存 **問題：** アプリをバックグラウンドに移行すると、計測データが失われる。 **解決策：** `WidgetsBindingObserver`でライフサイクルを監視し、`paused`や`detached`状態になったら自動保存。 **ライフサイクル監視の実装：** ```dart @override void didChangeAppLifecycleState(AppLifecycleState state) { if (state == AppLifecycleState.paused || state == AppLifecycleState.detached) { _handleAppClosing(); // セッションを自動保存 } } ``` --- ## 📊 実装の成果 ### 定量的な成果 - **FPS**: 30-60（デバイス依存） - **トラッキング精度**: IoU 0.7以上で安定追跡 - **カウント精度**: 目視カウントとの誤差 5%以内（テスト環境） - **バッテリー消費**: 30分の連続使用で約15%消費（iPhone 14 Pro） ### 定性的な成果 - **スマホ1台で計測可能**：専用機器不要 - **リアルタイムフィードバック**：計測中に結果を確認できる - **低コスト**：アプリは無料、追加費用なし - **データ保存**：Firebase連携で自動保存・複数デバイス同期 ### ユーザーの声（想定） > 「今まで手作業で数えていた通行量調査が、スマホを置くだけで自動化できた！」 > 「イベント運営で来場者数をリアルタイムに把握できるのが便利」 --- ## 🎓 学んだこと ### 技術面 1. **YOLO + トラッキングの深い理解**：検出とトラッキングは別物 2. **Kalman Filterの実装**：線形代数の実践的応用 3. **Hungarian Algorithm**：組合せ最適化の重要性 4. **モバイルAIの制約**：メモリ、バッテリー、速度のトレードオフ 5. **座標変換の難しさ**：カメラ座標系の理解が必須 ### 開発面 1. **プロトタイプ → 最適化 → リファクタリング**の反復 2. **パラメータチューニングの重要性**：デフォルト値の影響は大きい 3. **デバッグログの活用**：フレームごとの状態を可視化 4. **テストの自動化**：単体テストでバグを早期発見 5. **ドキュメントの整備**：未来の自分へのメモ ### 個人開発 1. **小さく始めて改善する**：完璧を目指さない 2. **ユーザーフィードバックの重要性**：想定外の使い方を知る 3. **オープンソース活用**：車輪の再発明をしない 4. **コミュニティの力**：Flutter/Dartコミュニティに感謝 --- ## 📚 参考資料 ### 論文・文献 - [YOLO11 - Ultralytics](https://docs.ultralytics.com/models/yolo11/) - [Simple Online and Realtime Tracking (SORT)](https://arxiv.org/abs/1602.00763) - [Deep SORT](https://arxiv.org/abs/1703.07402) - [BoT-SORT: Robust Associations Multi-Pedestrian Tracking](https://arxiv.org/abs/2206.14651) - [Kalman Filter Tutorial](https://www.kalmanfilter.net/) ### ライブラリ・ツール - [Flutter](https://flutter.dev/) - [ultralytics_yolo](https://pub.dev/packages/ultralytics_yolo) - [Riverpod](https://riverpod.dev/) - [Firebase](https://firebase.google.com/) ### コミュニティ - [Flutter Community](https://flutter.dev/community) - [Ultralytics Community](https://community.ultralytics.com/) - [Stack Overflow](https://stackoverflow.com/questions/tagged/flutter) --- ## 🏁 おわりに「スマホで通行量をカウントする」というシンプルなアイデアから始まった開発でしたが、YOLO11の統合、Kalman Filterによるトラッキング、ライン通過判定など、多くの技術的挑戦がありました。個人開発ならではの自由さで、試行錯誤を繰り返しながら、**30-60 FPSのリアルタイム処理**を実現できたことは大きな達成感です。この記事が、FlutterでAIを活用したアプリを開発したい方や、物体検出・トラッキングに興味がある方の参考になれば幸いです。 **ミチミエール**は現在、App Store / Google Playで無料公開中です。ぜひダウンロードして、実際に使ってみてください！ --- ### アプリのダウンロード - 📱 **App Store**: ミチミエールで検索 - 🤖 **Google Play**: ミチミエールで検索 - 🌐 **公式サイト**: https://michimieru.com ### お問い合わせ・フィードバック公式サイト（https://michimieru.com）のお問い合わせフォームからご連絡ください。ご意見・ご感想・バグ報告など、お気軽にお寄せください！ --- ## 📌 関連記事（今後執筆予定） - FlutterでFirebase連携 - リアルタイムデータ同期の実装 - TestFlightへの自動デプロイ - CI/CD構築ガイド - Riverpodによる状態管理 - ベストプラクティス - モバイルAIアプリのパフォーマンスチューニング --- **#Flutter #YOLO #AI #機械学習 #物体検出 #個人開発 #アプリ開発 #Firebase #モバイルアプリ #技術記事 #iOS #Android #TensorFlow #画像認識 #ディープラーニング #Dart #リアルタイム処理 #Kalman Filter #トラッキング #コンピュータビジョン**

交通量計測をAIで自動化するスマホアプリ