はじめに
直近で、以下の記事を書いたりしていた Remotion公式の Agent Skills の話です。
●「デスクトップ版 Codexアプリ ＋ GPT-5.3-Codex」で Agent Skills の簡単なお試し： Remotion用のスキル - Qiita
https://qiita.com/youtoy/items/49dc402c9a35b700dc53
●Remotion公式の Agent Skills を Google Antigravity で少しだけ試す（＋ 公式の Hello World のお試し） - Qiita
https://qiita.com/youtoy/items/92a142c4aff8ad1998bb
今回試す「VOICEVOX動画テンプレートによるずんだもん解説動画」について
それに関し、上記の 2つのどちらの記事の中でも「VOICEVOX動画テンプレートによるずんだもん解説動画」を試したいということを書いていました。
その作例・作り方についてなどは、テンプレートの作者の電電猫猫/Naoki さんがポストされていたり、note などで情報を公開されています。
●Claude Codeで5分でずんだもん解説動画を作る！｜Naoki |電電猫猫
https://note.com/electrical_cat/n/n9be53194cb5c
●nyanko3141592/remotion-voicevox-template: Remotion + VOICEVOX動画テンプレート（ずんだもん＆めたん掛け合い動画）
https://github.com/nyanko3141592/remotion-voicevox-template
上記のテンプレートは Claude Code用になっていますが、今回、少しだけ手を加えてから「デスクトップ版 Codexアプリ ＋ GPT-5.3-Codex」を使って試してみます。
手順・標準の出力の仕様
手順
ざっくりな手順を書いていきます。今回、細かなところは省略します。
テンプレートを使ったフローは、上でも掲載したGitHubリポジトリの中で、以下の図で示されています。
今回は、上記の流れの 3 での修正は行わず、最初に作られた動画をそのままファイル化する流れで進めました。
標準の出力の仕様
また note の記事の記載によると、特別な指示を出さずに実行した時の、デフォルトの出力仕様は以下となるようです。
下準備
下準備について、元のリポジトリで書かれている内容と、自分が今回扱う環境（デスクトップ版 Codexアプリ利用）を考慮すると、以下となりそうです。
- Node.js を使えるようにしておく
- VOICEVOX を起動
- デスクトップ版 Codexアプリを起動
- プロジェクト用のフォルダを作り、そこにリポジトリの内容を持ってくる
Node.js はいつも使っていて、なおかつ VOICEVOX もローカルサーバー経由での API利用を以前からやったことがある状況なので、自分の環境では上記全ての準備が完了した状態でした。
リポジトリの内容をクローン
プロジェクト用のフォルダを適当に作り、そこにリポジトリの内容を以下のコマンドを使ってクローンします。
git clone https://github.com/nyanko3141592/remotion-voicevox-template.git my-video
cd my-video
npm i
これらを実行した後は、プロジェクトフォルダ内は以下の構成になりました。
その後、とりあえず npm start を実行して、エディタを開いてみます。
ここまでの手順は、問題なく進められていそうです。
ファイルの編集（Claude Code用の内容を Codex用にする）
ここで、Claude Code用になっている元の内容に対して、以下の少し雑な感じの対応をすれば Codex用に使える状態になりそうです（本来は、丁寧な対応をしたほうが良いかも、と思いつつ...）。
- 対応内容
- Codex（や OpenCode）で使うためには、CLAUDE.md を AGENTS.md にリネームしてやれば良さそうです。
- CLAUDE.md内で Claude Code に関する記載がありますが、これはプロンプトで読みかえてもらうようにしてみます。
- さらにルート直下の SKILL.md の内容を、リネーム後の AGENTS.md に統合しました。その際、末尾の部分に Tips2 として追加し、合わせて AGENTS.md 冒頭の目次に
12. [Tips2](#tips2)を追加してみました。
最終的に、上記の 2 の対応を忘れて進めてしまいましたが、動画作成で問題は起きなかったので、今回はそのままとしました。
Remotion公式スキルの追加
それと、元の手順に書かれていた Remotion公式スキルの追加も行いました。
以下の公式のポストにも書かれているコマンドを使います。
npx skills add remotion-dev/skills
コマンド実行後に出てくる選択肢では、「.agents/skills」のみが作らえるようにし、あとはデフォルト設定を選んでいきました。
その結果、以下のように「.agents/skills」に「Remotion公式スキル（remotion-best-practices）」がセットされました。
デスクトップ版 Codexアプリでの処理
あとは Codexアプリでの処理を進めます。
Codexアプリでプロジェクトフォルダを読み込みます。念のため「/（スラッシュ）」を入力して表示されるメニューで、以下のように Remotion公式スキルが表示されることを確認しました。
あとは、リポジトリ内の「よく使う指示 ⇒ 新規作成」のプロンプトを試します。
以下のように Codexアプリ上で Remotion公式スキルをセットした上で、その後に以下のプロンプトを入力しました。
デスクトップ版 Codexアプリの紹介動画を作って
Codexアプリ上では、以下のようになります。
処理の実行後 ＋ 手動での対応
処理を実行したところ、以下のようになっていきました。
以下の一連の手順では、以下の 1つ目でエラーになったという状態でした。とりあえず以下を手動では実行できたので、原因の調査は別途行うとして、このまま手動実行をまじえた内容で進めました。
npm run voices
npm start
npm run build
そして上記を実行している中、以下のように進み、動画が出力されました。
出力された動画の確認
最後に出力された動画の確認です。具体的には以下の内容で、良い感じのやりとりができている感じかと思います。
生成された動画の長さは 1:23 くらいの時間でしたが、最後の 15秒くらいが会話のない区間になっていました。そのため、コンテンツの長さとしては、 1:08 くらいになりました。
かなり簡単な手順で上記の動画が生成でき、良い感じです！
動画で使われている画像について
動画で使われているキャラクターの画像について、今回はデフォルトのものを用いました。
作者の方の note を見ると、デフォルトで設定されているキャラ画像については、以下となるようです。
その他
利用した音声のクレジット表記
使用音声：
VOICEVOX:ずんだもん
VOICEVOX:四国めたん