Foxgloveについて 実際にExtensionを開発して公開するまでの話 / About Foxglove: The Story of Developing and Releasing an Extension

ROS Japan UG #63 ROS LT大会

Transcript

1. 2026.7.11 ROS Japan UG #63 ROS LT⼤会 について 株丹 亮 Kabutan Ryo 実際にExtensionを開発して 公開するまでの話
2. なぜRvizではなくFoxgloveか Rvizはめっちゃ使いやすいけど、基本的には ROSがインストールされたUbuntuでしか使え ない。FoxgloveはブラウザやWindows/Macで も動作し、環境構築もROS依存なし、インス トーラカチカチで完了。 統合された可視化環境 今のトレンドに則り、データドリブンなロボッ トアプリ開発のための機能も備わっている。特 に⼤量に収集したrosbagデータを あとからFoxglove単体で可視化して確認できる のが便利。 Foxgloveとは？ 簡単に⾔えば、モダンな進化版Rviz 右図がFoxgloveの画⾯表⽰例
3. オンライン活用 WebSocket (foxglove_bridge) を介して、実⾏中のロボット から直接データを可視化。 Windows機からも容易に接続 可能。 オフライン活用 rosbagデータ の再⽣に対応。 ROS環境未インストール環境 でもブラウザやアプリ上で データを再⽣、解析できる。 拡張性 Rvizのプラグイン機能と 同様、Extensionとして 独⾃の可視化機能を開発 できる。 Typecriptで実装可能。 Foxgloveとは？（詳細） 今回のLTではExtension開発について簡単な事例を⽰しながら説明します。
4. Rvizの場合： ロボットの⼿先に装着した6軸の⼒覚センサ （Force/Torqueデータ）はgeometry_msgs/WrenchStamped型 で表現できて、右下のように標準で表⽰可能。⾚⾊⽮印がX,Y,Z ⽅向にかかる⼒の合成、⻩⾊⽮印がX,Y,Z軸周りにかかるトルク の合成を意味する。 Foxglove標準： WrenchStamped メッセージを直 接3D空間に描画する機能はない。ちょっとニッチ なデータ型なため対応していないと思われる。 Extensionを⾃作することで、独⾃の3D可視化パネルを追加してみます。 Extension開発例：WrenchStamped
5. Extension開発例：WrenchStamped ⼒覚センサ（geometry_msgs/WrenchStamped）を可視化する簡単なパネルを作成しました。 github.com/Ry0/foxglove-wrench-stamped-panel
6. トピック選択： 複数のセンサがある場合でも、対象トピックをサイド バーから簡単に切り替え可能。 スケール設定： センサの感度に合わせて⽮印の⻑さを調整する倍率設定 機能を搭載。 カラー設定： ⽮印の⾊をカラーピッカーで変更可能。 UIと設定項目の実装 設定値を⼊⼒するために便利なフォームがAPIで提供されているので 簡単に設定画⾯が作れます。
7. 問題発生 残念ながらRvizのようにロボットモデル表⽰パネルと統合す ることができず別パネルの表⽰。 どうしてもRvizのようなトルク表⽰の描画を再現したかった が、標準のロボットモデル表⽰パネルでは、そのような描画 APIは存在せず実装できなかった。 よって TFの値を取得しながら、⼿先の位置を更新しつつ⼒覚 センサの⽮印の描画をThree.js で⾏うようにしている。 ここらへんは豊富なJSの資産が活⽤できた。 Three.js による 3D 可視化
8. 実際に使っている様子 WrenchStamped データが、 強弱に応じた3D⽮印として描画される。 Rvizの可視化結果とも⼀致を確認。
9. ビルド npm run package でバイナリを⽣成。 GitHub Asset Releaseページにビルド した⽣成物.foxe を配置。 メタデータ整理 公開するときの名称、 説明を決める Extensionを公開する手順 (1) 次のページに詳細 Registryへの登録 公式リポジトリに プルリク
10. Registryへの登録 Foxglove公式のリポジトリへプルリクエストを送信。 foxglove/extension-registry をフォーク。 extensions.json に今回作ったExtension情報を追記。 PRを作成し、公式の承認を待つ。 Extensionを公開する手順 (2)
11. Extensionの導入はボタン一つで完了 ⼀度登録が完了すれば、他のユーザーは設定画⾯の拡張機 能⼀覧から選択してインストールをクリックするだけ。 必要になったときに、わざわざビルドする必要がないの が便利！ プルリクが承認されると ... ※ 登録しなくてもビルドしたファイルをローカルインストールする方法も提 供されている。
12. まとめ ご清聴ありがとうございました Foxglove で⼤体の可視化は標準でもできるが、ニッチなものはなんとか⾃分 で対応できる Registry登録 すると⾃分が作ったExtensionがFoxgloveの設定画⾯に出てくる ので、なんか嬉しい