Codexで作ったキャラクター30表情のSVGアニメーションを開発ダッシュボードに取り込み、目の間隔を微調整できるようにした

ハートさんの30表情アニメーションを、Codex にまとめて作ってもらった。 ZIP 1つに、動くSVG、静止SVG、PNG、確認用の HTML、生成スクリプトが入っている。 確認用の HTML にはあとで手を入れたくなりそうだったので、開発環境でいつでも開けるようにしておきたかった。 置き場所はたぶん制作ダッシュボードだろうと見当をつけて、取り込みと GitHub へのプッシュを Claude Code に頼んだ。

ハートさんの30表情を取り込む

ZIP の中身は全98ファイルあった。 これを content-src/heart-character/ にそのまま入れてもらった。 public/ の外なので、本番にも R2 にも出ない。

足したのは、配信用のミドルウェア、確認ページ、ダッシュボードのツール一覧への登録の3つ。 Chrome で描画を確かめてもらい、5e81aae6 でプッシュした。

ダッシュボードから移ったときだけブロックされる

ところが、自分で開くと表示がブロックされていた。 ZIP を展開したものを取り込んでくれているはずなのに、と思って確認を頼んだ。

原因は、ダッシュボード /dev に付いていた設定だった。 /dev には、ページの中に同じサイトのページを埋め込むことを禁じる設定がある。 カードから移るときはページ全体を読み直さないので、移った先にもこの設定が残る。 そのせいで、確認用 HTML を埋め込んだ部分がブロックされていた。 再読み込みすれば移った先のページの設定に切り替わるので、そのときは見える。

最初に返ってきた「表示確認済み」は、ページの URL を直接開いて確かめた結果だった。 カードをクリックして移る経路は、試されていなかった。 修正後は、ダッシュボードからカードで移る経路で30体の表示を確かめてもらい、c00868f3 でプッシュした。

3人版のパックを全部展開して取り込む

続けて、ハートさんにアゴヒゲさんとクチヒゲさんを加えた3人版の ZIP も Codex に作ってもらった。 今度は全部展開して取り込むように頼んだ。

新しいパックでは、3人の切り替えがプルダウン式になっていた。 これをボタン式に書き換えてもらい、一覧と拡大画面の両方で動くことも確かめてもらった。 コミットの段階で、別のセッションが同じリポジトリで memo のファイルをステージしていたことが分かった。 巻き込まないように、自分の変更のパスだけを指定してコミットさせた。

ここで Codex のレビューから指摘が出た。 生成スクリプトで作り直すと、ボタンがプルダウンに戻ってしまう。 index.html を手で直しただけでは、次に作り直したときにこの変更が消える。 そこでスクリプト側も揃えてもらった。 作り直した index.html は、手で直したものとバイト単位で一致した（SVG 180点も一致）。

全部で301ファイルを、content-src/character-expressions/ に入れてもらった。 3人それぞれの動くSVG、静止SVG、PNG（各30）に、一覧ボード、元の図、生成スクリプト、index.html が入っている。 dba21801 でプッシュし、/dev/character-expressions の上のボタンで3人を切り替えられるようになった。

クチヒゲさんの目の間隔を詰めたい

クチヒゲさんは、目が少し離れすぎている気がした。 もうちょっとだけ近づけたい。 それより、この辺りを自分で微調整できる場所がほしかった。

作ってもらったのは、保存とプレビューを受け持つサーバー側と、微調整ページ本体の2つ。 /dev/character-tuner では、スライダーで目の間隔を縮めながら30表情をまとめて確かめられる。 間隔を決めて「保存して作り直す」を押すと、ファイルが作り直される。

仕上がるまでに、4か所で引っかかった。

• プレビュー用スクリプトの出力を検証したら、一度不一致が出た。テスト側が文字コードを読み違えていただけだった
• Codex のレビューで、保存した値を失いうる競合が2件指摘された。Claude Code も重要度を high と判定し、最終的に指摘3件を直した
• コミットしようとしたら別セッションが git を使っていたので、終わるのを待ってからコミットした
• 最後の確認で、Chrome がほかのタブの処理で詰まって応答しなくなった。リポジトリにある Playwright のヘッドレスブラウザに切り替えて確かめてもらい、3c85d63f でプッシュした

クチヒゲさんの目そのものは、まだ変えていない。 間隔は元の42のままで、どこまで詰めるかは、自分がページで値を決めて保存するまで保留になっている。

「眠い」に zzz を足す

「26 眠い」を見て、zzz を入れたほうがいいと思った。 いまの「26 眠い」は半目だけで、記号が何も付いていない。 「27 すやすや」のほうには、鼻ちょうちんが付いている。

付ける位置の候補を出してもらい、おすすめの①を選んだ。 同じ作り直しで、「ぷんぷん」の怒りマークと「がーん」の縦線もおでこへ移し、3つを共通の描画部品にまとめてもらった。 変わったのは、4表情×3人の24ファイルだけだった。 PNG のうち、再エンコードされただけのものは差分から外してもらった。

途中で微調整ページが読み込めなくなった。 ファイルの変更を受けて、dev サーバーがビルドし直していただけだった。 説明文を新しい記号に合わせて直してもらい、もう一度作り直してから 40db2833 でプッシュした。 「26 眠い」には、頭の右上に小さな z が1つ付いた。

PNG 78枚は自分で戻した

セッションを閉じる前の時点で、PNG 78枚が「変更あり」のまま残っていた。 絵は元と同じで、バイトが違うだけだという。 PNG の変更はいらない。 Claude Code に戻させようとしたが権限で止まっていたので、自分で次のコマンドを打った。

git checkout -- content-src/character-expressions/png

78枚は元に戻り、表情パックに未コミットの変更は残らなくなった。 GitHub との差もない。

学び

• 表示の確認は、自分が実際に通る経路でやる。URL を直接開けば見えたページが、ダッシュボードからカードで移るとブロックされた。ページ全体を読み直さない遷移では、前のページの設定が残る
• 生成スクリプトがある成果物を手で直すと、次の作り直しで元に戻る。直すならスクリプト側も揃え、作り直した結果が手で直したものと一致するかで確かめる