はじめに
CodexやClaudeCodeを使っていると、コード自体はかなり書いてくれるんですが、
「結局どこをどう変えたの？」
となることがあります。
そこで使ってみたのが devdotfast/whiteboard。
これは単なるお絵描きツールではなく、（名前的に）
AIが調べたコード・設計・差分を見やすく整理するためのデスクトップアプリです。
今回はCodexを使う場合でInstallから使用感、機能などを紹介します。
Whiteboardで何ができる？
主にこの4つ。
-
Canvas
システム構成や処理フローを図で確認できる -
Code Navigation
図から実際のコードへ移動できる -
Semantic Diff
Gitの差分を「意味のある変更単位」で見やすくする -
Decision Log
Codexがどう判断して変更したか確認できる
特に、
「このブランチで何を変えたかCodexに調べてもらって、Whiteboardでレビューする」
みたいな使い方がかなり良さそうです。
インストール
まず公式サイトからWhiteboardをインストールします。
Macなら .dmg を入れればOKです。
そのあとWhiteboardを起動して、
Settings → Command line
から whiteboard コマンドを使えるようにします。
ターミナルで確認。
whiteboard --help
これで表示されればOK。
Codexと接続する
次にターミナルで実行します。
whiteboard connect codex
これを実行すると、Codex用のWhiteboard Pluginが登録されます。
内部では、CodexにWhiteboard用PluginとMCPが追加されて、CodexからWhiteboardを操作できるようになります。
必要ならCodexを再起動します。
MCPは何をしている？
ここは難しく考えなくて大丈夫です。
MCPは、AIとWhiteboardをつなぐ接続口です。
今回であればCodexがコードを調査し、
その結果をWhiteboardへ渡して表示するために使われています。
実際に使ってみる
例えばCodexにこんな感じで頼めます。
現在のbranchとmainを比較して、変更された処理を調べてください。
主要な変更ファイル、処理フロー、設計上のポイントをWhiteboardで整理してください。
これで、ただのGit diffではなく、
変更の意味を含めて見やすく整理してもらえます。
１：対話的に指示をする
２：終わるのを待つ
３：Whiteboard内に実行した結果が出る
４：
このたまごっちみたいなの可愛い
勉強にも使えそう
勉強ともかなり相性が良さそうです。
例えば、
このLaravelプロジェクトのログイン処理を調査して、RouteからDatabaseまでの流れをWhiteboardで整理してください。
とお願いすれば、
- Route
- Middleware
- FormRequest
- Controller
- Service / Action
- Model
- Database
このあたりの関係を、実際のコードを元に確認できます。
文章だけ読むより、
「この処理はここを通ってるのか」
が分かりやすくなります。
Whiteboard上でコード編集はできない
ここは注意。
現時点では、Whiteboardから直接コードを編集するツールではありません。
コードを書くのはCodexやエディタ。
Whiteboardは、
「何が起きているかを見る・理解する・レビューする」
ための場所です。
導入手順だけまとめる
- Whiteboardをインストール
- Settings → Command line からCLIを有効化
whiteboard connect codex- Codexを再起動
- Codexにコード調査を依頼
- Whiteboardで確認
かなりシンプルです。
おわりに
最初は、
「Codexから使えるホワイトボード」
くらいに思っていました。
実際は、Codexが書いたコードを人間側が理解しやすくするためのツールという印象です。
Codexで実装するだけでなく、
何を変えたか、なぜ変えたか、処理がどう流れているか
まで確認したいときにかなり使えそうです。
特にLaravelみたいに、Route・Controller・Modelなど複数のファイル
をまたいで処理が流れるフレームワークでは
かなり相性が良さそうなので今後使ってみます。
おまけ まとめ画像
