Obana Yugo

Firebase × Google Maps API を用いたモビリティUI（Webアプリ / 個人開発） ROS2ロボットとクラウドを接続するための 「フロントエンド制御UI」 を React + Firebase で構築しました。 GitHub Pages で公開しており、地図UIから目的地を指定するデモが可能です。 🔗 GitHub（コード） https://github.com/Iruazu/mobility-map-app 🔗 GitHub Pages（デプロイ版） https://iruazu.github.io/mobility-map-app/ ■ 目的 ・Web UI からロボットへ直感的に目的地指定できる仕組みを作る ・Firebase と接続し、ROS2 側へ安全かつ低遅延で情報を伝達する ・ロボット位置を地図上にリアルタイムで可視化する ■ 行ったこと ▼ Web UI / Maps ・Google Maps API を用いたロボット操作 UI を実装 ・マップクリック座標を Firebase に送信し、目的地として登録 ・複数ロボット対応を想定した柔軟な UI 設計 ▼ Firebase 連携 ・Realtime Database に destination を書き込み、ROS2 ナビゲーションへ反映 ・Firestore からロボット位置を取得し、地図上にリアルタイム描画 ・Firebase Security Rules を考慮した最低限の安全設計 ▼ 開発環境整備 ・GitHub Pages へのビルド・デプロイ ・API Keys の環境変数化（段階的に改善） ■ 補足（MVP仕様について） 本 Web UI は ROS2-Firebase backend が起動しているときに動作する構成 です。 フロント側が Firebase に送信した指示を、バックエンド側で受信 → ROS2 へ転送する 「クラウドロボティクスMVP」 を前提に設計しています。 🔗 ROS2 × Firebase（バックエンド） https://github.com/Iruazu/mobility-ros2-firebase フロントエンドとバックエンドを 一つの統合システムとして設計した点 が特徴です。 ■ 学んだこと ・ロボット UI/UX とクラウドの接続に必要なデータ構造の理解 ・ロボット位置のリアルタイム可視化と、読み書きパフォーマンス調整 ・Web × Cloud × Robotics の各レイヤーが連動する設計 ・MVP → 改善 → デプロイの一連のフロント開発プロセス