# 3Dキャラの作り方を真似できる動画に ― ハコブくんの7つの手順を Blender と Unity で
- 記録: LOG502（ひとり研究所の裏側）
- 公開: 2026/11/13
- 記事のページ: https://pixelstomotors.com/record/hakobu-3d-seven-steps-explainer-video
- サイト: Pixels to Motors（ADAPT DESIGN / 島津 栄一） https://pixelstomotors.com/
- 要約: マンガのロボット・ハコブくんと看護師の大城さんを3Dにした作業を、見た人が同じ順番で作れる9分の解説動画にした。手順に番号を付け、Blender と Unity の札で道具を分け、残っていなかった失敗の絵は直す前のコードから描き出し直した。
> AI が読むための記事の全文です（コード・実行ログを含む）。引用するときは上の「記事のページ」の住所を使ってください。
---
**マンガのキャラクターを3Dにした作業は、手順に番号を付けて、どの手順がどの道具かを画面で分けると、見た人が同じ順番で作れる解説動画になる。** 4コママンガ『ハコブくん』のロボットのハコブくんと、看護師の大城さんを 3DCG にした作業（LOG496）を、9分05秒の YouTube の解説動画「[マンガのキャラを3Dにする7つの手順 Blender と Unity で作ってみた](https://youtu.be/sYYM82DQclk)」にした。台本から声・図・書き出し・サムネイル・概要欄・投稿文まで、1つの会話で Claude が作り、エイイチが途中で見て直す所を決めた。
この動画づくりで、次のことが変わる。
- 3Dを作りたい人が、7つの手順をそのまま追える。手順1・2は準備、3〜6は Blender（3Dの形を作る無料のソフト）、7は Unity（ゲームや場面を動かすソフト）と、画面の札で分けた
- 次に「作り方の回」を作るときは、決まり（動画の決まりの文書 video_rules.md の2節28と4-4e）を読めば、同じ形で始められる。手順に番号を付ける、謎解きは無理に入れない、画像を見せる所ではカードを隠す、などを書き足した
- 失敗した時の絵が残っていなくても、直す前のコードから描き出し直して見せられる。袖が裂けた絵3枚を、サイトの GitHub に残っていた直す前のコードで描き出した
動画1本にかかった時間は測っていない。作業フォルダのファイルの時刻では、台本の2版から公開用の一式までが 16:38〜21:33 だった（台本の1版を書き始めた時刻は残っていない）。次の作り方の回で、同じ区切りで時間を記録して比べる。
きっかけは、病院の搬送ロボットのシミュレーションのために作った2人の3Dだった。人を青い筒、ロボットを白い箱で表していたシミュレーションでは、看護師さんがどこに立ってどう薬を受け取るかが見えない。そこで受け渡しを近くで見せるための3Dを作り、その作り方を動画にした。作る途中では、首が長すぎた、肩がいかつすぎた、袖が3回裂けた、と失敗が続いた。動画ではその失敗もそのまま見せている。
| やったこと | なぜ | 結果 |
| --- | --- | --- |
| 台本を「作る順番の7つの手順」で書き直した | エイイチから、見た人が自分で再現できる順番を説明するよう指示があったため | 78文・9分05秒。謎解きの形と立ち位置の話は外した |
| 画面の形を「大文字型＋動きあり」にした | 手順の名前と道具の名前を大きく見せるため | 手順の一覧に 準備・Blender・Unity の札を付けた |
| 画像を見せる場面ではカードを一時的に隠した | カードを右へずらして画像と並べると、どちらも見えにくいため | 場面の半分ほどまで画像だけを見せ、そのあとカードを出す |
| 袖が裂けた絵を描き出し直した | 当時の絵がどこにも残っていなかったため | 直す前のコード（p2m-site のコミット e3daa10）から、1回目・2回目・3回目の3枚 |
| 読み間違いを直した | 「首長すぎ」と「角（かど）」を声が違う読みで読んだため | 読みの表に足し、その文だけ声を作り直した |
| 公開した記事 LOG496 と台本を、別のエージェントに1文ずつ突き合わせてもらった | 書いた本人が確かめると同じ見落としをするため | 9か所を直した |
この記事の数字は、作業フォルダのファイル（台本の narration.py・場面の時間の表 timeline.json・書き出した動画）から読んだもの。効果の欄のうち、見た人が実際に作れるかは見込みで、動画のコメントと、記事のコードを使った人の反応で確かめる。
[図解: LOG502_seven_steps_timeline.html](https://pixelstomotors.com/embeds/LOG502_seven_steps_timeline.html)
## 作業ログ ― 台本を「作る順番の7つの手順」に書き直した
最初の台本（1版）は、謎解きの形で書いていた。3Dのハコブくんを初めて見た時の感想と、看護師さんの立ち位置の話を、謎として置く形だった。台本を見せたところ、エイイチから次の指示があった。
> 何が分かったか（謎）…無理して入れないで。3Dを構築していくための作業の順番を説明するようにしてください（どのように進めれば、ユーザー自身で再現して作れるかを教えてください）
立ち位置の話については、謎というには小さすぎる、という判断だった。そこで2版は、作る順番を7つの手順に分けた。
| 手順 | 中身 | 道具 |
| --- | --- | --- |
| 1 | 使い道と、見た目の決まりを先に決める | 準備 |
| 2 | 元の絵（マンガの三面図）と、大きさをそろえる | 準備 |
| 3 | 形を数字で作る（Python のコードで Blender を動かす） | Blender |
| 4 | 絵に描き出して、2人を並べて直す | Blender |
| 5 | 骨と顔を入れる（骨の名前は Unity の人型の決まりどおり） | Blender |
| 6 | ポーズを付けて、服や肌が破れないかを確かめる | Blender |
| 7 | FBX のファイルで Unity に渡し、借りた動きで動かして撮る | Unity |
FBX は、3Dの形と骨をまとめて別のソフトに渡すためのファイルの形式。Unity はこのファイルをそのまま読める。
### 台本で決めた4つのこと
エイイチの指示から、台本の書き方を4つ決めた。
1. 最初に「何に使うための3Dか」を言う。病院の薬の受け渡しを近くで見せるため、を冒頭の2文で言う
2. 言葉は平易にし、難しい言葉は要所だけにする。骨（ボーン）は「見えない棒」、FBX は「Unity がそのまま読めるファイル」と言い換えた
3. 面白くない所は早送りで飛ばす。大城さんの形を15回作り直した所と、Unity での細かい直しは早送りにした
4. 真面目なだけにしない。「ハコブくん、ついに体ができました。……腕は、まだありません。」「人間の首は、数字を変えても短くなりません。3Dの、いいところです。」のような一言を、手順ごとに1つずつ置いた
途中で、エイイチから Blender と Unity の区別について指摘があった。
> どこまでがBlenderでどこまでがUnityかがわからない
台本に「形を作るのは Blender。動かして撮るのは Unity。」の1文（手順3の頭）と、「ここで、Blender から Unity へ、バトンタッチです。」の1文（手順7の頭）を足した。画面では、手順の一覧の右に道具の札を付けた（下の「画面の形」の節）。
### エイイチの言葉は、本人に聞いた言葉だけ
動画には、エイイチの言葉が6つ出てくる。2つはこの会話で聞いた言葉（「Unityでここまでできるの、熱いっ！」「人の描写のバランス悪っ！」）で、残りの4つは LOG496 に書いた言葉（全体の流れ・首と肩・袖・これから見せたいもの）。台本を見せたあとに、3Dのハコブくんを初めて見た時の感想と、看護師さんを見た時の正直な感想の2問を聞いて、答えをそのまま入れた。エイイチの声は、本人の声ではなく AI の声で読ませている（概要欄にもそう書いた）。
### 公開した記事 LOG496 との突き合わせ
台本を書いたのとは別のエージェントに、LOG496 と台本を1文ずつ突き合わせてもらい、食い違い・根拠のない事実・言い過ぎを出してもらった。出た指摘のうち9か所を直した。外部のレビュー（codex）は、自分の作業を題材にした回なのでかけていない（2026-11-01 にエイイチが決めた運用）。
## 声 ― ElevenLabs で作り、読み間違いを2つ直した
声は ElevenLabs（文章を人の声で読み上げる AI のサービス）で、エイイチの Mac で作った。ハコブくんの声とエイイチの声は別の声で、78文のうち6文がエイイチの声。
読み間違いは2つあった。
| 文 | 書いた字 | 声が読んだ読み | 直した読み |
| --- | --- | --- | --- |
| 手順4「首長すぎ、肩がいかつすぎ。」 | 首長すぎ | 違う読み | くびながすぎ |
| 手順4「ハコブくんの角だけが硬く見えました。」ほか | 角 | つの | かど |
どちらも、読みの表（narration.py の ELEVEN_READ）に足して、その文だけ声を作り直した。「角」は、動画の3:53あたりで「つの」と読んでいたのをエイイチが見つけた。「角」が出る3つの文をまとめて作り直した。
### 冒頭の自己紹介を2文に短くした
前の動画まで、自己紹介は「エイイチは、本業のデザイナーをしながら、ロボティクスの研究と開発をしています。その中で分かったことと、そこから考えた見立てを、ハコブくんがお伝えします。」と長かった。エイイチから短くするよう指示があり、3つの案から次の案Cを選んだ。
> Pixels to Motors、案内役のハコブくんです。エイイチが研究と開発で確かめたことを、ぼくがお伝えします。
自己紹介の2文だけ声を作り直し、前の声と合わせ直した（voice_eleven の「合わせ_紹介短縮後」）。冒頭の45秒ほどは「何に使うための3Dか」に使い、自己紹介はそのあと（0:46）に置いた。
## 画面の形 ― 大文字型に動きを付け、道具の札を付けた
画面の形は、エイイチが「大文字型＋動きあり」を選んだ。背景には Unity で撮った受け渡しの場面の寄りの映像を流し、手順の名前や短い言葉を黒いカードに大きく載せる。
手順の一覧には、右に道具の札を付けた。準備は灰色の枠、Blender はオレンジ（#E87D0D）、Unity は水色（#62BFF5）。手順の一覧は、目次とまとめの2か所で同じ形で出す。
- ねらい：どの手順をどのソフトでやるかを、見ている人が迷わないようにする
- 変わったこと：手順の一覧と、手順3・7の頭のカード（「Blender → Unity」）で、道具の切り替わりを毎回見せた
- 見込める効果：真似して作る人が、Blender の作業と Unity の作業を分けて準備できる。分かりやすくなったかは、コメントで確かめる
### 画像を見せる所ではカードを隠す
最初の書き出しでは、画像を見せたい場面でも、カードと画像を並べていた。カードを中央から右へずらし、画像を左に置く形だった。エイイチから、画像の中身を見せたい時はカードを一時的に消し、無理に並べないよう指示があった。
場面を作る関数 bg_card に img_first という引数を足した。値は場面の長さに対する割合で、その割合の所まではカードを出さず、背景も暗くしないで画像だけを見せる。そのあとカードを出す。使ったのは15の場面（ハコブくんの角・大城さんの最初の形・袖が裂けた所など）。
- ねらい：画像が主役の場面で、画像の中身をちゃんと見せる
- 変わったこと：カードを横にずらして並べる形をやめ、時間で分けた（はじめは画像だけ、あとからカード）
- 見込める効果：画像とカードがどちらも小さくなることがなくなる。次の作り方の回からも、画像が主役の場面はこの形にする（video_rules.md 4-4e に書いた）
ほかにも、画面について次の指示があり、直した。
- 明朝体のフォントは使わない。カードと見出しはゴシックにした
- 画像を中途半端に斜めにしない。まっすぐ置いた
- 白い背景の時間を、意味のある形で減らす。紙色の無地だった場面の背景に、その話の映像や静止画を暗くして敷いた
- 画面に Blender の名前が出ていなかったので、手順3の場面と道具の札に入れた
### 早送りの間は、直した所に寄せる
大城さんの形を15回作り直した所は、早送りにした。最初は全身の絵を並べて早く切り替えるだけだったが、エイイチから、早送りの時は目や肩などに寄せて動きを付けるよう指示があった。
静止画の中の目や肩に、1か所ずつ寄りながら切り替えていく映像を作る関数（make_bg.py の ff_zoom）を書き、最初の形と直した形を交互に見せた。右上には「▶▶ 早送り」の札を出す。
## 袖が裂けた絵を、直す前のコードから描き出し直した
手順6では、袖が3回裂けた話をする。動画にするには、裂けた時の絵が要る。ところが、当時の確認用の絵は作業フォルダにも KIOXIA にも残っていなかった。描き出した絵を見て直し、次の版で上書きしていたためだった。
エイイチから、拡大した絵はないのかと聞かれ、当時の絵はないこと、直す前のコードは残っていることを伝えた。エイイチの判断で、直す前のコードから描き出し直すことにした。
### 直す前のコードの探し方
大城さんの形を作るコード（nurse_build.py）は、サイトの GitHub（PixelstoMotors/p2m-site の tools/sim_people/）にある。袖を直した後の版は、コミット e3daa10 に入っている。そこから、袖の3回の直しを1つずつ逆にたどって、3つの版を作った。
| 版 | 袖の作り | 直す前の状態 |
| --- | --- | --- |
| 1回目の前（v1） | 袖は胴と1つの面。肩の所は腕の骨に引っぱられる | 腕を前に出すと、袖と胴のつなぎ目が裂ける |
| 2回目の前（v2） | 袖は別の部品。袖の中に入る所の肌が残っている | 袖の中の腕の肌が、外に飛び出す |
| 3回目の前（v3＝e3daa10） | 袖は別の部品で、肌は袖の中で消してある | 腕を上げると、袖の肩の所がゆがむ（このあと、袖をまるごと腕の骨に付けて直した） |
描き出しは、Claude の作業環境（クラウド）で、Blender を Python のライブラリ（bpy 5.3.0）として入れ、画面を開かずに動かした。ポーズは LOG496 と同じ「差し出す（give）」「指さす（point）」の2つで、肩の寄りと全身を描いた（pose.py）。
動画では、この3枚を背景の静止画にして、それぞれの話の所で見せた。画面の左上には「直す前のコードで描き出し直した絵」と書き、概要欄にも「当時の絵とまったく同じではないかもしれません」と書いた。
- ねらい：失敗した時の絵がなくても、失敗をそのまま見せる
- 変わったこと：想像で描いた絵ではなく、直す前のコードから描き出した絵を使った
- 見込める効果：形をコードで作っていれば、どの時点の失敗でも描き出し直せる。次からは、確認用の絵を上書きせずに残す（今回は残していなかったため、この手間がかかった）
## 書き出し ― 9分05秒、78文
声・BGM・効果音を合わせ、場面の映像を作り、字幕を付けて書き出した。書き出した動画は 1920×1080・30fps・544.8秒。YouTube に上げた本編は約70MB、確認用は約25MB。
場面の書き出しの途中で、何度か止まった。ハコブくんの区画（画面の左下）とカードが重なると、書き出しの道具（render.py）が止まる決まりになっている。手順の一覧・まとめの一覧・手順3と7のカードの字を小さくして、重ならないようにした。動きの場面の書き出し（motion_kit）が時間切れで途中のファイルを残したこともあり、そのときは足りない場面だけを書き出し直した。
全場面の一覧は次の画像（大きいので縮めて見る）。
## サムネイル・タイトル・概要欄
サムネイルは2案を作り、エイイチが左の案A（受け渡しの3DCG を背景に「マンガのキャラを3Dにする7つの手順」）を選んだ。案B は、袖が裂けた絵を背景に「袖が3回裂けた」とした案。どちらも、背景は Blender で描いた絵で、生成AIの画像は使っていない。
タイトルは、エイイチが「マンガのキャラを3Dにする7つの手順 Blender と Unity で作ってみた」に決めた。
概要欄には、7つの手順と目次、この動画で扱う範囲（実物のロボットはないこと、Blender を Python で動かしたこと、描き出し直した絵のこと、Mixamo から借りた動きは配らないこと）、作り方の記録として LOG496 へのリンクを入れた。
## 公開と、X・LinkedIn の予約
X と LinkedIn の文は、YouTube の公開予約の時刻に合わせて自動で予約される仕組みに置いていた（r2r2r-content の sns/VIDEO_hakobu-3d-seven-steps_sns_posts.json）。ところが、エイイチは公開予約を使わずにすぐ公開した。自動の同期は「公開の時刻を過ぎてから見つけた動画は入れない」決まりなので、このままだと X にも LinkedIn にも出ない。
そこで、予定表（sns/schedule.json）に手で入れた。X は公開の直後の 2026-11-13 22:50、LinkedIn は「業界の読み解き」の枠の空いている最初の日（2027-02-10 17:00）。
ショートは作っていない。本編から切り出すショートは、登録者や再生数が増えるまで作らない運用にしている（video_rules.md 9-0）。
## 動画の決まりに書き足したこと
この動画で決めたことを、動画の決まりの文書 video_rules.md（113回目の更新）に書き足した。
| 節 | 書き足したこと |
| --- | --- |
| 冒頭の作り方の5 | 自己紹介は2文（案C）。問いのあと（作り方の回は「何に使うのか」のあと）に置く |
| 2節28 | 作り方の回は、手順に番号を付けて並べる。最初に使い道を言う。道具の札を毎回見せる。謎が小さいなら謎解きの形にしない。早送りは直した所に寄せる。失敗の絵がなければ直す前のコードで描き出し直し、そう書く |
| 4-4e | 画像を見せる所ではカードを隠す。画像はまっすぐ・見出しはゴシック。白い背景の時間を減らす。手順の道具の札 |
| 更新履歴 | 読み（首長すぎ→くびながすぎ・角→かど）と、袖の絵の描き出し直し |
## 作業フォルダとファイルの置き場所
| 置き場所 | 中身 |
| --- | --- |
| iCloud の 動画/ハコブくんの3D/ | 作り方のファイル（narration.py・scenes.py・sound.py・thumb.py・ei_talk.py・台本・照合の結果・概要欄・タイトル・投稿文・voice_eleven・thumb の案A・サムネ素材・袖の描き出し直し） |
| KIOXIA の videos/ハコブくんの3D/アップロード用/ | YouTube に上げた物（ハコブくんの3D.mp4・サムネイル.png・タイトル.txt・概要欄.txt・投稿文_X_LinkedIn.txt） |
| KIOXIA の videos/ハコブくんの3D/ | 確認用の動画と、取り込みに使った tar（_取り込み/） |
| GitHub r2r2r-content の sns/ | X と LinkedIn の文（VIDEO_hakobu-3d-seven-steps_sns_posts.json） |
使わなかった版（サムネイルの案B・前の台本の写しなど）は、iCloud の 動画/_旧版/置き換え前_20261113_ハコブくんの3D_フォルダ整理/ に移した。
## 台本の全文（narration.py）
78文の台本と、読みの表。SEGS の1行が1文で、（場面の名前・ハコブくんの表情・字幕の文・後ろの間）。
```python
# -*- coding: utf-8 -*-
# 台本「ハコブくんの3D」— 病院の搬送ロボットの手渡しを近くで見せるために、ハコブくんと看護師の大城さんを3Dにした回（2026-11-13 2版・作る順番の7手順）
# 元の記事: LOG496（サービスロボット導入シミュレーション Log#45「受け渡しを寄りで見せる、ハコブくんと看護師の3D」）
# 映像: Unity の場面の寄り（KIOXIA service_sim/unity/closeup/ の依頼162・166・169・171）
# エイイチの指示（2026-11-13）: 何に使うためかを最初に言う／平易な言葉で、難しい言葉は要所だけ／面白くない所は早送り／ユーモアを交える
# 作る順番を、見た人が真似して作れる形で説明する（エイイチの指示）。立ち位置の話（依頼167〜171 の引き出しとカード）は入れない（エイイチ「謎というには小さすぎる」）
# エイイチの言葉: LOG496 の引用3つ（流れ・首と肩・袖）と、2026-11-13 に聞いた2つ（「Unityでここまでできるの、熱いっ！」「人の描写のバランス悪っ！」）
# codex は自分のネタの回なのでかけない（2026-11-01 エイイチの決め）
# 各要素: (場面の名前, 表情, 字幕の文, 後ろの間[秒])
FACES = ("base", "smile", "surprise", "doubt", "think", "trouble", "joy", "wink")
SEGS = [
# --- 何に使うためか（最初に言う）---
("hook_use", "base", "薬を運ぶロボットと、看護師さんが、薬を受け渡す。｜その場面を、近くから見せたい。", 0.35),
("hook_use2", "smile", "そのために、ハコブくんと、看護師の大城さんを、3Dで作りました。", 0.35),
("hook_joke", "joy", "ハコブくん、ついに体ができました。｜……腕は、まだありません。", 0.7),
("hook_why", "base", "これまでの病院のシミュレーションでは、人は青い筒、ロボットは白い箱でした。", 0.35),
("hook_why2", "think", "ロボットが何回止まったかは数えられます。｜でも、看護師さんがどこに立って、どう受け取るのかは、筒と箱では分かりません。", 0.35),
("hook_joke2", "trouble", "筒から薬を受け取る箱。……絵としては、ちょっと寂しいですよね。", 0.35),
("hook_today", "smile", "今日は、この3Dを作った順番を、そのまま真似できる形でお伝えします。｜手順は7つです。", 1.2),
("title", "smile", "Pixels to Motors、案内役のハコブくんです。", 0.35),
("title_eiichi", "smile", "エイイチが研究と開発で確かめたことを、ぼくがお伝えします。", 1.2),
("toc", "base", "7つの手順は、こうです。", 0.35),
("toc2", "base", "使い道を決める。元の絵と大きさをそろえる。形を数字で作る。｜絵に描き出して直す。骨と顔を入れる。ポーズを付けて確かめる。そして、Unity で動かす。", 0.35),
("toc_note", "base", "なお、ハコブくんはマンガのロボットで、実物はありません。今日の話は、ぜんぶ3DCGの中の話です。", 1.2),
# --- 手順1 使い道を決める ---
("s1", "base", "手順1、使い道と、見た目の決まりを、先に決めます。", 1.2),
("s1_use", "base", "今回の使い道は、病院の場面を近くで見せること。｜パソコンの試算、病院の1日のシミュレーションの、その次の段です。", 0.35),
("ei_steps", "base", "エイイチは、こう書いていました。", 0.35),
("ei_steps", "think", "試算、全体のシミュレーション、場面の細部、実際のロボットでの動画。｜全体がつながっていけば、より伝わりやすくなると考えます。", 0.8),
("s1_look", "base", "見た目の決まりは、粘土の人形のような感じ。ただし、デフォルメしすぎない。｜人とロボットを、同じ決まりで作ります。", 0.35),
("s1_tip", "smile", "ここを先に決めておくと、あとで、なんか違う、で迷子になりません。", 1.2),
# --- 手順2 元の絵と大きさ ---
("s2", "base", "手順2、元の絵と、大きさをそろえます。", 1.2),
("s2_ref", "base", "元の絵は、マンガ『ハコブくん』の三面図です。正面、横、背中の3枚。｜大城さんも、マンガに出てくる看護師さんです。", 0.35),
("s2_size", "base", "大きさは、実寸で作ります。ハコブくんは、高さ1メートル15センチ。大城さんは、身長1メートル65センチ。｜頭は、身長の約7分の1にしました。", 0.35),
("s2_joke", "wink", "ハコブくん、大城さんより50センチ小さいです。……見上げるのには、慣れています。", 1.2),
# --- 手順3 形を数字で作る ---
("s3", "base", "手順3、形を、数字で作ります。", 1.2),
("s3_split", "base", "その前に、道具の役わけです。｜形を作るのは、Blender。動かして撮るのは、Unity。この2つを使い分けます。", 0.35),
("s3_tool", "base", "Blender は、3Dの形を作る無料のソフトです。画面は開かずに、Python のコードで動かしました。｜コードを書いたのは、AI の Claude です。", 0.35),
("s3_robot", "base", "ハコブくんは、三面図の外形を測って、Blender の中で、箱を組むように作ります。", 0.35),
("s3_human", "base", "人は、楕円の頭、丸い棒の腕、角を丸めた箱の胴、のように、簡単な形を Python で足し合わせて、Blender に渡します。", 0.35),
("s3_why", "smile", "首の長さも、肩の丸みも、ぜんぶコードの中の数字です。｜だから、首が長い、と言われたら、数字を1つ変えて作り直すだけ。", 0.35),
("s3_joke", "wink", "人間の首は、数字を変えても短くなりません。3Dの、いいところです。", 1.2),
# --- 手順4 絵に描き出して直す ---
("s4", "base", "手順4、絵に描き出して、直します。", 1.2),
("s4_render", "base", "作った形は、正面、横、斜めから、確認用の絵に描き出します。これも、コードです。", 0.35),
("s4_side", "doubt", "ところが、2人を並べると、ハコブくんの角だけが硬く見えました。｜1人だけ、別の絵から切り抜いてきたみたいに。", 0.35),
("s4_fix", "base", "そこで、体の角を丸めて、タイヤを太くしました。｜顔の画面のまわりは丸めると白い線が出たので、マンガの形のまま残しています。", 0.35),
("s4_tip", "smile", "ここが、手順4のコツです。1人ずつではなく、並べて見る。", 0.35),
("s4_oshiro", "surprise", "そして、大城さんの、最初の形がこちら。", 0.35),
("ei_first", "base", "エイイチの、最初のひと言です。", 0.35),
("ei_first", "doubt", "首長すぎ、肩がいかつすぎ。", 0.8),
("ei_first2", "base", "正直な感想も、聞いてみました。", 0.35),
("ei_first2", "trouble", "人の描写のバランス悪っ！", 0.8),
("s4_ff", "joy", "ここから、首を短く、なで肩に、腕を短く、目を大きく。｜……このあたりは、早送りでどうぞ。", 0.35),
("s4_ff2", "base", "作り直しは、全部で15回でした。", 0.35),
("s4_tip2", "smile", "直す所は、言葉で言ってもらえば十分です。それを数字に直すのは、AI の仕事です。", 1.2),
# --- 手順5 骨と顔 ---
("s5", "base", "手順5、骨と、顔を入れます。", 1.2),
("s5_bone", "base", "人の3Dを動かすには、体の中に、骨を入れます。骨といっても、見えない棒です。｜大城さんには、Blender で45本入れました。", 0.35),
("s5_name", "base", "ポイントは、骨の名前を、Unity の人型の決まりどおりに付けること。｜そうしておくと、よそで作った歩く動きなどを、そのまま当てはめられます。", 0.35),
("s5_face", "smile", "顔には、まばたきの目と、困った眉。口は、笑う・話す・驚くなど、5つの形を用意しました。", 0.35),
("s5_joke", "joy", "ちなみにハコブくんの顔は、画面です。眉は、ありません。｜……困った顔は、気持ちでがんばっています。", 1.2),
# --- 手順6 ポーズで確かめる ---
("s6", "base", "手順6、ポーズを付けて、確かめます。今日いちばん手こずったところです。", 1.2),
("s6_pose", "base", "差し出す、両手で受け取る、引き出しの物をつかむ、おじぎ、困った顔など、8つのポーズを付けて、服や肌が破れないかを見ます。", 0.35),
("ei_sleeve", "surprise", "すると、エイイチから、こう言われました。", 0.35),
("ei_sleeve", "doubt", "体が動いた時に、服の袖が切れてるよ。", 0.8),
("s6_try1", "trouble", "1回目。腕を前に出すと、袖と胴のつなぎ目が裂けていました。｜胴と袖が、別々の骨に引っぱられていたんです。袖を、別の部品に分けました。", 0.35),
("s6_try2", "doubt", "2回目。まだ裂けて見える。今度は、袖の中の腕の肌が、外に飛び出していました。｜袖の中に入る所の肌は、作らないことにしました。", 0.35),
("s6_joke", "trouble", "見えない所は、作らない。……3Dの世界は、なかなか、割り切っています。", 0.35),
("s6_try3", "doubt", "3回目。腕を上げると、袖の肩の所がゆがむ。", 0.35),
("s6_fix", "surprise", "答えは、袖をまるごと、腕の骨に付けること。これで、腕を上げても、袖の形が変わらなくなりました。", 0.35),
("s6_tip", "smile", "動かすと、止まっている時には見えない所が壊れます。だから、ポーズを付けて確かめる手順を、飛ばさないでください。", 0.35),
("s6_hakobu", "wink", "ちなみにハコブくんは、服を着ていないので、袖の悩みはありません。", 1.2),
# --- 手順7 Unity で動かす ---
("s7", "base", "手順7、Unity に運んで、動かします。", 1.2),
("s7_fbx", "base", "ここで、Blender から Unity へ、バトンタッチです。形と骨を、FBX という、Unity がそのまま読めるファイルにして渡します。", 0.35),
("ei_unity", "surprise", "Unity に入った3Dのハコブくんを見て、エイイチは、ひと言。", 0.35),
("ei_unity", "joy", "Unityでここまでできるの、熱いっ！", 0.8),
("s7_mixamo", "base", "歩く・うなずく・おじぎなどの動きは、Mixamo という、人の動きを無料で借りられる Adobe のサービスから、33本借りました。｜借りた動きのファイルは、決まりにより、そのまま配ることはしません。", 0.35),
("s7_scene", "smile", "こうして、Unity の場面の中で、2人が動き出しました。", 0.35),
("s7_scene2", "base", "薬剤部で、大城さんが、ハコブくんに薬を積む。｜届け先で、認証のカードをかざすと、引き出しが開き、薬を取る。", 0.35),
("s7_ff", "joy", "ここにたどり着くまでの細かい直しも、早送りでどうぞ。", 0.35),
("s7_end", "smile", "筒と箱だった世界に、やっと、手と顔が出てきました。", 1.2),
# --- まとめ・これから ---
("sum", "base", "7つの手順を、もう一度。", 0.35),
("sum2", "base", "使い道を決める。元の絵と大きさ。数字で形。並べて直す。骨と顔。ポーズで確かめる。Unity で動かす。", 0.35),
("sum_code", "smile", "2人の形の作り方のコードは、記事に載せています。同じコードを動かせば、同じ形ができます。", 1.2),
("next", "base", "では、この3Dで、何を見せていくのか。エイイチは、こう話していました。", 0.35),
("ei_next", "think", "モノを渡す、受け取る、トラブルの時の動き、コミュニケーションの姿などを、表現できたらと思います。", 0.8),
("next2", "base", "まだ、作りはじめたばかりです。動きが本物の看護師さんに近いかは、これから確かめます。", 0.35),
("next_joke", "joy", "次は、廊下ですれ違う場面です。ハコブくん、ぶつからないように、がんばります。", 1.2),
("site", "smile", "作り方のコードと、くわしい記録は、サイトで毎日公開しています。pixelstomotors.com で、どうぞ。", 1.2),
("outro", "smile", "この動画が役に立ったら、高評価とチャンネル登録をお願いします。", 0.35),
("outro", "base", "ロボットの開発や導入の相談は、概要欄の連絡先から、エイイチに直接どうぞ。", 0.35),
("outro", "wink", "コメントは、エイイチが全部読んでいます。それではまた。", 1.2),
]
# エイイチの声で読む文（槙原の声を流用）。ハコブくんの口は動かさない
EI_LINES = [i for i, seg in enumerate(SEGS) if seg[2].startswith((
"試算、全体のシミュレーション", "Unityでここまで", "首長すぎ", "人の描写の", "体が動いた時に", "モノを渡す、受け取る",
))]
# 「エイイチ」を残す文（自己紹介・アウトロのほか）。文の頭で探す
NAME_OK = [i + 1 for i, seg in enumerate(SEGS) if seg[2].startswith((
"エイイチが研究と開発で確かめたことを",
"エイイチは、こう書いていました",
"Unity に入った3Dのハコブくんを",
"エイイチの、最初のひと言",
"すると、エイイチから",
"では、この3Dで",
))]
READ = [
("Pixels to Motors", "ピクセルズ トゥー モーターズ"), ("YouTube", "ユーチューブ"),
("フィジカルAI", "フィジカルエーアイ"), ("AI", "エーアイ"), ("3DCG", "スリーディーシージー"), ("3D", "スリーディー"),
("Blender", "ブレンダー"), ("FBX", "エフビーエックス"), ("Claude", "クロード"), ("Unity", "ユニティ"), ("Mixamo", "ミクサモ"), ("Adobe", "アドビ"),
("pixelstomotors.com", "ピクセルズトゥーモーターズ ドット コム"),
("1人", "ひとり"), ("2人", "ふたり"), ("1つ", "ひとつ"), ("2つ", "ふたつ"), ("3つ", "みっつ"), ("4つ", "よっつ"), ("5つ", "いつつ"), ("8つ", "やっつ"),
("栄一", "えいいち"),
("『", ""), ("』", ""), ("｜", ""), ("…", ""),
]
ELEVEN_READ = [
('エイイチ', '栄一'),
('角', 'かど'),
('首長すぎ', 'くびながすぎ'),
('額だけ', 'がくだけ'), ('ロボットの側', 'ロボットのがわ'), ('人型', 'ひとがた'), ('Unity', 'ユニティ'),
# この回で先回りして足す読み（--try で確かめる）
('3DCG', 'スリーディーシージー'), ('3D', 'スリーディー'), ('FBX', 'エフビーエックス'), ('1メートル65センチ', 'いちメートルろくじゅうごセンチ'), ('7分の1', 'ななぶんのいち'), ('50センチ', 'ごじゅっセンチ'),
('Blender', 'ブレンダー'), ('Mixamo', 'ミクサモ'), ('Claude', 'クロード'),
('pixelstomotors.com', 'ピクセルズトゥーモーターズ、ドット、コム'),
('1メートル15センチ', 'いちメートルじゅうごセンチ'),
('45本', 'よんじゅうごほん'), ('33本', 'さんじゅうさんぼん'), ('15回', 'じゅうごかい'),
('薬剤部', 'やくざいぶ'), ('三面図', 'さんめんず'), ('大城さん', 'おおしろさん'),
('袖', 'そで'), ('胴', 'どう'), ('眉', 'まゆ'),
]
OVERRIDE = {
"エイイチは、本業のデザイナーをしながら、ロボティクスの研究と開発をしています。｜その中で分かったことと、そこから考えた見立てを、ハコブくんがお伝えします。":
"エイイチは、本業のデザイナーをしながら、ロボティクスの研究と開発をしています。その中で分かったことと、そこから考えた見立てを、ハコブくんが、お伝えします。",
}
def reading(t):
t = OVERRIDE.get(t, t)
for a, b in READ:
t = t.replace(a, b)
return t
def parse(seg):
if len(seg) >= 3 and seg[1] in FACES:
scene, face, text = seg[0], seg[1], seg[2]
pause = seg[3] if len(seg) > 3 else 0.35
else:
scene, face, text = seg[0], "base", seg[1]
pause = seg[2] if len(seg) > 2 else 0.35
return scene, face, text, pause
```
## 場面の時間の表（timeline.json から）
書き出したときの、文ごとの始まりの秒と長さ。
| 文 | 場面 | 始まり（秒） | 長さ（秒） | 字幕の文 |
| --- | --- | --- | --- | --- |
| 0 | hook_use | 0.0 | 6.4 | 薬を運ぶロボットと、看護師さんが、薬を受け渡す。｜その場面を、近くから見せたい。 |
| 1 | hook_use2 | 6.8 | 4.9 | そのために、ハコブくんと、看護師の大城さんを、3Dで作りました。 |
| 2 | hook_joke | 12.0 | 5.0 | ハコブくん、ついに体ができました。｜……腕は、まだありません。 |
| 3 | hook_why | 17.7 | 5.8 | これまでの病院のシミュレーションでは、人は青い筒、ロボットは白い箱でした。 |
| 4 | hook_why2 | 23.9 | 8.4 | ロボットが何回止まったかは数えられます。｜でも、看護師さんがどこに立って、どう受け取るのかは、筒と箱では分かりません。 |
| 5 | hook_joke2 | 32.6 | 5.5 | 筒から薬を受け取る箱。……絵としては、ちょっと寂しいですよね。 |
| 6 | hook_today | 38.4 | 6.9 | 今日は、この3Dを作った順番を、そのまま真似できる形でお伝えします。｜手順は7つです。 |
| 7 | title | 46.6 | 3.7 | Pixels to Motors、案内役のハコブくんです。 |
| 8 | title_eiichi | 50.6 | 4.0 | エイイチが研究と開発で確かめたことを、ぼくがお伝えします。 |
| 9 | toc | 55.8 | 1.9 | 7つの手順は、こうです。 |
| 10 | toc2 | 58.0 | 13.9 | 使い道を決める。元の絵と大きさをそろえる。形を数字で作る。｜絵に描き出して直す。骨と顔を入れる。ポーズを付けて確かめる。そして、Unity で動かす。 |
| 11 | toc_note | 72.3 | 8.0 | なお、ハコブくんはマンガのロボットで、実物はありません。今日の話は、ぜんぶ3DCGの中の話です。 |
| 12 | s1 | 81.5 | 4.5 | 手順1、使い道と、見た目の決まりを、先に決めます。 |
| 13 | s1_use | 87.2 | 9.2 | 今回の使い道は、病院の場面を近くで見せること。｜パソコンの試算、病院の1日のシミュレーションの、その次の段です。 |
| 14 | ei_steps | 96.7 | 1.9 | エイイチは、こう書いていました。 |
| 15 | ei_steps | 99.0 | 10.2 | 試算、全体のシミュレーション、場面の細部、実際のロボットでの動画。｜全体がつながっていけば、より伝わりやすくなると考えます。 |
| 16 | s1_look | 110.0 | 8.6 | 見た目の決まりは、粘土の人形のような感じ。ただし、デフォルメしすぎない。｜人とロボットを、同じ決まりで作ります。 |
| 17 | s1_tip | 119.0 | 5.0 | ここを先に決めておくと、あとで、なんか違う、で迷子になりません。 |
| 18 | s2 | 125.1 | 3.4 | 手順2、元の絵と、大きさをそろえます。 |
| 19 | s2_ref | 129.7 | 9.7 | 元の絵は、マンガ『ハコブくん』の三面図です。正面、横、背中の3枚。｜大城さんも、マンガに出てくる看護師さんです。 |
| 20 | s2_size | 139.8 | 12.7 | 大きさは、実寸で作ります。ハコブくんは、高さ1メートル15センチ。大城さんは、身長1メートル65センチ。｜頭は、身長の約7分の1にしました。 |
| 21 | s2_joke | 152.8 | 6.1 | ハコブくん、大城さんより50センチ小さいです。……見上げるのには、慣れています。 |
| 22 | s3 | 160.0 | 3.3 | 手順3、形を、数字で作ります。 |
| 23 | s3_split | 164.5 | 9.0 | その前に、道具の役わけです。｜形を作るのは、Blender。動かして撮るのは、Unity。この2つを使い分けます。 |
| 24 | s3_tool | 173.9 | 10.3 | Blender は、3Dの形を作る無料のソフトです。画面は開かずに、Python のコードで動かしました。｜コードを書いたのは、AI の Claude です。 |
| 25 | s3_robot | 184.6 | 5.8 | ハコブくんは、三面図の外形を測って、Blender の中で、箱を組むように作ります。 |
| 26 | s3_human | 190.7 | 10.0 | 人は、楕円の頭、丸い棒の腕、角を丸めた箱の胴、のように、簡単な形を Python で足し合わせて、Blender に渡します。 |
| 27 | s3_why | 201.1 | 9.5 | 首の長さも、肩の丸みも、ぜんぶコードの中の数字です。｜だから、首が長い、と言われたら、数字を1つ変えて作り直すだけ。 |
| 28 | s3_joke | 210.9 | 5.6 | 人間の首は、数字を変えても短くなりません。3Dの、いいところです。 |
| 29 | s4 | 217.7 | 3.2 | 手順4、絵に描き出して、直します。 |
| 30 | s4_render | 222.1 | 7.1 | 作った形は、正面、横、斜めから、確認用の絵に描き出します。これも、コードです。 |
| 31 | s4_side | 229.6 | 8.0 | ところが、2人を並べると、ハコブくんの角だけが硬く見えました。｜1人だけ、別の絵から切り抜いてきたみたいに。 |
| 32 | s4_fix | 237.9 | 9.6 | そこで、体の角を丸めて、タイヤを太くしました。｜顔の画面のまわりは丸めると白い線が出たので、マンガの形のまま残しています。 |
| 33 | s4_tip | 247.9 | 4.7 | ここが、手順4のコツです。1人ずつではなく、並べて見る。 |
| 34 | s4_oshiro | 252.9 | 3.5 | そして、大城さんの、最初の形がこちら。 |
| 35 | ei_first | 256.8 | 2.2 | エイイチの、最初のひと言です。 |
| 36 | ei_first | 259.3 | 2.7 | 首長すぎ、肩がいかつすぎ。 |
| 37 | ei_first2 | 262.8 | 2.3 | 正直な感想も、聞いてみました。 |
| 38 | ei_first2 | 265.5 | 2.2 | 人の描写のバランス悪っ！ |
| 39 | s4_ff | 268.4 | 7.8 | ここから、首を短く、なで肩に、腕を短く、目を大きく。｜……このあたりは、早送りでどうぞ。 |
| 40 | s4_ff2 | 276.6 | 2.6 | 作り直しは、全部で15回でした。 |
| 41 | s4_tip2 | 279.6 | 6.3 | 直す所は、言葉で言ってもらえば十分です。それを数字に直すのは、AI の仕事です。 |
| 42 | s5 | 287.1 | 3.0 | 手順5、骨と、顔を入れます。 |
| 43 | s5_bone | 291.3 | 10.1 | 人の3Dを動かすには、体の中に、骨を入れます。骨といっても、見えない棒です。｜大城さんには、Blender で45本入れました。 |
| 44 | s5_name | 301.7 | 9.8 | ポイントは、骨の名前を、Unity の人型の決まりどおりに付けること。｜そうしておくと、よそで作った歩く動きなどを、そのまま当てはめられます。 |
| 45 | s5_face | 311.9 | 8.4 | 顔には、まばたきの目と、困った眉。口は、笑う・話す・驚くなど、5つの形を用意しました。 |
| 46 | s5_joke | 320.7 | 8.3 | ちなみにハコブくんの顔は、画面です。眉は、ありません。｜……困った顔は、気持ちでがんばっています。 |
| 47 | s6 | 330.1 | 5.8 | 手順6、ポーズを付けて、確かめます。今日いちばん手こずったところです。 |
| 48 | s6_pose | 337.2 | 10.2 | 差し出す、両手で受け取る、引き出しの物をつかむ、おじぎ、困った顔など、8つのポーズを付けて、服や肌が破れないかを見ます。 |
| 49 | ei_sleeve | 347.8 | 2.7 | すると、エイイチから、こう言われました。 |
| 50 | ei_sleeve | 350.8 | 3.2 | 体が動いた時に、服の袖が切れてるよ。 |
| 51 | s6_try1 | 354.8 | 11.3 | 1回目。腕を前に出すと、袖と胴のつなぎ目が裂けていました。｜胴と袖が、別々の骨に引っぱられていたんです。袖を、別の部品に分けました。 |
| 52 | s6_try2 | 366.5 | 10.8 | 2回目。まだ裂けて見える。今度は、袖の中の腕の肌が、外に飛び出していました。｜袖の中に入る所の肌は、作らないことにしました。 |
| 53 | s6_joke | 377.7 | 5.9 | 見えない所は、作らない。……3Dの世界は、なかなか、割り切っています。 |
| 54 | s6_try3 | 383.9 | 4.3 | 3回目。腕を上げると、袖の肩の所がゆがむ。 |
| 55 | s6_fix | 388.6 | 7.9 | 答えは、袖をまるごと、腕の骨に付けること。これで、腕を上げても、袖の形が変わらなくなりました。 |
| 56 | s6_tip | 396.8 | 7.8 | 動かすと、止まっている時には見えない所が壊れます。だから、ポーズを付けて確かめる手順を、飛ばさないでください。 |
| 57 | s6_hakobu | 405.0 | 4.5 | ちなみにハコブくんは、服を着ていないので、袖の悩みはありません。 |
| 58 | s7 | 410.7 | 3.5 | 手順7、Unity に運んで、動かします。 |
| 59 | s7_fbx | 415.4 | 9.0 | ここで、Blender から Unity へ、バトンタッチです。形と骨を、FBX という、Unity がそのまま読めるファイルにして渡します。 |
| 60 | ei_unity | 424.7 | 4.3 | Unity に入った3Dのハコブくんを見て、エイイチは、ひと言。 |
| 61 | ei_unity | 429.3 | 2.7 | Unityでここまでできるの、熱いっ！ |
| 62 | s7_mixamo | 432.9 | 14.0 | 歩く・うなずく・おじぎなどの動きは、Mixamo という、人の動きを無料で借りられる Adobe のサービスから、33本借りました。｜借りた動きのファイルは、決まりにより、そのまま配ることはしません。 |
| 63 | s7_scene | 447.2 | 3.9 | こうして、Unity の場面の中で、2人が動き出しました。 |
| 64 | s7_scene2 | 451.4 | 9.0 | 薬剤部で、大城さんが、ハコブくんに薬を積む。｜届け先で、認証のカードをかざすと、引き出しが開き、薬を取る。 |
| 65 | s7_ff | 460.8 | 3.5 | ここにたどり着くまでの細かい直しも、早送りでどうぞ。 |
| 66 | s7_end | 464.6 | 4.2 | 筒と箱だった世界に、やっと、手と顔が出てきました。 |
| 67 | sum | 470.0 | 2.0 | 7つの手順を、もう一度。 |
| 68 | sum2 | 472.4 | 11.4 | 使い道を決める。元の絵と大きさ。数字で形。並べて直す。骨と顔。ポーズで確かめる。Unity で動かす。 |
| 69 | sum_code | 484.1 | 7.0 | 2人の形の作り方のコードは、記事に載せています。同じコードを動かせば、同じ形ができます。 |
| 70 | next | 492.3 | 5.5 | では、この3Dで、何を見せていくのか。エイイチは、こう話していました。 |
| 71 | ei_next | 498.2 | 7.2 | モノを渡す、受け取る、トラブルの時の動き、コミュニケーションの姿などを、表現できたらと思います。 |
| 72 | next2 | 506.2 | 6.2 | まだ、作りはじめたばかりです。動きが本物の看護師さんに近いかは、これから確かめます。 |
| 73 | next_joke | 512.7 | 5.8 | 次は、廊下ですれ違う場面です。ハコブくん、ぶつからないように、がんばります。 |
| 74 | site | 519.7 | 8.2 | 作り方のコードと、くわしい記録は、サイトで毎日公開しています。pixelstomotors.com で、どうぞ。 |
| 75 | outro | 529.1 | 4.2 | この動画が役に立ったら、高評価とチャンネル登録をお願いします。 |
| 76 | outro | 533.7 | 5.7 | ロボットの開発や導入の相談は、概要欄の連絡先から、エイイチに直接どうぞ。 |
| 77 | outro | 539.8 | 3.9 | コメントは、エイイチが全部読んでいます。それではまた。 |
## 場面の作り方（scenes.py）
大文字型のカード・道具の札（C_list の tool）・画像を先に見せる bg_card の img_first・早送りの場面を書いた、場面の定義。共通の部品（scene_kit.py・motion_kit.py）は動画の作業フォルダの _制作ベース にある。
```python
# -*- coding: utf-8 -*-
# 動画「ハコブくんの3D」（3Dを作る順番の7手順）の場面。2026-11-13 1版
PATTERN = 2 # 大文字型（4-4c）。2026-11-13 エイイチが決定（大文字型＋動きあり）
MOVE = True
# 背景の映像は Unity の場面の寄り（KIOXIA service_sim/unity/closeup/ 依頼162・166・171）と、病院の1日（hospital161 1便の通し）
# 出どころの札は使わない（全部エイイチの記録）
import os as _os, sys as _sys, json as _json, base64 as _b64
_here = _os.path.dirname(_os.path.abspath(__file__))
for _c in (_os.environ.get("P2M_BASE", ""), _os.path.join(_here, "..", "base"), _os.path.join(_here, "..", "_制作ベース")):
if _c and _os.path.exists(_os.path.join(_c, "scene_kit.py")):
_sys.path.insert(0, _c); break
from scene_kit import *
from scene_kit import _p2page
from motion_kit import use_motion
# --- 場面ごとの、文の始まりの秒（声の長さから）---
_idx = _json.load(open(_os.path.join(_here, 'tts/index.json'))) if _os.path.exists(_os.path.join(_here, 'tts/index.json')) else []
_LINES = {}
for _o in _idx:
_d = _LINES.setdefault(_o['scene'], [])
_t0 = (_d[-1][0] + _d[-1][1] + _d[-1][2]) if _d else 0.0
_d.append((_t0, _o['dur'], _o['pause']))
def at(scene, k=0, f=0.0):
"""その場面の k 番目の文の、読み上げの f 割の所（秒）"""
L = _LINES.get(scene)
if not L:
return 0.3
k = min(k, len(L) - 1)
return round(L[k][0] + L[k][1] * f, 2)
def scene_len(scene):
L = _LINES.get(scene)
return (L[-1][0] + L[-1][1] + L[-1][2]) if L else 4.0
# --- 出どころの札（左上）---
FUDA_CSS = """
.fuda{position:absolute;left:140px;top:96px;display:flex;align-items:center;gap:14px;font-size:30px;font-weight:700;color:#0D0D0D}
.fuda .k{padding:6px 18px;border-radius:999px;font-size:28px;font-weight:900}
.fuda .k.hap{background:#0D0D0D;color:#fff}
.fuda .k.news{background:#1A6C98;color:#fff}
.fuda .k.ken{border:3px solid #888888;color:#555}
.fuda .k.ei{background:#C4471F;color:#fff}
.fuda .k.clip{background:#0D0D0D;color:#fff}
.fuda .k.chosa{background:#5A5A5A;color:#fff}
"""
FUDA_NAME = {"hap": "会社の発表", "news": "ニュース", "ken": "論文や本", "ei": "エイイチの記録と見立て", "clip": "公開されている実物の動画", "chosa": "調査会社の推計"}
def fuda(kind, who):
return f'{FUDA_NAME[kind]}{who}
'
# --- エイイチ（ドット絵）---
def _uri(p):
return 'data:image/png;base64,' + _b64.b64encode(open(_os.path.join(_here, p), 'rb').read()).decode()
import ei_talk as _talk
EI = {k: (_talk.base_uri(k), _talk.base_uri(k, True)) for k in ('udegumi', 'unazuku', 'yubisasu', 'hirameku')}
# エイイチが話す文（narration.py の EI_LINES）→ (場面, 場面の中で何番目の文か, 文番号)
import importlib.util as _ilu
_sp = _ilu.spec_from_file_location('_narr_here', _os.path.join(_here, 'narration.py'))
_nm = _ilu.module_from_spec(_sp); _sp.loader.exec_module(_nm)
_EIL = getattr(_nm, 'EI_LINES', [])
_EI_SPEAK = {}
_cnt = {}
for _o in _idx:
_k = _cnt.get(_o['scene'], 0); _cnt[_o['scene']] = _k + 1
if _o['i'] in _EIL:
_EI_SPEAK.setdefault(_o['scene'], []).append((_k, _o['i']))
EI_CSS = """
.eiw{position:absolute;right:10px;bottom:0px;width:420px;height:420px;overflow:hidden}
.eiw img{position:absolute;left:0;top:8px;width:420px;height:420px;image-rendering:pixelated}
.ein{position:absolute;right:40px;bottom:346px;width:300px;text-align:center;font-size:30px;font-weight:900;color:#0D0D0D}
.ein span{display:inline-block;background:#F5F5F0;border:3px solid #D6D6D1;border-radius:999px;padding:4px 20px}
"""
def _blinks(start, end):
t, out = start, []
while t < end - 0.4:
out.append(round(t, 2)); t += 3.3
return out
def ei_wipe(pose, scene, pop=None, name=None, poses=None):
"""右下の小窓。pop=秒 で、ぽんと出る。poses=[(秒, 絵)] で途中で絵を替える（指さしは大事な所だけ。2026-10-28 エイイチの指示）。
話している間は口と目を声に合わせて動かし、話していない間はまばたきだけする。
絵ごとにまとまり（div）を作り、替える時刻に前のまとまりを消して（out）、次を出す（fade）。絵の透明な所から前の絵が見えないように"""
seq_p = sorted(poses or [(0, pose)])
if seq_p[0][0] > 0:
seq_p = [(0, pose)] + seq_p
L = scene_len(scene) + 1
segs = [(t, seq_p[k + 1][0] if k + 1 < len(seq_p) else L, p) for k, (t, p) in enumerate(seq_p)]
spans, mouth, blinks = [], [], []
for k, i in _EI_SPEAK.get(scene, []):
t0 = at(scene, k, 0.0)
sq, end = _talk.mouth_seq(i, t0)
spans.append((t0, end)); mouth += sq
blinks += [(b, 0.13) for b in _talk.blink_times(t0, end)]
mouth.sort()
blinks += [(b, 0.15) for b in _blinks((pop or 0) + 1.3, scene_len(scene)) if not any(a0 - 0.2 <= b <= a1 + 0.2 for a0, a1 in spans)]
out = ''
for s0, s1, p in segs:
ev = []
lv = ([l for (t, l) in mouth if t <= s0] or [1])[-1]
if lv != 1 and p in _talk.MOUTH:
ev.append((s0, f'[lv]})
'))
for t, l in mouth:
if s0 < t < s1 and p in _talk.MOUTH:
ev.append((t, f'[l]})
'))
e = _talk.eye_patches(p) if p != 'unazuku' else None
for b, d in blinks:
if e and s0 <= b and b + d < s1:
ev.append((b, f'
'))
ev.append((round(b + d, 2), f'
'))
ev.sort(key=lambda x: x[0])
inner = f'
' + ''.join(h for _, h in ev)
if s0 > 0:
inner = f'{inner}
'
if s1 < L:
inner = f'{inner}
'
out += inner
a = f' data-a="pop" data-t="{pop}" data-d="0.35"' if pop is not None else ''
nm = f'{name}
' if name else ''
return f'{nm}{out}
'
def add(page_html, *parts):
return page_html.replace(' ', ''.join(parts) + '', 1)
S = {}
MOTION = {}
O = {}
VIDEO = {}
# --- 背景の映像の上にカード（4-4e）---
HL, WARN = "#C4471F", "#62BFF5"
CARD_CSS = f"""
.cw{{position:absolute;left:0;right:0;top:215px;bottom:300px;display:flex;align-items:center;justify-content:center}}
.cd{{background:rgba(8,8,8,.86);border-radius:30px;padding:46px 84px 52px;text-align:center;color:#fff;max-width:1400px;box-shadow:0 10px 40px rgba(0,0,0,.35)}}
.cd .k{{font-size:42px;font-weight:700;color:#BDBDBD;margin-bottom:22px}}
.cd .b{{font-weight:900;line-height:1.16}}
.cd .s{{font-size:44px;font-weight:700;color:#D0D0D0;margin-top:26px;line-height:1.35}}
.cd .hl{{color:{HL}}} .cd .wn{{color:{WARN}}}
.cap{{position:absolute;left:140px;right:auto;top:110px;background:rgba(8,8,8,.72);color:#fff;font-size:30px;font-weight:700;padding:10px 22px;border-radius:10px}}
.ff{{position:absolute;right:120px;top:170px;background:#C4471F;color:#fff;font-size:64px;font-weight:900;padding:10px 34px;border-radius:16px;letter-spacing:.04em}}
"""
def card(inner, cap="", pop=0.05):
c = f'