HyperFrames-Gradle : AsciiDocをMP4動画に変換
公開日: 31 May 2026
二週間前に、私は開始しました。capsule-gradle— デッキを変換するプラグイン reveal.js を WebM ビデオカプセルに TTS 付きで。今日、私は新しいプラグインを追加します: hyperframes-gradle. それは capsule-gradle が行わないことをしている： AsciiDoc を 直接的に MP4 動画に変換し、reveal.js を経由せずに。
なぜこのプラグインが存在するのか、そしてそれが既存のものにどのように組み込まれるかを示します。 HeyGenのHyperFramesエンジンがコンテンツ制作パイプラインにもたらすもの
ビデオパイプラインの穴
私のドキュメンタリーパイプラインは2種類のビデオを生成します :
-
復習カプセル (capsule-gradle) — WebM でキャプチャされた reveal.js のデッキと共に
narration TTS. モジュールの復習に最適です。
-
アニメーションスライド (slider-gradle) — インタラクティブな reveal.js HTML デッキのために
対面の講師。
しかし、３番目のフォーマットが欠けています：スタンドアロン動画。
ユースケース |
現在の解決策 |
不足 |
インストラクター用スライド |
slider-gradle → reveal.js |
�✅ |
カプセルの復習 |
capsule-gradle → WebM |
✅ |
ティーザー動画 |
ない |
�❌ |
アニメーション技術デモ |
なし |
�❌ |
ドキュメントからビデオへ |
なし |
❌ |
最初のユースケースは重要です：自動的に生成するにはどうすればよいですか？ 60秒のビデオで、プロジェクトまたはモジュールを紹介し、GSAPアニメーションを使用して、 ナレーションTTS、およびバックグラウンドミュージック — すべて同じAsciiDocファイルから スライドはどうですか？
Capsule-gradleは応答できません：それには déjà reveal.jsのデッキが必要です。 slider-gradle はこのデッキをうまく生成しますが、動画レンダリングのために設計されていません。 必要だったパイプライン direct : AsciiDoc → ビデオ。
HyperFrames : エンジン
見つけたhttps://github.com/heygen-com/hyperframes[ハイパーフレーム] il y a 数日間。これはヘイゲンによって作成されたオープンソースのフレームワーク（Apache 2.0）で AIビデオのユニコーン。GitHubで22,700の星。ピッチは 文 :
HTMLを書く。ビデオをレンダリング。エージェント向けに構築。
原則：あなたは HTML を書きます（…と）`data-*`属性、あなたは参照します GSAP（または CSS、Lottie、Three.js…）のアニメーションで、エンジンがすべてを MP4 としてレンダリングします Puppeteer (ヘッドレス Chrome) + FFmpeg を介して。決定的な結果 : 同じ入力, 同じフレーム、同じビデオ。
<div id="stage" data-composition-id="intro" data-start="0" data-width="1920" data-height="1080">
<video class="clip" data-start="0" data-duration="6" data-track-index="0"
src="background.mp4" muted playsinline></video>
<h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">
Formation Docker & Kubernetes
</h1>
<audio data-start="0" data-duration="6" data-track-index="2"
data-volume="0.3" src="music.wav"></audio>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
window.__timelines = window.__timelines || {};
window.__timelines.intro = tl;
</script>
</div>HyperFrames と Remotion の違いは何ですか？React なし、 bundler、JSXはなし。AIエージェントがネイティブに書ける素のHTML。 これは私のパイプラインに まさに ぴったり合っています : planner-gradle と deepseek これは SPG/SPD プランからこの HTML を生成し、Gradle プラグインも使用できます それをMP4に変換できる
プラグインのアーキテクチャ
hyperframes-gradle すべてのプラグインと同じパターンに従います： この pattern « 独立プラグイン + コンシューマー ルート 」.
hyperframes-gradle/
├── settings.gradle.kts ← racine consommateur (dogfood)
├── build.gradle.kts ← 3 lignes : apply plugin hyperframes
├── hyperframes-plugin/ ← BUILD INDÉPENDANT
│ ├── gradlew ← son propre wrapper
│ ├── build.gradle.kts ← java-gradle-plugin
│ ├── src/main/kotlin/education/cccp/hyperframes/
│ │ ├── HyperframesPlugin.kt
│ │ ├── GenerateHyperframesHtmlTask.kt
│ │ ├── RenderHyperframesTask.kt
│ │ └── HyperframesExtension.kt
│ ├── .agents/ ← gouvernance agent
│ └── doc/
│ └── HYPERFRAMES_ARCHITECTURE.adoc
└── video.yml ← configuration dogfood4段階のパイプライン
@startuml skinparam backgroundColor #FEFEFE skinparam defaultFontSize 11 title パイプライン hyperframes-gradle rectangle "AsciiDoc ソース" as adoc #LightYellow rectangle "AsciidoctorJ" as asciidoctorj #LightBlue rectangle "HTMLハイパーフレーム\n(data-*属性)" as html #LightGreen rectangle "HyperFrames CLI (Node.js 22+)" as cli #Lavender rectangle "video.mp4" as mp4 #Gold adoc -right-> asciidoctorj : parse blocs customs asciidoctorj -right-> html : génère HTML html -right-> cli : ProcessBuilder\nnpx hyperframes render cli -right-> mp4 : Puppeteer + FFmpeg @enduml
-
AsciidoctorJ は AsciiDoc ソースを解析し、カスタム ブロックを抽出します
[hyperframes-composition], [hyperframes-track], [hyperframes-animation].
-
GenerateHyperframesHtmlTask は HyperFrames HTML を生成します とともに
`data-*`対応する属性。
-
*RenderHyperframesTask*はHyperFrames CLIを経由して呼び出す`ProcessBuilder`:
npx hyperframes render --input index.html --output video.mp4。
-
MP4は展開されます`output/`と`metadata.json`オーケストレーションのために
AsciiDoc DSL
プラグインの本当の付加価値は、AsciiDoc DSLです。ユーザー 彼は決してHTMLを書きません。彼は既存のAsciiDocドキュメントに注釈を付けます：
= Formation Docker & Kubernetes
:hyperframes-width: 1920
:hyperframes-height: 1080
:hyperframes-fps: 30
[hyperframes-composition, id="intro"]
== Introduction
Le titre apparaît avec un fondu GSAP sur fond vidéo.
[hyperframes-track, index=0, start=0, duration=6]
video::assets/background.mp4[muted, playsinline]
[hyperframes-track, index=1, start=1, duration=4]
Formation Docker & Kubernetes
[hyperframes-animation, type=gsap]const tl = gsap.timeline({ paused: true }); tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1); window.timelines = window.timelines || {}; window.__timelines.intro = tl;
docinfo属性 (:hyperframes-width:) ディメンションを設定します。 カスタムブロックは構成とトラックを定義します。ブロック `[hyperframes-animation]`生のGSAPコードを含んでいる — AIエージェントが 自然言語の説明から生成できる。
Node.js ブリッジ
唯一の技術的な摩擦ポイント：HyperFramesはNode.js/TypeScriptで実装されています、 そして私のプラグインはKotlin/JVMで書かれています。解決策は`ProcessBuilder` :
class RenderHyperframesTask : DefaultTask() {
@TaskAction
fun render() {
val process = ProcessBuilder(
"npx", "hyperframes", "render",
"--input", inputHtml.absolutePath,
"--output", outputMp4.absolutePath
)
.inheritIO()
.start()
val exitCode = process.waitFor()
require(exitCode == 0) {
"HyperFrames render failed with exit code $exitCode"
}
}
}JVMコードとNode.jsの間の結合はゼロです。契約はコマンドラインで行われます。 およびディスク上のファイル。これは同じパターンです。plantuml-gradle (PlantUML CLIを呼び出す) または`slider-gradle`（AsciidoctorJを呼び出す）。 太陽の下に新しいものは何もない — ただ新しいツールに適用されているだけだ。
2つのビデオプラグイン、2つの使い方
カプセル-gradle |
hyperframes-gradle |
出典 |
Deck reveal.js (既存のHTML) |
AsciiDoc → HTML HyperFrames |
ユースケース |
復習カプセル |
スタンドアロン説明動画 |
自然 |
スライド → ビデオ |
ドキュメント → ビデオ |
レンダリングされた |
Playwright Java → WebM |
HyperFrames CLI → MP4 |
アニメーション |
トランジション reveal.js ネイティブ |
GSAP/CSSデータ属性 |
スタック |
100% JVM (Kotlin) |
JVM + Node.js外部CLI |
彼らは互いに置き換わらない。彼らは互いに補完し合う。完全なバリューチェーン：
AsciiDoc ──→ slider-gradle ──→ deck reveal.js ──→ capsule-gradle ──→ WebM (復習カプセル)
AsciiDoc ──→ hyperframes-gradle ──→ MP4 (ビデオ スタンドアローン)
ユーザーは単一のAsciiDocファイルを書きます。slider-gradleはスライドを生成します。 capsule-gradle はレビュー用カプセルを生成します。 hyperframes-gradle は ティーザー映像と技術デモ。
ロードマップの6つのEPIC
プラグインは6つのEPICに構造化されています：
エピック |
説明 |
優先 |
HF-0 |
Bootstrap ガバナンス + アーキテクチャのフレーミング |
�✅ 終了 |
HF-1 |
Gradle スタブプラグイン + AsciidoctorJ 統合 |
P0 |
HF-2 |
Bridge CLI HyperFrames（ProcessBuilder → npx → MP4） |
P1 |
HF-3 |
DSL AsciiDoc の慣習 (ブロック、docinfo、テンプレート) |
P1 |
HF-4 |
ランナー Gradle の統合 (metadata.json) |
P2 |
HF-5 |
すぐに使えるテンプレート (title-card, code-diff, captions) |
P3 |
HF-6 |
CI + Maven Central / Gradle Portal への公開 |
P3 |
セッション000（bootstrap）は既に完了しました。セッション001はHF-1を攻撃します： Gradle プラグインのスタブと AsciidoctorJ の統合。
なぜそれが機能するのか
三つの理由：
-
HyperFramesは"built for agents" 私のパイプラインはAIエージェントに基づいています
(planner-gradle + deepseek) コンテンツを生成する. HyperFrames 受け入れる HTMLの素 — LLMが最も得意とするフォーマット。Reactはなく、 JSXについては、エージェントに学習曲線はありません。
-
*AsciiDoc DSLは自然です。 私のエコシステム全体がAsciiDocを話します。
slider-gradle, codex-gradle, training-gradle — すべてが消費している`.adoc`。 カスタムブロックを追加`[hyperframes-composition]`拡張機能です 論理的で、断絶ではない。
-
Node.jsブリッジは確立されたパターンです. JVM外のProcessBuilder,
これが私がPlantUML、Graphviz、Piperのために既にやっていることです。 HyperFramesを追加 アーキテクチャに何も変更を加えません — 外部ツールがひとつ増えるだけです Gradle から制御されています
|
パターンの本当の強みは、aucune npm の依存関係がないということです Gradleビルド。プラグインはNode.jsコードをインポートしません。それは実行します シェルコマンド。HyperFrames が進化または故障した場合、プラグインは結合されません。 — コマンドを更新するだけです。 |
結論 : 欠けているリンク
hyperframes-gradleを使って、私のビデオパイプラインは完了です。私は：
-
インタラクティブなスライド（slider-gradle）
-
これらの*復習カプセル* (capsule-gradle)
-
スタンドアロン動画 (hyperframes-gradle)
3つのフォーマット。1つのソースファイル：AsciiDoc。
次の目標はHF-1：プラグインをコンパイルして生成する 注釈が付いたAsciiDocドキュメントからの最初のHTML HyperFrames。 セッション 001はすでに構図が決まっている。
hyperframes-gradleは存在します。ガバナンスは整っています。バックログ 書かれています。 アーキテクチャは文書化されています。 プラグインが生まれました。
参考文献
-
foundry/public/hyperframes-gradle/hyperframes-plugin/doc/HYPERFRAMES_ARCHITECTURE.adoc— 詳細なアーキテクチャ
関連記事
14 May 2026