最近の私の(趣味の)アプリ開発は、まず自分で(AIの支援を借りつつ)全体デザインや進め方をできるだけしっかりとドキュメントにする -> AI(ClaudeCodeや、OpenCode等)にレビューさせて矛盾点不足点等を洗い出させ、構築プランに落とす -> それを私がレビューしてAIに戻して改善する…という繰り返しで設計と計画を精緻化し、それにそってプログラムを作成するという方法をとっています。

この場合課題になるのが、AIが出力したコメントやファイルへのレビュー&フードバックのサイクルをどう効率化するかです。後述するように今は色々なツールやSkill/Pluginが出ていますが、いくつか試してみたところHerdr Annotateが私のニーズにあっており、快適に使えているのでその特徴と使い方を説明します。

なお、私の開発環境は GreenCloud (格安 VPS)上のLinux+OpenCodeです。このあたりについては以下にブログを書きましたので、こちらもご参考までに。

Herdr

Herdr Annotateは、Herdr環境で動作します。Herdrはエージェント管理機能付きのターミナルマルチプレクサ(Tmuxのようなもの)で、OpenCodeだけでなくCodexやClaudeCode等多数のエージェント管理に対応しています。Herdr自体はすでに紹介記事が多数ありますので、詳細は割愛します。

なおHerdr Annotate自体はPlannotatorというブラウザベースでエージェントとレビューを行うためのソフトウェアの派生なので、Herdrを使わない場合はPlannotatorの方を確認してみてください。

Herdrにしかないメリットを1つだけ紹介すると、(クライアントの)クリップボードにある画像をSSH接続先のエージェントに渡すことができるという点です。

