Hacker Newsの記事がすべて動画に!生成AI×HTMLで作る高速・低コストな「Scrimba Explain」を公開
Show HN: HN.watch – Videos of all Hacker News posts
Show HN: HN.watch – Videos of all Hacker News posts
皆さん、こんにちは!Scrimba(YC S20)のファウンダー、Perです。私たちは過去10年にわたり、HTMLベースの動画形式を活用してプログラミング教育を行ってきました。今回、この技術にLLMを統合し、あらゆるトピックを解説動画に変換できる「Scrimba Explain」をリリースしました。
その技術デモとして、Hacker Newsの各投稿を動画化する「HN.watch」を公開しています。リンクをクリックすると、その場で動画が生成される仕組みです。
動画生成に拡散モデル(Diffusion Models)ではなくHTMLを用いることには、以下のような大きなメリットがあります。
動画生成が「数ドル・数分」から「数セント・数秒」の世界になれば、以下のような新しいユースケースが生まれると考えています。
技術スタックには、弊社のCTO Sindre Aarsætherが開発したオープンソース言語「Imba」を採用しています。JavaScriptにコンパイルされるため、npmやNode.0のエコシステムとも完全に互換性があります(詳細は https://imba.io/ を参照)。
また、自社開発の同期エンジン(OP)と、エージェント用のコンテキスト管理システム(Q)を組み合わせています。LLMの学習データにImbaが含まれていないため懸念もありましたが、実際には非常に高いパフォーマンスを発揮しました。スタックが非常に高密度で、宣言一つでストレージ、同期、権限、UI、AIが参照すべき情報を一元管理できるため、モデルが混乱する余地がないのが理由だと考えています。
正直に言えば、React.jsやExpress、Supabase、LangChainを使わず、すべてゼロから自作しました。「Not Invented Here(自前主義)症候群」の極みですね(笑)。モデルにはGemini、GPT、Inworld、ElevenLabsなどを活用しています。
ぜひ以下のツールから試してみてください。
詳細はドキュメント( https://docs.scrimba.com/explain/introduction )をご覧ください。また、ツールの実演動画も公開しています( https://www.youtube.com/watch?v=k6rbHmBxSEs )。
皆さんのフィードバックや、新しいアイデアがあればぜひ教えてください!
追伸:テキスト愛好家の皆さんが多いHNでこのツールを紹介するのは勇気がいりますが、若年層を中心にテキストよりも動画を好む層は確実に増えています。
頼むから、誰も hn.watch 内のこのHNアイテムのリンクをクリックしないでくれ。Googleで「google」って検索するよりも遥かに危険だから。
こういうAI解説ツールがどんどん増えてるね。5月に自分でもやってみたんだけど、モデルは悪くないもののあと一歩という感じで、かなり手間がかかったよ。Opus 5.5あたりが転換点になったのかな。
単発じゃなくて本格的にやりたい人向けにOSSフレームワークを作ったから貼っておくね:https://github.com/scosman/videowright
音声合成:アニメーションと音声を同期できる。ElevenLabsでの生成や、既存音声の書き起こしとタイムスタンプにも対応。
シーンの並び替え:コードからも、ffmpegを使った音声編集からも可能。
インタラクティブな制御:制作中に細かい修正や再生成を指示できる。
MP4エクスポート:エンコーダーも搭載。
動画生成:プロンプトから動画を作成できる(当然だけどね)。
エンジニアの視点から見るとかなりすごいよね。ただ、AI特有の単調な音声のせいで、すぐに飽きて退屈になってしまう気がする。もし動的な変化をうまく取り入れられたら、最高に素晴らしいものになると思う。
人は矛盾する感情を抱えられるものだから、自分の中の二つの気持ちを同時に認めようと思う。
技術的にはクールなプロジェクトだし、動画1本あたりのコストが驚くほど低いのもすごい。成功を祈るよ!
人に好みのメディアを選ばせるというのは良いアイデアだと思う。自分も動画派ではないんだけど、最新のブログ記事をClaudeを使って動画化してみたんだ。「簡単だろう」と思ってね。記事内のインタラクティブな図を表示したブラウザをスクリーンキャストし、タイトルを追加するように指示したら、一種の録画アプリを作ってくれたよ。結局何時間もかかったけど、次はもっと早くできるはず。手早くやってくれるならお金を払ってもいいけど、要約じゃなくてテキストの主導権は自分で持っておきたいんだ。
記事はこちら:https://vincent.bernat.ch/en/blog/2026-spanning-tree-video
Claudeが作った動画作成ツール:https://github.com/vincentbernat/vincent.bernat.ch/tree/28085c0eab7b846cb2685b288edb939267ac9f19/scratch
素晴らしい。Wordpressプラグインならうまくいくはず。パブリッシャーに記事のトップに動画を埋め込ませて、微調整や修正ができるようにするんだ。マイクロペイメントを導入してオンデマンド生成すれば、読者がより質の高い動画や「深掘りコンテンツ」にお金を払うこともできる。
これなら若い読者や読み書きが苦手な人、感覚障害のある人、外国語話者にも役立つはず。全部カバーできるね!
ちなみに、ノルウェーのオスロで新しい開発者を募集してるよ。給与はいいし、在宅やオフィス勤務の自由度も高い(ハイブリッド)。HTMLベースの動画生成を、1秒の遅延で1分あたり1セントまで落とし込めるなら、per@scrimba.com までメールして。
解説ページを作るのに新しいプログラミング言語が必要な理由がよく分からないな(実際には動画じゃないし)。
オーバーエンジニアリングじゃない?普通にJavaScriptかHTMLでやればいいのでは。
これはめちゃくちゃクールだね。
関係者じゃないけど、trymyrepo.com もすごくイケてる。似たような領域みたいだね。
あと、Museエージェントで動画を作れるスキルを作成したんだけど、かなりうまく動いたよ。この界隈は本当に熱くなってる。
最後に、この領域が好きな人はこれも楽しめるかも:(自分のプロジェクト)
「ローマ帝国の衰退の原因は何か?」というデモをクリックしてみたけど、この種のシステムに共通する不完全さがすぐに見えたよ。ポイントを視覚化しようとしても、結局どれも支離滅裂になる。グラフィックやチャートは理解を助けるどころか混乱させるし、語られている内容と矛盾することすらある。
結局のところ、こうしたシステムは何も理解しておらず空間的な推論もできないから、乗り越えられない壁があるんだと思う。視覚的な説明を謳うこれらのシステムは学習者にとって大きな足かせになるだけで、誰にも勧められないな。