CIビデオパイプライン向けに図解スライドを構築して学んだこと
最近、自動化されたYouTube動画パイプラインに図解やチャートを追加しました。
最も重要な教訓はシンプルです。まず、すべてをPNGファイルとして事前レンダリングすることです。
ビデオエンジン内やffmpeg経由でビジュアルを生成しようとしないでください。代わりに、共有のPNG受け渡し（handoff）を使用してください。これにより、パイプラインのあらゆる部分がテスト可能になり、交換も容易になります。
以下に、構築方法とその過程で学んだことをまとめます。
アーキテクチャ
私のパイプラインは2ホスト構成を採用しています。一方のホストはビジュアルとオーディオを処理し、もう一方のホストはffmpegを使用してすべてを動画に結合します。
ffmpegはJavaScriptを実行したりブラウザを呼び出したりできないため、異なるツール間のギャップを埋める必要がありました。
• Mermaid（フローチャート用）はPuppeteerとChromium経由で実行されます。 • Matplotlib（チャート用）はPython経由で実行されます。 • Pillow（スライド用）は画像上に直接描画します。
これらのツールは直接通信できないため、単一のパターンを使用しています。つまり、PNGにレンダリングし、そのPNGをPillowのキャンバスに貼り付けるという方法です。2つのパスを作るよりも、1つのパスにまとめる方が優れています。
主な技術的教訓
1. Chromiumの設定
GitHub Actionsで実行する場合、特定のフラグを使用しないとChromiumは失敗します。--no-sandboxと--disable-setuid-sandboxを含める必要があります。これらがないと、コンテナがプロセスをブロックしてしまいます。
2. Mermaidのテーマ設定
カスタムカラーを使用したい場合は、組み込みの「dark」や「forest」テーマを使用しないでください。それらのテーマは設定を上書きしてしまいます。「base」テーマを使用してください。これが、カスタムパレットを確実に機能させる唯一の方法です。
3. Matplotlibの背景設定
チャートをスライドの背景に合わせるのは一筋縄ではいきません。以下の3つのことを行う必要があります。
pyplotをインポートする前にmatplotlib.use("Agg")を呼び出す。- figureとaxesの両方の
facecolorを設定する。 - ファイルを保存する際、
bbox_inches="tight"を使用して白い境界線を取り除く。
4. 信頼性とフェイルセーフ
図解が欠けていても、動画のビルド全体が止まってしまうべきではありません。私はエラーをキャッチする仕組みを構築しました。レンダリングに失敗した場合、パイプラインは単に「visual unavailable（ビジュアル利用不可）」というプレースホルダーを表示します。動画自体は完成します。これにより、一部が失敗してもコンテンツを確認することができます。
トレードオフ
事前レンダリングは時間を要します。Mermaidの図解1つにつき、レンダリングに約2〜4秒かかります。20セグメントの動画の場合、全体のビルド時間に約20秒が追加されます。私のニーズにおいては、システムの安定性と引き換えにする価値のあるコストです。