リモートに接続する際、herdr --remote myserver で接続すると、 ~/.ssh/config に設定されているmyserverにSSH経由で接続をして、Herdrがクライアントとリモート両方で起動して通信した状態になります。これだけでクリップボードからのコピーをうまくハンドリングしてくれます。リモートサーバーにSSHでログインして開発している人にはこの一点だけでもHerdrを試す価値はあると思います。(参考: Herdr document

注意点としては、クライアントとリモートのHerdrのバージョンを合わせる必要があるという点ですが、もしバージョン違いで接続しようとした場合はホームディレクトリ以下に同バージョンのバイナリをリモートコピーして実行する機能もあるので、これを使うのでも良いでしょう。

また、herdr --remoteで接続すると、Herdrのキーコンフィグ等は全てクライアント側の設定が使われます。これはこれで便利なのですが、私はどの環境から接続してもサーバー側の設定を優先したいので、以下のように--remote-keybindings serverを指定して実行しています。

herdr --remote myserver --remote-keybindings server

Herdr Annotate

Herdr Annotateは、Herdrの中でエージェントが出力したメッセージ(AIの応答)や、出力したファイルへコメント(アノテーション)を入れ、そのコメントをまとめてエージェントに指示として返すという作業を効率化します。これHerdr AnnotateHerdr Annotateは実際の画面を見ていただいたほうがイメージが付きやすいと思います。

Herdr + Herdr Annotate

上は、OpenCodeでエージェントがファイルを出力した後、Ctrl-B oでHerdr Annotateのファイルブラウザを開き、そこで必要なファイルを選択してコメントを入れているところです。

カーソルキーやマウスで範囲をハイライトし、cを押してコメントをいれると、画面右側にあるようにコメントが記録されていきます。このような方式なのでどこをどう直すといった事を文章で示す必要がなく、「この案を選択します」のように書くだけでよくなります。レビューが終わったら(コメントを書き終わったら)、Eを押すとその内容がエージェントに送られます。下図は、コメントがまとめてエージェントに送信されたところですが、ファイル内の位置情報、引用と共に複数のコメントがまとめて指示として送信されていることが分かります。

ファイルに対してではなく、エージェントが出力した応答文にコメントをいれることもできます。Ctrl+B Oを押すと、エージェントからの回答履歴が出てくるので、そこから選択し、あとは上記と同じ要領でコメントを付与します。AIエージェントが多数の検討要素をもつ回答を生成した時や、少し前の回答から指示を与えたい場合にとても便利です。

Herdr Annotate導入のメリット

上記のように、出力内容を選択してコメント(アノテーション)を付ける方法はとても効率が良いです。これはユーザーの作業効率、LLMの応答時間という面だけでなく、LLMのトークン効率の面でもメリットが大きいです(小さい課題ごとに応答を繰り返すとトークンが消費されがちですし、時間も消費します)。

AIエージェントとHerdr Annotateの動作は非同期なので、ある程度きりの良いところでEを押してコメントを送り、背後でAIに考えさせつつ自分は他のレビューを進めるということもできます。複数のファイルにコメントをいれてまとめて渡すこともできますし、ファイルとは別にコメントが保存されるのであとから参照しなおすこともできます。

こういったツールは他にもありますが(補足に記載)、私の環境にはこのHerdr Annotateが一番フィットしました。私の場合、外出先からはiPad/AndroidからSSHで接続して作業をしたいので、TUIで全て完結することが重要で、その点でも便利です。(参考: iPadからSSH接続し日本語を利用できる環境をセットアップする

UIも良くできており、マウスも使えますがキーボードだけでも操作可能に作られているので色々な環境で使いやすいですし、コメントを入れたあとにエージェントがファイルを更新した場合、コメント(アノテーション)位置がdiffに合わせて移動するのでコメント位置がズレにくいなど、よく考えられています。また、コメントは保存されているのであとから参照できるというのも良いところですね。

導入と注意点

Herdr Annotateはherdrプラグインになっているため、導入は以下のように実行するだけです。以下はフル版を導入するコマンドで、軽量のLite版もあるのですが、フル版の方をおすすめします。(上のスクリーンショットはフル版のものです)

herdr plugin install plannotator/herdr-annotate

プラグインを入れてもherdrのショートカットキーは設定されませんが、エージェントに「https://github.com/plannotator/herdr-annotate/blob/main/README.mdを見てショートカットを設定して。既存キーとバッティングしている場合は相談して」のように依頼してセットしてもらうのが良いでしょう。私は概ねREADMEのままで設定しました。

機能が色々ありますが、私の場合は、以下のような機能だけ利用しています。

  • Ctrl+B oで任意のファイルを開き、cでコメントを入れてEで送信、もしくはCtrl-B Oでエージェントの回答を開いて同様にコメント送信
  • 送信後もレビューを続け、あるていどの塊でEで送信(前に送ったコメントは再送されない)
  • ファイル上のレビューが完了したらFでフラッシュ(画面上からはコメントが消えるが記録には残っている)

なお、Herdr AnnotateのREADMEでも上記でもCtrl+B xxのように操作が書いてありますが、これはHerdrのデフォルトprefixがCtrl+Bだからです。Herdr側で変えている場合は読み替えてください。

また、Herdr Annotateにはエージェントの出力やファイル以外に、Herdr上の表示に直接アノテーションを付ける機能があるのですが、この機能は現状herdr --remoteやSSHで接続している場合はうまく動かないという制限があります(私の場合、この機能を使っていないため問題になっていません)。※参考: https://github.com/herdrdev/herdr/issues/3380

まとめ

AIエージェントの性能があがるにつれ、かなりAI任せにする部分が増えました。一方でそのアウトプットのレビューが負担になってきていました。これは私のように趣味で開発している人間よりも、本業でチーム開発をしている現場の場合はより大きい課題になりつつあるのではと思います。Herdr Annotateが誰にとっても正解とは限りませんが、Herdr環境にはすぐに導入できますので、レビュー効率改善、時間・コスト短縮のために試してみられる事をおすすめします。

補足:その他のレビュー支援ツール

参考までに同様のレビュー支援に利用できるツールを紹介します。

  • plannotator – Herdr Annotateの元になったプロジェクト。私の場合、全てTUIでやることにこだわったので採用しませんでしたが、こちらはブラウザ上のよりリッチなUIでレビューできるので、一度見てみることをおすすめします。
  • hunk – TUI 上でファイル差分を美しく表示するツールなのですが、そこにアノテーションを付けて他プログラムに渡すという事もできます。私の場合は差分ではなく、エージェントが作成したファイルや応答文にレビューを入れることが多いので、こちらは選択しませんでしたが、チーム開発等で差分をレビューしないといけない事が多い人には適しているのではと思います。
  • tuicr – hunkに非常に近いツールで、同様に差分ベースでレビューを行うことができます。hunkより後発ですが、色々な環境にインテグレーションできる事を特徴としています。

コメントを残す