Claudeフル活用してMS-COCOアノテーションビュワーを作った話
はじめに
最近のAI開発支援ツールの進化は目覚ましく、特にエージェント型AIを活用した開発体験談が毎日のように共有されています。私もClaude（特にClaude CodeとChatの組み合わせ）をフル活用して、実用的なデスクトップアプリを開発しましたので、その経験を共有します。
開発したアプリ: tact-software/coav - MS-COCO format annotation viewer
開発の背景と動機
なぜアノテーションビュワーが必要だったのか
私は数年前からAIエンジニアとして物体検知系のAI開発に携わっています。転職やフリーランスとしての独立を経て、様々なプロジェクトに参加してきましたが、どのプロジェクトでも共通して直面する課題がありました。
それは、アノテーションデータや推論結果の確認作業です。
これまではアノテーションを画像に重畳描画する簡易的なスクリプトを何度も書いていました
しかし、このような単純なスクリプトでは以下の要望を満たせませんでした：
- オブジェクトごとのIDや属性情報を確認したい
- インタラクティブに特定のオブジェクトを選択して詳細を見たい
- GUIで直感的に操作したい
既存のアノテーションツールではこのような要件を満たすことができるのですが、編集機能であったり、動作が重かったりと、ビュワーとしては過剰でした。
そこで、**「シンプルで高速、かつ必要十分な機能を持つビュワー」**を自作することにしました。
デスクトップアプリ開発は私にとって未経験の領域でしたが、Claude 4の登場により「AIと協働すれば実現できるのでは？」と考えました。
何を作ったか
COAV (COCO Annotation Viewer) - MS-COCOフォーマットのアノテーションデータを可視化するデスクトップアプリケーション
主な機能
- 画像上にBBoxやSegmentationポリゴンを重畳表示
- オブジェクトをクリックして詳細情報（ID、カテゴリ、属性等）を確認
- 高速な描画とスムーズな操作感
- クロスプラットフォーム対応
技術スタック
- フロントエンド: React + TypeScript
- バックエンド: Rust + Tauri v2
- ツール管理: mise
- パッケージ管理: Bun
開発プロセス - AIとの効果的な協働方法
今回の開発で最も重要だったのは、AIが力を発揮しやすい開発プロセスの設計でした。
1. 要件定義
要件定義では、完璧な文書を作る必要はありません。**AIが検討を始められるだけの材料（プロンプト）**を準備することが重要です。
私が実際に使用した初期プロンプト：
物体検知向けのcocoアノテーションファイルのビュワー開発を検討中である。
画像とアノテーションファイルを読み込み、画像上にアノテーションポリゴンを重畳する。
ビュワーでポリゴンをクリックすると、そのポリゴンに該当するアノテーションの情報を取得できるというもの。
MVP版として最適な仕様を詳細に検討してほしい。
現在考えていることを箇条書きで書き出す。
・開発環境は、rust/tauri v2, reactを使い、miseでツールバージョンを固定、bunでtauriのプロジェクト管理を行う
・対象プラットフォームはUbuntuとWindows
・githubから取得してビルドして使う方式にするので、パッケージ配布やオンラインアップデート等は考えなくて良い
・アプリはあくまでもビュワーなので、アノテーションの編集機能等は不要
・開く画像は1枚で、対応するアノテーションファイルも一つとし、できるだけシンプルな構成にする
まずは仕様書の章立てを考えて。それを私とブラッシュアップした後に詳細な仕様書を作って。
2. 仕様検討/仕様書作成
仕様検討での重要なポイント：
❌ 避けるべきこと
- 仕様書に詳細なコードを含める
- 一度に全ての詳細を決めようとする
✅ 推奨アプローチ
- マークダウン形式で構造化された仕様書を作成
- 実装の詳細は実装フェーズのAIに委ねる
- コンテキストの肥大化を防ぐ
この方法により、Claude Chatのコンテキスト制限を回避しつつ、統一性のある設計を維持できました。
3. 実装計画
これが最も重要なプロセスでした。
以下のプロンプトで開発計画を立ててもらいました：
この仕様をもとに、詳細な開発計画をたてて。
スプリント、タスクに分割して、タスクは、githubのissue程度の粒度に分割して、
各タスク毎に目標・開発内容・ゴールを明確にして。
この計画書はClaude ChatからClaude Codeへの引き継ぎ書として機能し、以下の問題を防ぎました：
- 余計な機能の実装
- 未実装機能を参照→存在しないため、そっちの実装に移る
- ゴールを見失い、コードが完成しない
4. 開発環境構築
開発環境構築は人間が行うべきです。理由：
- ツールやオプションの細かい制御が必要
- ローカル環境の特殊性への対応
- セキュリティ設定の確認
ただし、Dockerfileの作成など、定型的な作業はAIに任せても問題ないと思います。
5. 実装
実装フェーズでは、体感95%以上をAIが実装しました。
効果的な指示の例：
docs/dev/計画書.md に実装の計画を立てている。
全体を把握し、スプリント1の実装を完了させて。
人間が介入したのは：
- デバッグコードの削除
- 未使用変数の警告対応
- AIの使用量を節約したい簡単な修正
6. テスト
現在進行中のため、完了後に更新予定です。
AIフル活用開発の考察
「AIに仕事を奪われる」という話題をよく耳にしますが、今回の経験から感じたのは**「奪われる」のではなく「変化する」**ということです。
これからのエンジニアに求められるスキル：
- プロセス設計力 - AIが効果的に動ける環境を作る
- 要件定義力 - 曖昧な要求を構造化する
- 品質管理力 - AIの出力を評価・改善する
- 統合力 - 複数のAIツールを組み合わせる
実装スキルよりも、**「AIと協働するためのメタスキル」**が重要になってきています。
全てをAIに任せるだけでは複雑なアプリは完成しないと思いますので、完全な素人がAIを使ってプログラマーになるというのは、まだ少しハードルがあると思います。
COAVの今後
COAVはオープンソースソフトウェアとして公開しています。
今後の予定
- 包括的なテストの実装
- パフォーマンス最適化
- 追加機能の実装（エクスポート等）
- ドキュメントの充実
コントリビューション歓迎
このツールに価値を感じていただけたら：
- ⭐ スターをつけていただけると励みになります
- 🐛 バグ報告やフィードバックはIssuesへ
- 🎯 プルリクエストも歓迎です
最後に
画像系AIをメインにフリーランスエンジニアとして活動しています。今回のように未経験領域の開発もできますので、お仕事の依頼があれば是非ご連絡ください。
Discussion