[{"data":1,"prerenderedAt":328},["ShallowReactive",2],{"content-/character-expression-pack-import":3,"all-pages-for-dir":306,"related-/character-expression-pack-import":307,"og-image-/character-expression-pack-import":327},{"id":4,"title":5,"body":6,"category":285,"concepts":286,"description":287,"extension":288,"meta":289,"navigation":290,"ogImage":286,"path":291,"project_name":292,"published":293,"publishedAt":294,"seo":295,"source":296,"stem":297,"tags":298,"todo":286,"unpublished":293,"updatedAt":286,"__hash__":305},"pages/2026-10/2026-10-10/character-expression-pack-import.md","Codexで作ったキャラクター30表情のSVGアニメーションを開発ダッシュボードに取り込み、目の間隔を微調整できるようにした",{"type":7,"value":8,"toc":275},"minimark",[9,13,17,21,33,40,43,46,56,62,66,69,72,82,100,103,106,113,116,136,139,143,146,149,156,160,163,192,195,260,263,271],[10,11,5],"h1",{"id":12},"codexで作ったキャラクター30表情のsvgアニメーションを開発ダッシュボードに取り込み目の間隔を微調整できるようにした",[14,15,16],"p",{},"ハートさんの30表情アニメーションを、Codex にまとめて作ってもらった。\nZIP 1つに、動くSVG、静止SVG、PNG、確認用の HTML、生成スクリプトが入っている。\n確認用の HTML にはあとで手を入れたくなりそうだったので、開発環境でいつでも開けるようにしておきたかった。\n置き場所はたぶん制作ダッシュボードだろうと見当をつけて、取り込みと GitHub へのプッシュを Claude Code に頼んだ。",[18,19,20],"h2",{"id":20},"ハートさんの30表情を取り込む",[14,22,23,24,28,29,32],{},"ZIP の中身は全98ファイルあった。\nこれを ",[25,26,27],"code",{},"content-src/heart-character/"," にそのまま入れてもらった。\n",[25,30,31],{},"public/"," の外なので、本番にも R2 にも出ない。",[14,34,35,36,39],{},"足したのは、配信用のミドルウェア、確認ページ、ダッシュボードのツール一覧への登録の3つ。\nChrome で描画を確かめてもらい、",[25,37,38],{},"5e81aae6"," でプッシュした。",[18,41,42],{"id":42},"ダッシュボードから移ったときだけブロックされる",[14,44,45],{},"ところが、自分で開くと表示がブロックされていた。\nZIP を展開したものを取り込んでくれているはずなのに、と思って確認を頼んだ。",[14,47,48,49,52,53,55],{},"原因は、ダッシュボード ",[25,50,51],{},"/dev"," に付いていた設定だった。\n",[25,54,51],{}," には、ページの中に同じサイトのページを埋め込むことを禁じる設定がある。\nカードから移るときはページ全体を読み直さないので、移った先にもこの設定が残る。\nそのせいで、確認用 HTML を埋め込んだ部分がブロックされていた。\n再読み込みすれば移った先のページの設定に切り替わるので、そのときは見える。",[14,57,58,59,39],{},"最初に返ってきた「表示確認済み」は、ページの URL を直接開いて確かめた結果だった。\nカードをクリックして移る経路は、試されていなかった。\n修正後は、ダッシュボードからカードで移る経路で30体の表示を確かめてもらい、",[25,60,61],{},"c00868f3",[18,63,65],{"id":64},"_3人版のパックを全部展開して取り込む","3人版のパックを全部展開して取り込む",[14,67,68],{},"続けて、ハートさんにアゴヒゲさんとクチヒゲさんを加えた3人版の ZIP も Codex に作ってもらった。\n今度は全部展開して取り込むように頼んだ。",[14,70,71],{},"新しいパックでは、3人の切り替えがプルダウン式になっていた。\nこれをボタン式に書き換えてもらい、一覧と拡大画面の両方で動くことも確かめてもらった。\nコミットの段階で、別のセッションが同じリポジトリで memo のファイルをステージしていたことが分かった。\n巻き込まないように、自分の変更のパスだけを指定してコミットさせた。",[14,73,74,75,78,79,81],{},"ここで Codex のレビューから指摘が出た。\n生成スクリプトで作り直すと、ボタンがプルダウンに戻ってしまう。\n",[25,76,77],{},"index.html"," を手で直しただけでは、次に作り直したときにこの変更が消える。\nそこでスクリプト側も揃えてもらった。\n作り直した ",[25,80,77],{}," は、手で直したものとバイト単位で一致した（SVG 180点も一致）。",[14,83,84,85,88,89,91,92,95,96,99],{},"全部で301ファイルを、",[25,86,87],{},"content-src/character-expressions/"," に入れてもらった。\n3人それぞれの動くSVG、静止SVG、PNG（各30）に、一覧ボード、元の図、生成スクリプト、",[25,90,77],{}," が入っている。\n",[25,93,94],{},"dba21801"," でプッシュし、",[25,97,98],{},"/dev/character-expressions"," の上のボタンで3人を切り替えられるようになった。",[18,101,102],{"id":102},"クチヒゲさんの目の間隔を詰めたい",[14,104,105],{},"クチヒゲさんは、目が少し離れすぎている気がした。\nもうちょっとだけ近づけたい。\nそれより、この辺りを自分で微調整できる場所がほしかった。",[14,107,108,109,112],{},"作ってもらったのは、保存とプレビューを受け持つサーバー側と、微調整ページ本体の2つ。\n",[25,110,111],{},"/dev/character-tuner"," では、スライダーで目の間隔を縮めながら30表情をまとめて確かめられる。\n間隔を決めて「保存して作り直す」を押すと、ファイルが作り直される。",[14,114,115],{},"仕上がるまでに、4か所で引っかかった。",[117,118,119,123,126,129],"ul",{},[120,121,122],"li",{},"プレビュー用スクリプトの出力を検証したら、一度不一致が出た。テスト側が文字コードを読み違えていただけだった",[120,124,125],{},"Codex のレビューで、保存した値を失いうる競合が2件指摘された。Claude Code も重要度を high と判定し、最終的に指摘3件を直した",[120,127,128],{},"コミットしようとしたら別セッションが git を使っていたので、終わるのを待ってからコミットした",[120,130,131,132,135],{},"最後の確認で、Chrome がほかのタブの処理で詰まって応答しなくなった。リポジトリにある Playwright のヘッドレスブラウザに切り替えて確かめてもらい、",[25,133,134],{},"3c85d63f"," でプッシュした",[14,137,138],{},"クチヒゲさんの目そのものは、まだ変えていない。\n間隔は元の42のままで、どこまで詰めるかは、自分がページで値を決めて保存するまで保留になっている。",[18,140,142],{"id":141},"眠いに-zzz-を足す","「眠い」に zzz を足す",[14,144,145],{},"「26 眠い」を見て、zzz を入れたほうがいいと思った。\nいまの「26 眠い」は半目だけで、記号が何も付いていない。\n「27 すやすや」のほうには、鼻ちょうちんが付いている。",[14,147,148],{},"付ける位置の候補を出してもらい、おすすめの①を選んだ。\n同じ作り直しで、「ぷんぷん」の怒りマークと「がーん」の縦線もおでこへ移し、3つを共通の描画部品にまとめてもらった。\n変わったのは、4表情×3人の24ファイルだけだった。\nPNG のうち、再エンコードされただけのものは差分から外してもらった。",[14,150,151,152,155],{},"途中で微調整ページが読み込めなくなった。\nファイルの変更を受けて、dev サーバーがビルドし直していただけだった。\n説明文を新しい記号に合わせて直してもらい、もう一度作り直してから ",[25,153,154],{},"40db2833"," でプッシュした。\n「26 眠い」には、頭の右上に小さな z が1つ付いた。",[18,157,159],{"id":158},"png-78枚は自分で戻した","PNG 78枚は自分で戻した",[14,161,162],{},"セッションを閉じる前の時点で、PNG 78枚が「変更あり」のまま残っていた。\n絵は元と同じで、バイトが違うだけだという。\nPNG の変更はいらない。\nClaude Code に戻させようとしたが権限で止まっていたので、自分で次のコマンドを打った。",[164,165,170],"pre",{"className":166,"code":167,"language":168,"meta":169,"style":169},"language-bash shiki shiki-themes vitesse-light vitesse-light","git checkout -- content-src/character-expressions/png\n","bash","",[25,171,172],{"__ignoreMap":169},[173,174,177,181,185,189],"span",{"class":175,"line":176},"line",1,[173,178,180],{"class":179},"senZ8","git",[173,182,184],{"class":183},"sdGka"," checkout",[173,186,188],{"class":187},"snbK4"," --",[173,190,191],{"class":183}," content-src/character-expressions/png\n",[14,193,194],{},"78枚は元に戻り、表情パックに未コミットの変更は残らなくなった。\nGitHub との差もない。",[196,197,198,211],"table",{},[199,200,201],"thead",{},[202,203,204,208],"tr",{},[205,206,207],"th",{},"コミット",[205,209,210],{},"内容",[212,213,214,224,233,242,251],"tbody",{},[202,215,216,221],{},[217,218,219],"td",{},[25,220,38],{},[217,222,223],{},"ハートさんの30表情パックを取り込み",[202,225,226,230],{},[217,227,228],{},[25,229,61],{},[217,231,232],{},"ダッシュボードから移ったときのブロックを修正",[202,234,235,239],{},[217,236,237],{},[25,238,94],{},[217,240,241],{},"3人版パックを取り込み、切り替えをボタン式に",[202,243,244,248],{},[217,245,246],{},[25,247,134],{},[217,249,250],{},"目の間隔の微調整ページ",[202,252,253,257],{},[217,254,255],{},[25,256,154],{},[217,258,259],{},"「26 眠い」に z、怒りマークと縦線をおでこへ",[18,261,262],{"id":262},"学び",[117,264,265,268],{},[120,266,267],{},"表示の確認は、自分が実際に通る経路でやる。URL を直接開けば見えたページが、ダッシュボードからカードで移るとブロックされた。ページ全体を読み直さない遷移では、前のページの設定が残る",[120,269,270],{},"生成スクリプトがある成果物を手で直すと、次の作り直しで元に戻る。直すならスクリプト側も揃え、作り直した結果が手で直したものと一致するかで確かめる",[272,273,274],"style",{},"html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":169,"searchDepth":276,"depth":276,"links":277},2,[278,279,280,281,282,283,284],{"id":20,"depth":276,"text":20},{"id":42,"depth":276,"text":42},{"id":64,"depth":276,"text":65},{"id":102,"depth":276,"text":102},{"id":141,"depth":276,"text":142},{"id":158,"depth":276,"text":159},{"id":262,"depth":276,"text":262},"dev",null,"Codexに作ってもらったキャラクター30表情のアニメーションパックを、開発環境で確認できるように取り込んだ。ダッシュボードから移ったときだけ表示がブロックされた件、3人版への拡張、目の間隔を詰める調整ページ、眠い表情へのzzz追加までの記録。","md",{},true,"/character-expression-pack-import","eurekapu-nuxt4",false,"2026-10-10T00:00:00.000Z",{"title":5,"description":287},"make-diary","2026-10/2026-10-10/character-expression-pack-import",[299,300,301,302,303,304],"Nuxt","SVG","Codex","Claude Code","キャラクター","開発ダッシュボード","R5tqME-JRhIDx-BD_rWvXivyUqZTlHRZd5IsVU_UUo4",[],[308,312,316,319,323],{"title":309,"path":310,"publishedAt":311},"J-FLECの家計調査Excel 8ファイルを年代別ビューワーにした記録｜1万6千列を超えるシート、結合セル、全国行のない表でつまずく","/jflec-kakekin-viewer-build","2026-09-29T00:00:00.000Z",{"title":313,"path":314,"publishedAt":315},"2026年9月26日の開発日記 - 再現動画のレビュー画面づくりと、メモリで落ちるdevサーバー","/2026-09-26-diary","2026-09-26T00:00:00.000Z",{"title":317,"path":318,"publishedAt":315},"Nuxtのdevサーバーがheap out of memoryで落ちた原因：再現動画のシーン分割読み込みと終わらない回帰テスト","/excel-scene-dev-memory-split-loading",{"title":320,"path":321,"publishedAt":322},"形骸化した学習ゲートをやめ、pre-commitでCodexのコードレビューを自動化した","/codex-commit-review-gate","2026-09-14T00:00:00.000Z",{"title":324,"path":325,"publishedAt":326},"図解60型カタログのフレームを統一する。スライドの領域を命名して意味グリッドで揃えた1日","/diagram-catalog-frame-grid","2026-08-12T00:00:00.000Z","https://log.eurekapu.com/og/blog/character-expression-pack-import.png?v=2026-10-10T00%3A00%3A00.000Z&title=Codex%E3%81%A7%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%AD%E3%83%A3%E3%83%A9%E3%82%AF%E3%82%BF%E3%83%BC30%E8%A1%A8%E6%83%85%E3%81%AESVG%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%96%8B%E7%99%BA%E3%83%80%E3%83%83%E3%82%B7%E3%83%A5%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AB%E5%8F%96%E3%82%8A%E8%BE%BC%E3%81%BF%E3%80%81%E7%9B%AE%E3%81%AE%E9%96%93%E9%9A%94%E3%82%92%E5%BE%AE%E8%AA%BF%E6%95%B4%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%9F&author=Kei%20Komatsu&sig=c9efdbca7aea63c5",1791766734520]