0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kai_kou(甲斐 甲)

HyperFrames入門 — HTMLからMP4を生成するエージェントOSS

0
Posted at

はじめに

HeyGenが2026年4月17日にオープンソース公開した HyperFrames は、HTMLを記述するだけでMP4動画を生成できるフレームワークです。

最大の特徴は「エージェントネイティブ」設計。Claude Code、OpenAI Codex、Cursorといった AI コーディングエージェントが自然に理解できる HTML/CSS/JavaScript で動画コンポジションを記述し、コマンド1発でMP4に変換します。

この記事では HyperFrames の仕組み・インストール方法・CLI コマンド・AI エージェント統合まで、公式ドキュメントをもとに解説します。

この記事で学べること

  • HyperFrames がどういう仕組みで動作するか
  • インストールから最初の動画レンダリングまでの手順
  • 主要 CLI コマンドの使い方
  • Claude Code・Codex・Cursor との統合方法

対象読者

  • AI エージェントを使って動画生成を自動化したいエンジニア
  • Remotion・Lottie等の代替を探している開発者
  • HTMLとJavaScriptが分かる方

前提環境

  • Node.js 22 以上
  • FFmpeg（インストール済み）
  • Claude Code または他のAIコーディングエージェント（オプション）

TL;DR

  • HyperFrames は HTML/CSS/JS でコンポジションを書き、npx hyperframes render でMP4に変換するOSS
  • エージェント向け設計：npx skills add heygen-com/hyperframes 1コマンドでClaude Codeに統合完了
  • Apache 2.0ライセンス。ランニングコストなし
  • GSAP / Lottie / CSS / Three.js のアニメーションランタイムに対応
  • 50以上の既製コンポーネント（ソーシャルオーバーレイ・トランジション・データビズ等）

HyperFrames の仕組み

HyperFrames のレンダリングパイプラインは以下のステップで動作します。

  1. HTML コンポジション作成: data-* 属性でタイムラインを定義したHTMLを記述
  2. ヘッドレスブラウザ実行: Chrome をヘッドレスモードで起動してページをロード
  3. フレームキャプチャ: GSAP タイムラインを1フレームずつ進めながらスクリーンショットを取得
  4. FFmpeg エンコード: キャプチャしたフレーム列をFFmpegでMP4/MOV/WebMに変換

従来の動画編集ツール（After Effects・Premiereなど）と異なり、コードで動画を定義するため、AIエージェントがそのまま動画を「書ける」設計になっています。

Frame Adapter パターン

HyperFrames は複数のアニメーションランタイムをサポートする「Frame Adapter」パターンを採用しています。

ランタイム 用途
GSAP モーショングラフィクス・高度なアニメーション
Lottie JSON ベースのベクターアニメーション
CSS Transitions シンプルなフェードイン・スライド
Three.js 3D グラフィクス

インストールと初期セットアップ

システム要件の確認

# Node.js バージョン確認（22以上が必要）
node --version

# FFmpeg の確認
ffmpeg -version

プロジェクト初期化

# インタラクティブモードでプロジェクトを作成
npx hyperframes init my-video

# サイレントモード（CI/CD向け）
npx hyperframes init my-video --non-interactive --example blank

# 既存の動画ファイルを元に初期化（自動文字起こし付き）
npx hyperframes init my-video --example warm-grain --video ./intro.mp4

環境チェック

# 必要な依存関係をまとめて確認
npx hyperframes doctor

doctor コマンドを実行すると、Node.js バージョン・FFmpeg・Chrome の有無などを一括チェックしてくれます。

コンポジションの構造

HyperFrames のコンポジションは通常の HTML ファイルです。data-* 属性でタイムライン情報を付与します。

基本構造の例

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"></script>
</head>
<body>
  <!-- ルートコンポジション要素 -->
  <div
    data-composition-id="intro"
    data-width="1920"
    data-height="1080"
    data-start="0"
  >
    <!-- クリップ要素 -->
    <div
      class="clip"
      data-start="0"
      data-duration="3"
      data-track-index="0"
      id="title-clip"
      style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
    >
      <h1 style="font-size: 80px; color: #3B82F6;">Hello, HyperFrames!</h1>
    </div>
  </div>

  <script>
    // GSAPタイムラインを paused: true で作成し window.__timelines に登録
    const tl = gsap.timeline({ paused: true });
    tl.from("#title-clip", { opacity: 0, y: 30, duration: 1 });
    window.__timelines = [tl];
  </script>
</body>
</html>

主要なデータ属性

