Molayo

© 2026 Molayo

Qiita헤드라인2026. 05. 08. 07:37

HTML で動画を作る HyperFrames を Claude Code から動かしてみた検証メモ

요약

HyperFramesは、HTML/CSS/JavaScriptのコンポジションをヘッドレスChromeでキャプチャし、FFmpegを用いてMP4動画としてレンダリングする決定論的なフレームワークです。これはSoraのような生成AIによる動画生成とは異なり、「コードによる決定論的な映像制作」に焦点を当てています。 本検証メモでは、このHyperFramesをClaude Codeと連携させ、実際に動作させる手順を追っています。特に、スキル（Skill）のパスがCLIとエディタで異なるという問題点を発見し、シンボリックリンクを用いて解決する方法を提案しています。

핵심 포인트

  • HyperFramesはHTML/CSS/JSベースの決定論的動画レンダリングフレームワークである。
  • プロジェクト構造は`index.html`にタイムライン情報（データ属性）を記述し、GSAPなどでアニメーションを定義する。
  • 本検証では、HyperFramesとClaude Codeの連携におけるスキルパスの不一致（`.agents/skills/` vs `.claude/skills/`）を発見した。
  • 解決策として、シンボリックリンクを用いてCLIとエディタ間のパスを統一する必要がある。
  • 開発プロセスには、ライブプレビュー（ホットリロード）、静的解析（lint, validate, inspect）、そして高品質なレンダリングオプションが用意されている。

2026 年 4 月に HeyGen がオープンソース公開した HyperFrames を、Claude Code と組み合わせて動かすまでを検証したログです。

HyperFrames は、HTML / CSS / JavaScript で書いたコンポジションをヘッドレス Chrome でフレームキャプチャし、FFmpeg で MP4 にエンコードする動画レンダリングフレームワークです。生成 AI の動画生成（Sora、Kling、Veo 系）とは設計思想がまったく異なり、「コードで決定論的にフレームを作る」方向のアプローチです。

検証環境:

  • macOS / Apple M4 Pro
  • Node.js v24.13.0
  • FFmpeg 8.1.1
  • Claude Code

ドキュメントとソースから読み取れる構造:

  • 1 プロジェクト = 1 本の動画

  • ルートの index.html がメインコンポジション - data-composition-id, data-start, data-duration, data-width, data-height, data-track-index などのデータ属性で動画タイムラインを宣言 - アニメーションは GSAP タイムラインを window.__timelines[id] に登録する規約 - npx hyperframes render でヘッドレス Chrome を起動 → 指定 fps でフレームキャプチャ → FFmpeg で MP4 化
    つまり「HTML で動画を作る AI」というよりは、HTML を動画化する決定論的レンダラです。AI 連動はあくまでスキル（/hyperframes スラッシュコマンド経由）で動画オーサリングを助ける部分に留まります。

  • Node.js 22 以上（公式要件）

  • FFmpeg

  • Chrome（システムにインストールされていれば OK）

  • 推奨：Docker（--docker で再現性のあるレンダリングをしたい場合）

確認コマンド:

npx -y hyperframes@0.5.3 doctor

doctor は Node / Chrome / FFmpeg / Docker の有無と、メモリ・ディスク容量までチェックします。

mkdir -p ~/work && cd ~/work
npx -y hyperframes@0.5.3 init my-video --non-interactive --example blank
cd my-video

init した直後の構成:

my-video/
├── AGENTS.md
├── CLAUDE.md
...

package.json には次のスクリプトが定義されています:

