[{"data":1,"prerenderedAt":239},["ShallowReactive",2],{"content-/illustrator-artboard-slides-svg-animation":3,"all-pages-for-dir":218,"related-/illustrator-artboard-slides-svg-animation":219,"og-image-/illustrator-artboard-slides-svg-animation":238},{"id":4,"title":5,"body":6,"category":198,"concepts":199,"description":200,"extension":201,"meta":202,"navigation":180,"ogImage":199,"path":203,"project_name":204,"published":205,"publishedAt":206,"seo":207,"source":208,"stem":209,"tags":210,"todo":199,"unpublished":205,"updatedAt":199,"__hash__":217},"pages/2026-10/2026-10-15/illustrator-artboard-slides-svg-animation.md","Illustratorスクリプトで参考書の図を講座スライドへ移した記録（メモリ増加、アートボード追加のスキル化、SVGアニメの取り下げ）",{"type":7,"value":8,"toc":183},"minimark",[9,14,18,22,25,29,32,40,43,46,53,56,60,63,66,69,72,75,78,82,85,88,95,99,102,105,108,112,115,118,121,125,128,131,134,137,141,144,147,150,153,166,169],[10,11,13],"h1",{"id":12},"illustratorスクリプトで参考書の図を講座スライドへ移した記録","Illustratorスクリプトで参考書の図を講座スライドへ移した記録",[15,16,17],"p",{},"ある資格試験の参考書の図を、講座のWebスライドへ移す作業の続きをやった。\n講座のコマには、もともと横長のWebスライドが入っている。\nそこへ電子書籍版の縦長の図を切り抜いて当てていく。\n切り抜きは、Illustratorのファイルからスクリプトで書き出す。\nこの日は、その書き出しが何度も止まった。",[19,20,21],"h2",{"id":21},"朝は並び順の直しが止まっていた",[15,23,24],{},"朝6時台に、並び順を直していたセッションで進捗を確かめた。\n計画書は10/14の17:10で更新が止まっていて、そのあとのコミット3本と並び順の問題が書かれていなかった。\n並び順の直しは、2つの質問への答えを待ったまま止まっていた。\n計画書に追記してもらい、次のセッションへの引き継ぎをテキストファイルに書き出させた。",[19,26,28],{"id":27},"illustratorは消えていなかった","Illustratorは消えていなかった",[15,30,31],{},"次のセッションでは、ファイル31の書き出しで中身を拾えなかった原因から調べさせた。\n診断の前に「Illustratorを手で起動してください」と頼まれた。\nところが、Illustratorが見当たらない。\nイラレ自体が無くなっている気がして、そんなことがありえるのかと聞いた。",[15,33,34,35,39],{},"本体は残っていた。\n",[36,37,38],"code",{},"C:\\Program Files\\Adobe\\Adobe Illustrator 2026\\"," に3.2GBあり、実行ファイル（63MB、2026-04-29にインストールした30.3）もそろっていた。\n消えていたのは、スタートメニューの登録だけだった。\n起動すると、普通に開いた。",[19,41,42],{"id":42},"表題レイヤーに図が描かれていた",[15,44,45],{},"ファイル31の原因にたどり着くまでに、診断スクリプトのほうで何度かつまずいた。\nPerlの置換でスクリプトが壊れ、書き直した。\n31と32の出力ファイル名がぶつかって上書きされていたので、名前を分けて測り直した。\njsxに日本語のコメントを入れたら、Illustratorが読めなくなった（元のファイルはASCIIだけだった）。\nheredocでバックスラッシュが崩れて止まったこともある。",[15,47,48,49,52],{},"原因そのものは単純だった。\n31と33は、表題用の ",[36,50,51],{},"Title_slide"," レイヤーに図も描かれていた。\n書き出しスクリプトは、このレイヤーを丸ごと隠していた。\nそのため、表題と一緒に図も消えていた。",[15,54,55],{},"ファイル単位で隠し方を切り替える直しを入れてもらった。\n31は4ページしか書き出せていなかったのが、26ページすべて書き出せた。\n33は前に13ページが図なしだったのが、27ページすべてに図が入った。",[19,57,59],{"id":58},"メモリが膨らみ続けるillustrator","メモリが膨らみ続けるIllustrator",[15,61,62],{},"続けて、残りのファイルを裏で書き出させた。\nしばらくしてIllustratorのメモリ使用量がかなり増えているのに気づいた。\n画面はまだ開かず、プラグイン初期化と出ている。\nそこで、プロセスを全部落としていいかと聞いた。",[15,64,65],{},"書き出しスクリプトもIllustratorも止めてもらった。\nそれでも空きメモリは、全体32GBのうち6.6GBしかなかった。\nたぶん、ほかのセッションがmdx-playgroundの作業中で、止めてもどうせ立ち上げ直してしまう。\nなので、そこは後回しにして待ってもらい、進捗だけ計画書に書かせた。",[15,67,68],{},"メモリが70%まで下がったところで、再開してよいと伝えた。\n09:18に35〜45の書き出しを再開した（空きメモリ9.6GB）。\n途中でIllustratorが2.7GBになると、スクリプトがいったん終了させて起動し直した。\n35〜45の11本は、失敗0で済んだ。",[15,70,71],{},"いちばん重い34だけは、最後に単独で流した。\n10:02に、空きメモリ11.3GBの状態から始めた。\nIllustratorは1分に約400MBずつ増え、4GB、5GB、6GBと上がっていく。\nこれは本当に動いているのかと聞いた。",[15,73,74],{},"Illustratorは1枚書き出すたびにメモリを確保して、ファイルを閉じるまで手放さないという。\nそれなら、前半と後半に分ければいいのではないか。\n分けられる、という答えだった。\n前半を書き出して閉じ、開き直して後半を書き出せば、ピークはおおよそ半分になる。\nただ、今回はこのまま流し切り、落ちたらそのとき分ける形に作り替える、という提案だった。",[15,76,77],{},"結局、34は落ちなかった。\nIllustratorが6.6GBまで膨らむのを見守った末に、81枚を18分で書き出し終えた。\nこれで41本すべての書き出しが済んだ。",[19,79,81],{"id":80},"照合と目視それからアートボード追加をスキルに","照合と目視、それからアートボード追加をスキルに",[15,83,84],{},"書き出した切り抜きを、講座のコマと照合させた。\n見た目だけで当たった候補65件と、新しく採用になった121件を左右に並べた比較画像にして、1件ずつ目で確かめさせた。\n文章だけのページは元の図と構成が違うので、不採用にした。\n判定を当て直すと、採用は726件、見た目だけの未確認の候補は0件になった。\nテストは4本、51件すべて通った。\n横長のWebスライドのまま残るコマは、144から53に減った。",[15,86,87],{},"文字だけの16コマからは画像を外させた。\nあわせて、Illustratorでアートボードを足せるかを試させた。\n人件費のファイルのコピーで、切り抜く範囲のアートボードが26枚入った。",[15,89,90,91,94],{},"これは足せるのか、と少し驚いた。\nいまはIllustratorまわりを、その場のスクリプトで触っている。\n一度スキルにまとめたほうがよいと思い、eurekapu-nuxt4のプロジェクトのスキルとして作ってもらった。\n置き場所は ",[36,92,93],{},".claude/skills/illustrator/"," である。",[19,96,98],{"id":97},"一覧htmlで自分のレビューを返す","一覧HTMLで自分のレビューを返す",[15,100,101],{},"残る53コマは、一覧HTMLにしてブラウザで開かせた。\n今の画像と電子書籍版の切り抜きを縮小して並べ、URLはクリックで開ける。\n一覧を見て指摘した6コマは元のWebスライドに戻し、文字だけのコマは10に減った。",[15,103,104],{},"続けて、行ごとにコメント欄を付けてもらった。\n書いた内容はブラウザに保存され、DevToolsからそのまま読み取ってもらえる。\n自分でファイルに書き出す必要はなかった。\nコメントで指定した30ページを12本のファイルから書き出させ（失敗0）、そのうち8コマが採用になった。",[15,106,107],{},"コンテキストがいっぱいになったので、計画書に進捗を書かせてセッションを替えた。",[19,109,111],{"id":110},"_23コマのうち19コマは書き出し済みのページにあった","23コマのうち19コマは書き出し済みのページにあった",[15,113,114],{},"午後のセッションでは、電子書籍版のページが当たっていなかった23コマを扱った。\n最初は、論点まとめの章と文字で突き合わせる予定だった。\n比較画像を1枚ずつ見ていくうちに、通常の章のページに文字がほぼ一致する候補が見つかった。",[15,116,117],{},"結局、19コマは通常の章の、もう書き出し済みのページに同じ図があった。\n論点まとめの章は書き出さずに済み、Illustratorも動かしていない。\n残る4コマは、電子書籍版では2ページに分かれていて1対1にならない。\n採用は734件から753件になった。",[15,119,120],{},"直したページの代表を1つ、URLで示してほしいと頼んだ。\n一覧の「A」の欄のリンクをそのままクリックすればよい、という答えだった。\nただ、リンクは節の先頭のコマで開くので、直したコマまで→キーで送る必要がある。",[19,122,124],{"id":123},"羊は歩いた取引の図は止めた","羊は歩いた、取引の図は止めた",[15,126,127],{},"続けて、一覧に書いた自分のレビューへの対応を頼んだ。\n導入で羊の数を数えるコマは、元のWebスライドが文字だけだったので、左の図が空になっていた。\nここに図を作らせた。",[15,129,130],{},"電子書籍版の図はPNGではなくSVGで、部品ごとに動かせる。\n4コマで試作させたあと、羊と石が動く15コマに広げた。\n羊が実際に歩いて牧場に出入りし、動き終わると「移動N回目 羊が増える」が浮き出る。\n数える石も、羊と同じタイミングで増えたり減ったりする。\nこれはよかった。",[15,132,133],{},"見ているうちに、ほかのコマも動かせるのではと思った。\n掛け仕入のQ-002の3枚目には、仕入先から当社へリンゴが動く矢印と、買掛債務が発生する場面がある。\nリンゴが当社に動いてきたときに買掛債務が出てくる、という動きを試作させた。",[15,135,136],{},"出来上がったものを見て、取り下げた。\n取引の図をすべてこの形にそろえるのは、かなり難しいし面倒だ。\n今回の試作も、うまくいっていなかった。\nQ-002の3枚目は元の図に戻させ、羊の動きだけを残した。",[19,138,140],{"id":139},"コミットとデプロイで見つかったr2の抜け","コミットとデプロイで見つかったR2の抜け",[15,142,143],{},"羊の分を含めて、コミットとCloudflareへのデプロイを頼んだ。\nコミットは内容ごとに分け、7本になった。\n途中でCodexのレビューに指摘が出た。\n音声番号のずれは、音声ファイルの実物で本当かを確かめさせた。\n狭い画面の指摘は本物だったので、図が画面に入るたびに動きを最初から再生するよう直させた。\n390px幅でも、図が入ったときに羊が歩き出すことを確かめた。",[15,145,146],{},"デプロイの途中で、別の問題が見つかった。\n10/14のデプロイ以降、本番の講義ノートが参照している電子書籍版の画像746枚が、R2に1枚も無かった。\n本番では画像が表示されていなかった（見本で調べたURLは404）。\n羊の図19枚と一緒に、R2へアップロードさせた。",[15,148,149],{},"その間にメモリがまた逼迫したので、不要なプロセスを落とさせた。\nデプロイは17:08に終わった（Workerは1.794 MiB）。\nアップロード後に、手元と突き合わせて差分が無いことを確かめさせた。\n講座が参照する画像749枚は、本番ですべて200になった。\n本番のストーリー版でも、羊の図が表示されていた。\n最後に、計画書の進捗と引き継ぎに結果を書かせた。",[19,151,152],{"id":152},"学び",[154,155,156,160,163],"ul",{},[157,158,159],"li",{},"表題レイヤーを丸ごと隠すと、そこに描かれた図まで消える。ファイルによってレイヤーの使い方が違うので、ファイル単位で切り替える直しになった。",[157,161,162],{},"Illustratorは、書き出し中に確保したメモリをファイルを閉じるまで手放さない。重いファイルは前半と後半に分ければピークを下げられる。今回は分けずに流し切ったが、落ちたらその形に作り替える。",[157,164,165],{},"動かせることと、そろえられることは別だった。羊の15コマは動いたが、取引の図を全部同じ形で動かすのはかなり難しく面倒だと判断した。",[19,167,168],{"id":168},"残っていること",[154,170,173],{"className":171},[172],"contains-task-list",[157,174,177,182],{"className":175},[176],"task-list-item",[178,179],"input",{"disabled":180,"type":181},true,"checkbox"," 並び順の直し（2つの質問への答え待ちのまま）",{"title":184,"searchDepth":185,"depth":185,"links":186},"",2,[187,188,189,190,191,192,193,194,195,196,197],{"id":21,"depth":185,"text":21},{"id":27,"depth":185,"text":28},{"id":42,"depth":185,"text":42},{"id":58,"depth":185,"text":59},{"id":80,"depth":185,"text":81},{"id":97,"depth":185,"text":98},{"id":110,"depth":185,"text":111},{"id":123,"depth":185,"text":124},{"id":139,"depth":185,"text":140},{"id":152,"depth":185,"text":152},{"id":168,"depth":185,"text":168},"dev",null,"参考書の図を講座のWebスライドへ移す作業の日記。Illustratorが消えたように見えた件、表題レイヤーに隠れていた図、書き出し中に膨らむメモリ、アートボード追加のスキル化、SVGアニメの試作と取り下げ、R2の画像の抜けを見つけたデプロイまで。","md",{},"/illustrator-artboard-slides-svg-animation","eurekapu-nuxt4",false,"2026-10-15T00:00:00.000Z",{"title":5,"description":200},"make-diary","2026-10/2026-10-15/illustrator-artboard-slides-svg-animation",[211,212,213,214,215,216],"Illustrator","SVGアニメーション","Cloudflare Pages","R2","Claude Code","教材制作","33h1o1J_FtaYg5hn19M5yMfM2oWpV4JwxnTTPOzGiCw",[],[220,224,228,232,235],{"title":221,"path":222,"publishedAt":223},"簿記ストーリー講座の図を電子書籍の素材へ差し替える。Illustratorが開いていないように見えた理由と430コマの置き換え","/bookkeeping-story-ebook-figure-replace","2026-10-18T00:00:00.000Z",{"title":225,"path":226,"publishedAt":227},"Claude Codeの2台運用で、教材の読み上げ音声をMacに合成させながら図と台本を直した一日","/story-course-narration-mac-offload","2026-10-16T00:00:00.000Z",{"title":229,"path":230,"publishedAt":231},"2026年10月19日の開発日記 - 講座4本を並走させ、別のセッションと作業が行き違った月曜","/2026-10-19-diary","2026-10-19T00:00:00.000Z",{"title":233,"path":234,"publishedAt":231},"会計入門講座のストーリー版づくり：サブエージェント並列と既存版の流用で進めた一日","/accounting-intro-story-version-workflow",{"title":236,"path":237,"publishedAt":231},"講座のストーリー版を電子書籍版の章立てに組み直す。本文の食い違いは電子書籍に合わせ、音声合成はMacだけに","/story-course-ebook-chapters-realign","https://log.eurekapu.com/og/blog/illustrator-artboard-slides-svg-animation.png?v=2026-10-15T00%3A00%3A00.000Z&title=Illustrator%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%81%A7%E5%8F%82%E8%80%83%E6%9B%B8%E3%81%AE%E5%9B%B3%E3%82%92%E8%AC%9B%E5%BA%A7%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%81%B8%E7%A7%BB%E3%81%97%E3%81%9F%E8%A8%98%E9%8C%B2%EF%BC%88%E3%83%A1%E3%83%A2%E3%83%AA%E5%A2%97%E5%8A%A0%E3%80%81%E3%82%A2%E3%83%BC%E3%83%88%E3%83%9C%E3%83%BC%E3%83%89%E8%BF%BD%E5%8A%A0%E3%81%AE%E3%82%B9%E3%82%AD%E3%83%AB%E5%8C%96%E3%80%81SVG%E3%82%A2%E3%83%8B%E3%83%A1%E3%81%AE%E5%8F%96%E3%82%8A%E4%B8%8B%E3%81%92%EF%BC%89&author=Kei%20Komatsu&sig=39e27a76b0465931",1792550157093]