属性 対象要素 説明
data-composition-id ルート コンポジションの一意ID
data-width / data-height ルート 解像度（ピクセル）
data-start ルート・クリップ タイムライン上の開始位置（秒）
class="clip" クリップ フレームキャプチャ対象マーカー
data-duration クリップ クリップの長さ（秒）
data-track-index クリップ レイヤー順序

注意: GSAP タイムラインは必ず { paused: true } で生成し、window.__timelines 配列に登録してください。HyperFrames はこの配列を参照してフレームを順次進めます。

CLI コマンドリファレンス

プレビューとレンダリング

# ライブプレビューサーバーを起動（ホットリロード対応）
npx hyperframes preview --port 3002

# コンポジションをリント（問題チェック）
npx hyperframes lint --verbose

# キーフレームのスナップショットを取得
npx hyperframes snapshot --frames 5

# MP4にレンダリング
npx hyperframes render

# オプションを指定してレンダリング
npx hyperframes render \
  --output ./output/my-video.mp4 \
  --format mp4 \
  --fps 60 \
  --quality high \
  --workers 4

レンダリングオプション

オプション デフォルト 説明
--format mp4 出力形式（mp4 / webm / mov）
--fps 30 フレームレート（24 / 30 / 60）
--quality standard 品質（draft / standard / high）
--workers 4 並列レンダーワーカー数（最大8）
--gpu - GPU エンコード有効化（NVENC等）
--docker - Docker で決定論的レンダリング

コンポーネント管理

# レジストリから既製コンポーネントを追加
npx hyperframes add social-overlay

# コンポーネント一覧をブラウズ
npx hyperframes catalog --type component --tag social

# プロジェクト内のコンポジション一覧
npx hyperframes compositions --json

音声・字幕関連

# 動画/音声ファイルを文字起こし（Whisperモデル使用）
npx hyperframes transcribe --model medium.en --language en

# テキストから音声生成（Kokoro-82Mモデル）
npx hyperframes tts --output narration.wav --voice af_heart --speed 1.0

# 対応言語の確認
npx hyperframes tts --list

ウェブサイトキャプチャ

# ウェブサイトのスクリーンショット・デザイントークン・フォントを取得
npx hyperframes capture https://example.com --max-screenshots 24

AI エージェントとの統合

HyperFrames の最大の特徴は、AI コーディングエージェントへのシームレスな統合です。

Claude Code への統合

# Claude Code に HyperFrames スキルを追加
npx skills add heygen-com/hyperframes

このコマンドを実行すると、Claude Code に3つのスラッシュコマンドが登録されます。

スラッシュコマンド 用途
/hyperframes コンポジション作成・編集の支援
/hyperframes-cli CLIコマンドの実行支援
/gsap GSAPアニメーション実装の支援

スキルが登録されると、Claude Code は HyperFrames のデータ属性・タイムライン構造・レンダリングパラメータを文脈として持つため、初回プロンプトから正確なコンポジションを生成できます。

他のエージェントへの統合

# Gemini CLI への統合
npx hyperframes skills --gemini

# OpenAI Codex CLI への統合
npx hyperframes skills --codex

# Cursor への統合
npx hyperframes skills --cursor

エージェント向けプロンプト例

Claude Code に /hyperframes スキルを追加した後は、以下のような指示が可能です。

/hyperframes 製品紹介動画を作成して。
- 解像度: 1920x1080
- 長さ: 10秒
- 内容: ロゴのフェードイン → テキストスライドイン → CTAボタン表示
- カラー: #3B82F6 (blue) ベース

エージェントがHTMLコンポジションを生成したら、そのまま npx hyperframes render でMP4に変換できます。

最適設定の調査

システムに最適なレンダリング設定を見つけるには benchmark コマンドが便利です。

# 最適設定をベンチマーク
npx hyperframes benchmark --runs 5

複数の品質・FPS・ワーカー数の組み合わせを自動テストし、最速構成を提案します。

まとめ

HyperFrames は「HTML を書けば動画になる」というシンプルな思想で設計されたOSSフレームワークです。

  • エージェントネイティブ: AIエージェントが最も得意とするHTMLを入力形式に採用
  • 柔軟なアニメーション: GSAP・Lottie・Three.js 等のランタイムに対応
  • 豊富な既製コンポーネント: 50以上のブロックですぐに高品質な動画を作成可能
  • Apache 2.0: 商用利用・改変・再配布が自由

AI エージェントによる動画生成自動化のユースケースとして、今後の活用が広がりそうな技術です。

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?