{
"scripts": {
"dev": "npx --yes hyperframes@0.5.3 preview",
...

npx -y skills add heygen-com/hyperframes

実行するとスキル選択 UI が出ます。最小推奨セットは以下の 5 つ:

  • hyperframes — コンポジション作成全般 - hyperframes-cli — init / lint / preview / render の操作 - hyperframes-media — TTS、文字起こし、背景除去 - hyperframes-registry — 公式ブロックの取り込み - gsap — 既定のテンプレートで使われているアニメーションライブラリ
    それ以外の tailwind, animejs, css-animations, lottie, three, waapi, website-to-hyperframes, remotion-to-hyperframes は、該当ライブラリを使う場面で後から追加すれば十分です。

ここで詰まりました。

skills add 後に Claude Code を再起動しても /skills 一覧に出てこない。npx -y skills list で確認すると、スキルは確かにインストール済み:

Project Skills
gsap ~/work/my-video/.agents/skills/gsap
hyperframes ~/work/my-video/.agents/skills/hyperframes
...

原因: skills CLI が .agents/skills/ 配下にスキルを置く一方、Claude Code が読みに行くのは .claude/skills/。フォーマット（SKILL.md + frontmatter）は同一ですがパスがズレています。

解決策: シンボリックリンクで両者を繋ぐ。

cd ~/work/my-video
mkdir -p .claude/skills
cd .claude/skills
...

これで Claude Code を再起動すると /skills に 5 つ表示され、/hyperframes などのスラッシュコマンドが利用可能になりました。

skills CLI のバージョンによっては将来的に解消される可能性があります。

ライブプレビュー（ホットリロード対応のスタジオエディタ）

npm run dev

→ http://localhost:3002/#project/<project-name>

...

npm run check

でやること:

  • lint
    — data-composition-id
    漏れ、トラック重複、未登録タイムラインの検出
  • validate
    — スキーマ検証
  • inspect
    — ヘッドレス Chrome でタイムラインを走査し、テキストのはみ出しやクリッピング外の要素を検出

レンダリングは fps / quality / format オプションが選べます:

npx -y hyperframes@0.5.3 render --quality draft # 反復用、軽い
npx -y hyperframes@0.5.3 render --quality high --fps 60 # 最終納品用
npx -y hyperframes@0.5.3 render --format webm # 透過対応
...

npx hyperframes init --example blank

で生成されるテンプレートに、テキストとフェードインを足したものです:

<!doctype html>
<html lang="ja">
<head>
...

ポイント:

  • ルート div に data-composition-id="main" と data-duration="3" （3 秒）を指定 - 子要素（クリップ）にも data-start / data-duration / data-track-index を付与 - GSAP タイムラインを paused: true で作成 window.__timelines["main"] に登録（HyperFrames がこれを seek する）

paused: true を忘れると、レンダリング時にすでにアニメが進行していて再現できません。これは規約として hyperframes-cli の lint が拾います。

検証中に「複数案を見比べたい」場面で気付いたのですが、HyperFrames は1 プロジェクト 1 動画モデルです。

  • ルート index.html は必ず 1 つ - 別案を比較したい場合は別フォルダに init のするのが標準 - サブコンポジションを compositions/ 配下に置いて data-composition-src でメインから参照する仕組みはあるが、これはメイン動画の中に並べる用途で、独立動画の比較用ではない

複数案を同時プレビューするには、別ポートで複数の preview サーバーを立てます:

# ターミナル 1
cd ~/work/proposal-a && npx -y hyperframes@0.5.3 preview --port 3002
# ターミナル 2
...

色やコピーだけ変えたい場合は、data-composition-variables を使った variables 方式で 1 テンプレ複数バリアントもできます:

npx -y hyperframes@0.5.3 render --variables '{"title":"案 A","accent":"#ff5722"}'

検証して把握できた範囲。

できること

  • HTML/CSS/JS で決定論的に動画を作る（同じ入力なら毎回同じ出力。--docker でさらに厳密に） - GSAP / Anime.js / CSS アニメ / Lottie / Three.js / WAAPI と統合
  • 1920x1080 / 1080x1920 などの一般的な解像度
  • mp4 / webm / mov 出力（webm/mov は透過対応）
  • TTS（Kokoro-82M）と文字起こし（Whisper）をローカル実行で取り込み
  • variables で同テンプレを複数バリエーション量産

できないこと / 注意点

  • ARM64 Linux 環境では Chrome headless バイナリが配布されていないため、サンドボックスや arm 系 VPS ではレンダリング不可（M 系 Mac は macOS なので問題なし）

  • 「ピクセル指定の絶対配置でフル HD を組み立てる」設計なので、レスポンシブ Web の感覚で書くと噛み合わない（あくまで動画の固定キャンバスとして書く）

  • 生成 AI 動画（Sora 等）のような「プロンプトから映像を作る」ものではない。素材は自分で書く

  • 1080p/30fps で数秒の動画は M4 Pro で体感数十秒以内にレンダリング完了

  • HTML が書ければ動画が書ける、という制約と自由度のトレードオフは明確

  • Claude Code との連携はスキルパス問題さえ解決すれば実用的。スキル経由で data-* 属性のお作法を踏まえたコードが出る - バージョンや生成 AI 動画と競合する技術ではなく、プログラマブルな動画生成という別カテゴリに位置付けるのが正確

検証範囲のまとめ:

  • セットアップ:
    npx hyperframes init
    → npx skills add heygen-com/hyperframes
    → .claude/skills/
    シンボリックリンク作成、で動作 - 環境要件は満たしやすい（Node 22+ / FFmpeg / Chrome）
  • 1 プロジェクト 1 動画。複数案は別プロジェクトで並列管理
  • 生成 AI 動画ツールではなく、HTML を動画にする決定論的レンダラ

「コードで動画を量産する仕組み」が欲しい場合の選択肢として有効でした。プロンプト 1 発で映像が出てくるツールが必要なら別のサービスを検討する必要があります。

弊社のニュースサイトから最新情報をもとに 1 年のニュースをまとめて！

とお願いしたらこんな感じでした。

雑投げの 1 発クオリティでこれくらいのものが出来上がってくるのであれば、作り込めばいいものが作れそうですね。

AI 자동 생성 콘텐츠

본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.

원문 바로가기
3

댓글

0