teardownはなぜスキルの見本なのか 動かして確かめた
cccskills
5時間前
元記事: teardownはなぜスキルの見本なのか 動かして確かめた（cccskills）
スキルのページ: teardown
この記事の結論
teardownは、実在する機械を分解できる3Dシミュレーターとして1枚のHTMLに組み立て、動画と音まで書き出すスキルです。
cccskillsでは、スキルの書き方の見本として「おすすめ」の1本目に選びました。
この記事では、見本と言える理由を3つ挙げ、手元で動かした結果と、いつもの実行検証にかけた結果を報告します。
teardownは、実在する機械を「分解できる3Dシミュレーター」として1枚のHTMLに組み立てるスキルです。
エンジンや飛行機の脚、歩く機構などを、ボタンで部品ごとに開いたり断面にしたりしながら動かせます。
周りの計器やグラフは、部品を動かしているのと同じ計算から数字を出します。
誰も触らなければ、ページはカーソルを動かして自分で見どころを案内する作りです。
クリックやドラッグで操作が見る人に移り、25秒何もしないと案内に戻ります。
同じ台本から60fpsの動画をコマ単位で書き出し、同じ時刻表に合わせて音も作ります。
cccskillsでは、このスキルを「cccskillsのおすすめ」の1本目に選びました。
目を引く見た目より、中身の書き方が良いからです。
以下で、見本と言える理由と、手元で確かめた結果を順に書きます。
teardownの中心にあるルールは「実寸の数字を先に集め、1つの入力ですべてを動かす」です。
エンジンならクランク角、飛行機の脚なら0から1の伸縮量、ストランドビーストなら風速が入力になります。
部品の姿勢もパネルの数字もグラフも、その入力の関数として計算します。
こうすると、画面の数字と動きが食い違うことが原理的に起きません。
手でキーフレームを打たないので、操作できるページと録画した動画と音もずれません。
SKILL.mdは、検算の例まで書いています。
Cessnaの例では、32歯×モジュール4mmでピッチ円直径は128mm。
その半周が201mmのストロークになる。
手元で計算すると、π×128÷2は201.06mmでした。
コードの定数もpinionR: 0.064（32歯、モジュール4mm）とstroke: 0.201で、文書と実装が一致しています。
ストランドビーストの作例は、テオ・ヤンセンの13個の寸法（a=38からm=15まで）を原典どおり持っています。
クランクを720コマ回して各リンクの長さを測り直すと、ずれは最大でも1e-14でした。
足先の上下幅は22.5、地面から1単位以内にいる区間はクランク155°分で、コードの注記「約155°」と合っています。
スキルには、V8エンジン、セスナ337の主脚、ストランドビーストの3台が完全な形で入っています。
3台とも同じ分け方で書かれており、新しい機械は一番近い作例のコピーから始める決まりです。
| ファイル | 役割 |
|---|---|
| kin.js など | 計算だけ。実寸と1つの入力から、姿勢と表示の数字を出す。three.jsを含まない |
| engine.js など | 形。コードで部品を作り、update(input)で姿勢を決める |
| console.js | 計器やグラフの重ね表示。フレームの状態から描き直す |
| film.js | 台本と、時刻だけで1コマを描くrender(t) |
| live.js | 操作できるページ。放っておくと台本どおりに自動で案内する |
| score.py | 台本の時刻に合わせた音 |
計算と描画が分かれているので、計算だけをNodeで検算できます。
render(t)は時刻だけで1コマを描く純粋な関数で、乱数や時計を使わない決まりです。
撮影用のコードを検索するとMath.randomとDateは1つも無く、performance.nowはリアルタイム操作用のlive.jsにしかありませんでした。
SKILL.mdには「あなたは動画を見られない。
見られるのはコマだけだ」と書かれています。
そのうえで、見せ場ごとの静止画を並べたシートを作り、チェックリストと照らし、直して撮り直す手順を決めています。
終わりにしてよい条件は「全部通して何も見つからなくなったとき」です。
チェックリストは具体的です。
触れるべき部品が触れているか、端から60px以内に大事なものが無いか、1080の画面で文字が34px未満になっていないか、といった項目が並びます。
発光は1.0未満、大きな金属面は粗さ0.45以上など、three.jsで見た目が崩れる場面の数値も書いてあります。
もう1つ良いのは、作者が実際に踏んだ落とし穴を残している点です。
WindowsのANGLEでsmoothstepの引数が逆だと0になる、NaNが1ピクセル出るとブルームで画面全体が黒くなる、といった5件が理由つきで並んでいます。
Apple M2 UltraのMacで、READMEの手順どおりに試しました。
Macでは1つ引っかかりました。
Playwrightが既定で使う軽量版のChromiumではWebGLが作れず、撮影が60秒で止まります。
環境変数CHROMIUMに通常版のChromiumを指定すると、Metal経由でGPUを使って撮れました。
撮影のたびに使ったGPUを表示する作りなので、原因はすぐ分かります。
SKILL.mdは「見せ場の時刻はすべてtimeline.jsonに書き、音も同じファイルを読む」と決めています。
ところが、3台のtimeline.jsonには動画の長さしか入っていませんでした。
V8の音を作るscore.pyは、台本の時刻をCLICKS = (3.5, 6.9, …)のように手で書き写しています。
今は値が一致しているので、音はずれていません。
ただ、台本の時刻を変えると音だけが取り残されます。
見せ場ごとの静止画を撮る--stills beatsも、最後の確認に使うsheet.mjsも、見せ場の時刻が無いため1コマか0コマしか出ませんでした。
今回は台本から時刻を拾って直接指定し、確認を続けました。
見本として勧める以上、この穴も書いておきます。
自分のスキルに取り入れるときは、ルールだけでなく作例がそれを守っているかも確かめてください。
cccskillsの実行検証は、同じ依頼を「スキルなし」と「スキルあり」のClaude Codeに解かせて比べます。
検証用の箱にはNode.jsとPythonの標準ライブラリしか無く、パッケージの追加もインターネットも使えません。
teardownが頼るthree.js、esbuild、Playwright、ffmpegはどれも動かない環境です。
この条件で課題を自動で作ると、次の2問になりました。
同じ2問を、手元でスキルなしとスキルありに1回ずつ解かせました。
回答者は画面を見られない設定なので、出来上がったページは筆者がブラウザで開いて比べています。
エンジンの課題は互角でした。
どちらも90°でのピストン位置を30.875mm（手計算と一致）と出し、断面表示、カメラ、自動案内まで動きました。
スキルありは「明るい背景に強調色1つ」というSKILL.mdの好みに沿った画面になっています。
ただ、スキルなしの画面も十分に見やすく、勝ち負けは付けにくい出来です。
差が出たのはストランドビーストです。
自動で作られたリンク表は、結線が2か所入れ替わっていました（dとe、hとi）。
表どおりに組むと、筆者の計算では360°のうち264°で機構が組み上がりません。
スキルなしは表どおりの結線のまま、解ける組み合わせを総当たりで探しました。
足の軌跡は底が平らにならず、最下点から1単位以内にいるのはクランク29°分だけでした。
接地の判定を6単位まで緩めて、つじつまを合わせています。
スキルありは、SKILL.mdとストランドビーストの作例を読んだうえで、表の足の三角形が原典と違うと指摘しました。
原典どおりの結線で組み、最下点から1単位以内の区間は155°と、作例と同じ軌跡になりました。
「想像ではなく参照から作る」というルール1と、作例の存在が効いた形です。
つまり、道具が使えない箱の中でも、書き方の部分はちゃんと効きました。
一方で、teardownの強みである撮影と見直しの手順は、この検証では測れていません。
実行検証の点数だけでこのスキルを判断すると、良さの半分を見落とします。
teardownから持ち帰れる書き方は、機械の3Dに限りません。
teardownは、出来上がる3Dの見栄えより、そこに至る書き方が優れたスキルです。
数字の出どころを1つにし、作例で型を示し、見られない出力を見られる形にして確かめさせています。
手元の検証でも、主要な数字と見た目はSKILL.mdの記述どおりでした。
作例のtimeline.jsonが空という穴はありますが、直し方ははっきりしています。
スキルを書く人は、一度SKILL.mdを通して読んでみてください。
この記事は cccskills の読みもの「teardownはなぜスキルの見本なのか 動かして確かめた」の転載です。
スキルの詳細とインストール方法は cccskills の teardown のページ にあります。
