Foxglove のセットアップ方法：実践ガイド

TL;DR

• Foxglove を 2 分でインストール (デスクトップ、ウェブ、または Docker)
• ROS 2 と接続 (ros2 topic list と Foxglove の ROS ブリッジを使用)
• MCAP ログを ROS バッグファイルより高速で可視化 (mcap record を活用)
• ドラッグアンドドロップでダッシュボードを構築 (3D、画像、グラフパネル)
• リアルタイムと録画データのデバッグ (タイムシンク制御)
• カスタム TypeScript パネルでプロプライエタリスキーマを拡張

1. Foxglove のインストールと ROS 2 への接続

Foxglove のインストール方法

以下の方法から選択してください。

デスクトップ版（ROS 2 推奨）

# macOS (Homebrew)
brew install --cask foxglove-studio

# Linux (AppImage)
wget https://github.com/foxglove/studio/releases/download/v2.12.0/FoxgloveStudio-2.12.0.AppImage
chmod +x FoxgloveStudio-*.AppImage
./FoxgloveStudio-*.AppImage

# Windows (Winget)
winget install Foxglove.FoxgloveStudio

ウェブアプリ（インストール不要）

Foxglove Studio ウェブ版 を Chrome または Firefox で開きます。

Docker（CI/CD 用）

docker run -p 8080:8080 foxglove/studio

ROS 2 との接続手順

1. ROS 2 が動作していることを確認

   ros2 topic list
   

   Copy

   例出力:

   /cmd_vel
   /scan
   /tf
   /odom
   

   Copy

2. Foxglove を起動し接続

   • Foxglove を開き、"接続" ボタンをクリック → "ROS 2" を選択
   • ROS 2 のドメイン ID を入力（デフォルト: 0）

     ros2 run foxglove_bridge foxglove_bridge --ros-domain-id 0
     

     Copy
   • Foxglove で同じドメイン ID を選択

3. 期待される動作

   • Foxglove に ROS 2 の全トピックが表示されます。"購読" をクリックしてストリーミングを開始

2. MCAP ログフォーマットの活用

MCAP の利点

MCAP（Micro-Format for ROS Data）は、ROS バッグファイルより高速かつ小容量です。MCAP スペック を参照ください。以下の用途に適しています:

• 大規模ロボットデータセット
• クラウドストレージ（例: Foxglove Data Platform）

MCAP データの記録

# MCAP ツールのインストール
pip install rosbags-mcap

# ROS 2 トピックから記録
ros2 bag record -a --storage mcap -o my_robot_data.mcap

Foxglove での再生

1. Foxglove を開き、my_robot_data.mcap をドラッグアンドドロップ
2. タイムスライダーを操作してデータを確認

3. ビジュアライゼーションレイアウトの構築

ダッシュボードの作成

1. パネルの追加

   • 左サイドバーから "3D パネル"、"画像パネル"、または "プロットパネル" をドラッグ
   • 例: /scan（LiDAR）を 3D で、/image_raw を画像として表示

2. レイアウトの保存

   # JSON としてエクスポート
   foxglove studio export-layout --output my_dashboard.json
   

   Copy

   例: my_dashboard.json

   {
     "panels": [
       {
         "type": "3D",
         "topic": "/scan",
         "frame": "base_link"
       },
       {
         "type": "Image",
         "topic": "/image_raw"
       }
     ]
   }
   

   Copy

3. レイアウトの読み込み

   • Foxglove を開き、"レイアウトの読み込み" → my_dashboard.json を選択

4. 3D、画像、プロットパネルの活用

3D パネル（LiDAR/URDF）

• 3D パネルを追加 → /scan トピックを選択
• 設定
  • frame を base_link（/tf から取得）に設定
  • "TF フレームを表示" を有効化してロボットのポーズを可視化

画像パネル（カメラ）

• 画像パネルを追加 → /image_raw を選択
• 調整
  • encoding を bgr8（ROS 2 カメラの一般的な形式）に設定

プロットパネル（時系列データ）

• プロットパネルを追加 → /odom/pose/pose/position/x を選択
• カスタマイズ
  • 2 番目のシリーズとして /twist/twist/linear/x を追加
  • "自動スケール" を使用して動的に範囲を調整

5. リアルタイムデバッグと録画再生

リアルタイムデバッグ

1. ROS 2 データをリアルタイムストリーミング

   ros2 run foxglove_bridge foxglove_bridge --ros-domain-id 0
   

   Copy
2. 再生の一時停止/再開
   • タイムコントロールを使用

録画再生

1. MCAP ファイルを読み込み

   foxglove studio open my_robot_data.mcap
   

   Copy
2. タイム同期
   • "タイムシンク" を使用して複数のログを合わせる

6. カスタム拡張とメッセージスキーマ

カスタムパネルの追加

1. TypeScript 拡張を作成

   npx @foxglove/create-extension my-custom-panel
   cd my-custom-panel
   

   Copy
2. src/panel.ts を編集

   import { Panel } from '@foxglove/studio';
   
   export class MyCustomPanel extends Panel {
     render() {
       return <div>カスタムビジュアライゼーション: my_topic</div>;
     }
   }
   

   Copy
3. ビルドと読み込み

   npm run build
   foxglove studio load-extension ./dist
   

   Copy

カスタムメッセージスキーマの定義

1. スキーマを追加 (foxglove.config.json)

   {
     "schemas": {
       "my_namespace/MyMessage": {
         "fields": [
           {"name": "x", "type": "float32"},
           {"name": "y", "type": "float32"}
         ]
       }
     }
   }
   

   Copy
2. Foxglove で使用
   • トピックを選択 → Foxglove がカスタムスキーマを解析

7. チームワークフローとフリートデバッグ

ライブセッションの共有

1. セッションをホスト

   foxglove studio share --port 8080
   

   Copy
2. チームメンバーに招待
   • Foxglove Studio ウェブ版 でリンクを共有

クラウドストレージ（Foxglove Data Platform）

1. データのアップロード

   foxglove data upload my_robot_data.mcap
   

   Copy
2. Foxglove でアクセス
   • サインイン → "クラウド" → データセットを読み込み

次のステップ

1. ロボットのミッション全体を mcap record で記録・分析
2. ロボットの主要メトリクス用カスタムダッシュボードを構築
3. プロプライエタリトピック向けに Foxglove を TypeScript パネルで拡張

物理 AI インフラやデプロイメント に関心がある場合は、Hyperion の エンボディード VLA システム や エッジランタイム のツールをご覧ください。お問い合わせ をいただき、プロジェクトについてご相談ください。