はい、世はまさに動画時代です。というわけで今日はずんだもん動画を作成したいと思います。
Remotionというツールに乗ればReactで動画が作れると評判なので、これを使うことにする。先行事例として Claude Codeで5分でずんだもん解説動画を作る！｜Naoki |電電猫猫 が有名なようで、これはClaude Codeがインタフェースになっててすごく面白い。自分はソースの原稿をMarkdownとし、エディタで手直しできたほうがうれしいかなっと思ったので、そのような感じにした。
GitHub - motemen/markdown-to-zundamon
こんな原稿をもとに、こんな動画が作れます。
原稿を書く
だいたいREADMEに書いてあるけど、以下のような感じのFrontmatterつきMarkdownが原稿になる。引用部分は画面に表示され、地の文がセリフ。
--- characters: - name: ずんだもん speakerId: 3 color: "#55B02E" - name: 四国めたん speakerId: 2 color: "#D85898" --- > # markdown-to-zundamon > > はじめかた [ずんだもん] こんにちは！ ずんだもんなのだ。 [四国めたん] 四国めたんよ。 [ずんだもん] 今日は <ruby>markdown-to-zundamon<rt>マークダウントゥーずんだもん</rt></ruby> の始め方を紹介するのだ！ > ## markdown-to-zundamon とは？ > > Markdownを書くだけで > ずんだもんの解説動画を自動生成するツール [四国めたん] Markdownを書くだけで、こういう動画が作れるツールよ。 [ずんだもん] まさに今見ているこの動画も、Markdownから作られているのだ！
素材を配置する
キャラクター画像は characters/<キャラ名>/default.png に配置する。この画像は複数の動画を作る際にも共通して参照されます。
default_active1.png、default_active2.png ってファイルを置くと口パクしてくれるようになる。
psdcompose っていうツールが便利みたいですね。
中間データ・動画を生成する
以下のように原稿をpreprocessすると音声とタイムラインのデータが作成され、それを元にプレビューや動画生成ができる。
$ npm run preprocess ./manuscripts/example.md [...] Next steps: Preview: npm run studio -- example Render: npm run render -- example
工夫
音声生成エンジンは意図通りに読み上げてくれないことがあるためときどき人間が矯正してやる必要があるが、Markdown的な自然な書き方として <ruby> タグを使って指定できるようにした。<ruby>npm install<rt>エヌピーエム インストール</rt></ruby> という書き方で読み上げを補正できる。
袋文字の実現に paint-order: stroke fill を使ってみている。自分がこれまで知っていたやりかたは「同じテキストを持った要素を2つ重ねて描画する」というものだったけど、これだとbudouxで折り返しを改善しようとしたときに2つの要素が別々の折り返しになってしまって表示が崩れてしまうことがあったのだった。MDNによると現在は実験的な機能らしいが、Remotionがレンダリングに使用しているChromeでは実装済みなようなので問題なく使えた。
