Anthropicの新モデル Claude Fable 5 が出たので、せっかくだから何かまともなものを作らせてみることにしました。
題材は前から欲しかった回路図エディタです。完成品は /circuit で動いています（使い方マニュアルもClaude製）。
作った動機
論文やスライドに載せる回路図を描くツールは、世の中にあるものを片っ端からインストールして試しました。が、完全に要求を満たすものが1つもない。
- 描画はきれいだが配線がポンコツ（線がピンに吸い付かない、交差の表現がない）
- 配線は賢いがSPICEシミュレータのおまけで、図としての出力が汚い
- 高機能だが重い・有料・ライセンス管理が面倒
という感じで、後輩に「回路図って何で描くのがいいんですか」と聞かれても答えられないのが長年もやもやしていました。無いなら作ればいい、ということで作りました。
できたもの
Flaskのテンプレート1枚（SVG + vanilla JS、依存ライブラリなし）に全部入っています。
- 基本素子の配置・回転・反転、ピン吸着つきの配線（A*で障害物を避けて自動ルーティング、交差はホップで表現）
- 線とテキストとピンを置いて自作素子を作れるエディタ。パレットに登録され、既製品と同等に扱える
- 信号の流れ用の矢印配線、フリーテキスト、素子名の一括非表示、ラベルの位置調整
- シート切替で複数の回路図を管理、JSONファイルで人に渡せる（自作素子も同梱される）
- SVG出力。MOSの表記は流派（バブル / ソース矢印 / IEEE）を切り替え可能
キー割り当ての一部は Cadence VirtuosoのSchematic Editorのデフォルトをパクりました。w で配線、r で回転、c でコピー、u でアンドゥあたりです。研究室の人間はこれで指が覚えているので。
どういうプロセスで開発したか
Claude Codeに日本語で雑に要望を投げる → 実装してデプロイまで勝手にやる → 自分で触って気になった点を次の指示で直す、というループです。設計書も仕様書もありません。入力履歴がまるごと残っていたので、実際に投げた命令をほぼそのまま並べます（誤字も実録です）。
土台づくり
- 「回路図エディターが欲しいんだよね。画面左にmosfet,cap,res,opampとかの基本素子。そこから選択して画面中央に配置。グリッドに載せる。素子と素子をワイヤでつなぐときは最適な経路で。ワイヤを触ればあとから動かせる。ワイヤの分岐点には黒丸。つながってないワイヤの交点は片方を半円でよけてる感じにする」
- 「選択モードで素子の線があるところしか触れなた」
- 「ctrl+zで操作戻せるようにして。回転だけじゃなくてミラー反転もできるようにして」
- 「R1とかのテキストは編集できるようにして。SVG保存するときにワイヤの点を表す赤丸が残ってるから残らないようにして。ワイヤがつながってる素子を動かすとき、動かしてる間もリアルタイムでワイヤが動くようにして。pmosとnmosは表記の流派がいろいろあるから選べるようにして、選んだらすでに置いてあるpmosとnmosの流派も統一されるようにして」
- 「ワイヤ配線で赤丸を優先するのはいいんだけど、赤丸と赤丸が1点挟んで隣同士の時、真ん中のグリッド点に配線置けない・配線出せないのは良くないから優先度弱めて」
- 「選択モードでドラッグしたら範囲内のもの全部選択できるようにして。CTRLかSHIFT押しながら素子選択していったら同時選択できるようにして。ctrl+Cとctrl+Vでコピペできるようにして。ブロック図用の四角も基本素子に追加して」
- 「デフォルトは選択モードで、escキー押したら選択モードに戻るようにして。ctrl+Vは基本素子持ってくるときみたいに、ゴーストにして、クリックしたところに置くようにして。ctrl+zはuキーでもできるようにして。ctrl+cからctrl+vの動作はcキー押したら、コピーして、ゴースト出すようにして。ゴースト出しながらrキーで回転するようにして。R1とかのテキスト編集ができない。ダブルクリックで編集できるようにして」
- 「R1とかの文字は薄くしないで。フォントをtimes new roman とかから選べるようにして。テキストいじるときポップアップみたいにするんじゃなくてパワポのテキスト編集みたいにして」
- 「テキスト編集できない。」
- 「回路素子のブロックの飛び出してる線消して線の結合点だけ残して」
仕様らしい仕様は最初の1個だけで、あとは触って引っかかった所への文句です。2番や9番みたいな壊れた日本語・症状の報告だけでも、原因を特定して直してきます。
ここまで作ったところで5時間セッションのトークンを使い切ったので、その日は寝ました。
機能拡張
- 「回路素子を線引いて文字置いて自作できるようなモード作って」
- 「自作のところで、線とかテキストを置いてからも選択モードで動かせるようにして」
- 「自作モードがescキーで簡単に閉じないようにして、マウスホイールでズームできるようにして」
- 「素子関係なしにテキストだけ置けるようにして。素子のR1とかC1とかはオプションで一括非表示できるようにして」
- 「端子を示す小さい丸と、チョッピングとかに使う丸の中にバツマークを追加して」
- 「端子の線1マス短くして。チョッパから線出さないで。電流源追加して。配線と同じ形で先を矢印にするモード作って。すでにある線の端っこを右クリックして矢印に変えられるようにして」
- 「矢印が付くときはもともとの線を1ピクセル短くして矢印の三角形と線が重ならないようにして。コピペするとき素子についてる配線までコピペしないで、配線も選択してるときはもちろんコピペしていいけど」
- 「素子のラベルの位置かえられるようにして。配線を選択した状態で、配線の先をドラッグしたら先の位置を変えられるようにして」
- 「回路図複数作るように別ページ作れるようにして」
- 「人に自分の回路図渡せるように、テキストデータかなんかでセーブロードできるようにして」
- 「マニュアル作って」
ポイントは 1回の指示を「使っていて困ったこと」単位にすることです。最初から全仕様を書くのではなく、触って引っかかった所をそのまま日本語で言う。16番みたいに細かい修正を5個まとめて投げても全部正しく処理されました。
感心したのは指示の解釈の精度です。17番で「1ピクセル短くして」と言ったら、線の丸い端部が三角形の先から覗かない量（8px）に勝手に調整した上で「1pxだとこうなるのでこうしました」と理由を説明してきました。指示の字面ではなく意図を実装してきます。
あとはデプロイの自動化も込みで任せられるのが楽でした。編集 → JS構文チェック → sudo でApache再起動 → curl で200確認、まで毎回勝手にやるので、こちらはブラウザをリロードして触るだけです。
まとめ
もともとは「月20ドルのもとを取るために今週分のトークンを使い切ろう」と思って始めた工作だったんですが、アメリカのFable 5へのアクセス停止命令の補償だか何かで使用量がリセットされてしまいました。もとを取るために、これから別のやつを作ろうと思います。