【続】ClaudeCodeでCodexPets（pet.json）を召喚する
動作イメージ
TL;DR
前回作った Claude Pet (Claude Codeの作業状態をデスクトップキャラクターで表すアプリ) をOpenAI の Codex アプリにあるデスクトップペット機能 (Codex Pets) と同じスプライトシート規格に対応させてみました。
前回の記事
※Codex 用に公開されているペット素材を選択すると、Claude Code の状態に合わせて動くようにしてます。
20260503 アップデートで対応
Codex Pets とは
OpenAIのCodexアプリには、画面の隅でCodexの作業状態を伝える小さいキャラクター (Codex Pets) を表示する機能がある。/pet で表示でき、/hatch で自分のペットを生成できる。
すでにコミュニティでペットを共有するサイトがいくつか立ち上がっている。
- Petdex — 165以上のペットが投稿されているギャラリー。検索APIも公開
- codex-pets-react (MIT) — Reactラッパーと "Tater" のサンプル
- hatch-pet (OpenAI公式スキル) — 規格定義
やりたかったこと
具体的には、Claude Pet 側で、Codex 向けに作られたペット素材 (pet.json + spritesheet.webp) 形式で読み込み、Claude Codeの状態に合わせて動くみたいなこと。
ジェスチャーと自動遷移を増やした
前回作った時点では idle / thinking の2状態だけだったので、Codex Pet で表現できる
- 「放置で別アニメに切り替わる」
- 「作業完了の瞬間にお祝いする」
- ドラッグアンドドロップ時の動作
を追加しました。
- アイドル状態が一定時間続くと、待機ループ (waiting) に切り替わる
- 作業中 → アイドル に変わった瞬間、手を振る動作 (waving) が1回入ってから idle に戻る
- ペット本体をクリックするとジャンプ (jumping)
- ドラッグした方向に応じて running-left / running-right / jumping を1回再生する
待機までの秒数は設定画面から変えられる。
設定画面で pet.json を選ぶ
設定画面に「🥚 Codex Pet 一括設定」を追加した。
pet.json のパスを選ぶと、同じフォルダにある spritesheet.webp (または .png) を読み込んで、Claude Pet の各状態にスプライトシートの該当行を割り当てる。
-
設定画面
-
動作単位で、アニメーションも設定できる
これができるので、【特定の動作だけ別のキャラクターの別の動きにする】 とかもできます。
状態ごとに別ペットの動きを混ぜる
「全体は Petdex の Boba を使うけれど、waving だけは別ペットのアニメに差し替えたい」のような個別動作だけ変更できるようにした。
各状態ごとに個別のファイルを設定可能で単なる画像ファイルでもいいし、そこに別のペットの pet.json を指定すると、その pet.json から該当行のみ抜粋して再生する。
各状態に割り当てられるファイル形式は以下。
- Lottie JSON
- GIF / SVG / PNG / JPG
- pet.json (別ペットの該当行を抜粋して使う)
ペット素材の入手元
| 入手元 | 備考 |
|---|---|
| Petdex | 165以上のペット。検索APIで一覧取得可 |
| codex-pets-react | MITライセンスの "Tater" が同梱 |
| CodexPets.app |
npx @scoomdroll/codexpets search で配布 |
ライセンスはペットごとに違う。再配布する場合は各サイトの表記を確認する。
Image2以外で素材得る方法
Image2で作ればいいんだけどそれ以外の方法としてここでも素材取れるよっていう。
ゲーム作りの時はここからとにかく素材集めまくってる。
ここの素材を活用してキャラクターつくって見るのもいいかもしれない。
- ichi.io
https://itch.io/game-assets - pixellab(ここのMCPでキャラクターアニメーション生成するのおすすめ。）
https://www.pixellab.ai/
制限
-
現在 Windows 版のみ
-
Windows Terminal で1つのターミナルにタブで Claude Code をまとめて動かしている時に動作する
-
Codex 規格の
failed(row 5) /review(row 8) は未対応 ※ -
Claude Code 側の状態は Claude Pet が独自に観測しているもので、公式のフックや API は使っていない
-
吹き出しが出て話しかけてくれる機能はない。（実装したい。。。） -
応対内容を吹き出しで出すようにした（一番最近のClaudeCodeの返信）
-
慣性の法則もつけた
※ failed / review は Claude Code に「エラーで止まった」「レビュー待ち」に相当する明確な状態が見当たらないので、現状はマッピングしていない。
表示仕様
- 常に最前面に表示される
- システムトレイに常駐
- ドラッグで移動でき、位置は自動保存される (ドラッグ方向に応じてアニメも再生される)
- ウィンドウサイズは設定画面から変更できる
- 最新のClaudeCodeの返信が表示される。
所感
そもそも、ClaudeCodeでペット育成アプリ作っててかなり瞑想して
結局、模倣したなぁと自分に思ってる。
Discussion