コンテンツにスキップ
console2svg

変換プロセスの全体像

console2svg は、単に端末の文字を拾って画像化するツールではありません。 オペレーティングシステム（OS）が提供する擬似端末（PTY）を立ち上げて子プロセスを実行し、出力されるバイト列を端末エミュレーターで解釈して仮想画面を構築したうえで、高度に最適化された SVG やラスタ画像、動画、Web ストリームへと変換します。

この一連の工程は、データの重複排除と忠実な視覚再現を両立させるため、複数の明確なパイプラインステージに分割されています。

[子プロセス実行 / リプレイ入力]
         │ 生の VT バイト列
         ▼
[ステージ 1: 入力取得とストリーム制御]
         │ コアレッシング済みイベント列
         ▼
[ステージ 2: 端末エミュレーションと構文解析]
         │ 仮想画面バッファ (ScreenBuffer)
         ▼
[ステージ 3: 機密情報の検出と秘匿化]
         │ マスク処理済みセルグリッド
         ▼
[ステージ 4: SVG 階層構造化と描画最適化]
         │ ベクターマークアップ
         ├─► [ステージ 5A: 静止画 / アニメーション SVG]
         ├─► [ステージ 5B: 高速ラスタライズ / 動画エンコード]
         └─► [ステージ 5C: リアルタイム Web 配信]

パイプラインの各ステージ

Section titled “パイプラインの各ステージ”

変換プロセスは、大きく 5 つのステージに分かれています。

ステージ 1: 入力取得とストリーム制御

Section titled “ステージ 1: 入力取得とストリーム制御”

画面を忠実に再現するための第一歩は、子プロセスの出力を欠落なく、かつ正確なタイミングで取得することです。

  • PTY の起動、制御、出力取得: Windows の ConPTY や Unix 系の PTY を抽象化し、マルチバイト文字の境界分断を防ぎながら、時間的に近接した出力をコアレッシング（束ねる処理）して後段への負荷を軽減します。
  • キーボード操作のリプレイ再現: 記録されたキーイベントのタイムスタンプを正規化し、実端末と同じ VT エスケープシーケンスをリアルタイムに再合成して決定論的な再現実行を行います。

ステージ 2: 端末エミュレーションと構文解析

Section titled “ステージ 2: 端末エミュレーションと構文解析”

受信したバイト列はプレーンテキストではなく、画面クリアや色変更を指示する制御命令（エスケープシーケンス）を含んでいます。

  • エスケープシーケンスの解析とバッファ更新: 有限状態機械によって CSI、OSC、SGR 等の ANSI シーケンスを構文解析し、全角文字の列幅やカーソル位置を管理しながら 2 次元の仮想画面バッファ（ScreenBuffer）を構築します。
  • 特殊文字・罫線・ブロックの描画処理: フォント依存で隙間が空きやすい罫線文字（ボックス描画文字）やブロック要素をベクター幾何パスへと変換し、滑らかな接続や角丸曲線を再現します。

ステージ 3: 機密情報の検出と秘匿化

Section titled “ステージ 3: 機密情報の検出と秘匿化”

公開用ドキュメントや動画を作成する際、API キーや個人情報が画面に映り込む事故を防ぐ必要があります。

ステージ 4: SVG 階層構造化と描画最適化

Section titled “ステージ 4: SVG 階層構造化と描画最適化”

仮想画面のセル情報を、Web 標準の SVG マークアップへ変換します。 1 セルごとに要素を出力すると巨大なファイルになってしまうため、徹底的な構造化と最適化を施します。

  • SVG のレイヤー構造と座標系: ウィンドウ枠、影、背景色、テキストを独立したレイヤーに分離し、統合された文字グリッド座標系のもとで組み立てます。
  • 変換パイプラインの最適化: コピーオンライトによるメモリ共有、XxHash3 による行シグネチャの差分更新、連続セルの矩形・パス結合により、ファイルサイズと描画負荷を最小限に抑えます。

ステージ 5: 用途に応じた最終出力

Section titled “ステージ 5: 用途に応じた最終出力”

最適化された画面構造は、コマンドの実行形態や出力形式に応じて最終的な成果物へと展開されます。

  • SMIL によるアニメーション SVG 生成: 重複する画面行を一意化して <defs> 内にカタログ化し、離散表示の SMIL アニメーションと行差分を組み合わせて軽量な動的 SVG を出力します。
  • resvg による PNG ラスタライズ: Rust 製の高速レンダラーを C ABI 経由でプロセス内に直接埋め込み、OS のフォント走査結果をキャッシュしてミリ秒単位で PNG 画像へ変換します。
  • ffmpeg パイプラインによる動画生成: 単一エミュレーターによる高速な順方向サンプリング、SVG・PNG の二段キャッシュ、並列ラスタライズ、および image2pipe ストリーミングにより、中間ファイルを介さず高速に MP4 や WebM をエンコードします。
  • live-server の配信アーキテクチャ: 組み込みの HTTP/SSE サーバーにより、三層レイヤー分離とクライアント側 rAF コアレッシングを用いて、低遅延かつ低負荷に端末画面をブラウザへリアルタイム中継します。

各工程の詳細な内部仕様や実装の工夫については、上記の各ドキュメントを参照してください。