スクリーンショットと視覚検証

データの再取得、実際の描画画像、スライドのレイアウト検査を組み合わせます。

視覚検証は内容モデルを画像とレイアウトの証拠に変換します。Agent は値と数式を確認した後、実際に描画された文字、図形、ページを確認し、Facade で修正して新しい状態を再検証できます。

3 種類の証拠

証拠確認できること
構造化された読み戻し生の値、数式と結果、段落、属性。
PNG表示内容、切り取り、グラフ、色、構図。
レイアウト診断描画された幾何から規則、ID、境界、問題位置を得て修正を絞る。

内容状態と依存関係を準備する

Screenshot と Layout Lint は物化済み UnitData を受け取り、リモート target 接続や changeset 解釈はしません。共同編集では pull() し、数式変更の計算適用を待って exportUnitData() します。Worktree は該当草稿を使い、アプリは target、revision、範囲を報告に記録できます。

主 Snapshot にすべての依存は入りません。formulaReferenceUnits に Sheet/Relational Table の数式ソース、embeddedUnits に子 Unit を渡します。Render Page は依存を先に物化します。UUID 画像は resolveUnitScreenshotImageAssets() とアプリの resolver で解決できますが best-effort のため不足資源を確認してください。

内容から安定した画像へ

100%

univer-render-runtime が Node.js でアプリの Render Page を配信してブラウザーを起動し、製品プラグインが内容を復元します。双方はプロトコル版を検証します。操作は Runtime ごとの直列キューに入り、再利用後は所有者が close() します。

準備条件は製品ごとに異なります。数式 Shape は pending を離れるのを待ち、必要なら複数フレームの画素安定も待ちます。Relational Table はフォント、計算、活動中 table/view、DOM/Canvas の安定を確認します。pending でなくても数式エラーの場合があるため値と状態も検証します。

現在の実装は主 UnitData、数式ソース、埋め込みデータを直列化してハッシュを生成します。同じ Unit ID でも内容が変われば別セッション key となり、ID だけによる古い画像の再利用を防ぎます。

製品ごとの範囲

製品範囲と出力
Sheetワークシートと A1 範囲を指定した PNG。重要部分は明示選択する。
Docページの選択または列挙による個別 PNG。
Slide1 始まりのページ番号または page ID。contact sheet も生成可能。
Relational Table起動後の活動中テーブル/ビューを DOM + Canvas で撮影。
Canvases内容全体、または排他的な region / elementIds。padding とレイアウト証拠に対応。

unit-screenshot は bytes、寸法、ページ/範囲識別子、推奨名を返し、アプリが保存します。Scale は 0.1–4、maxPages と画像単位の maxPixels を設定できます。倍率 2 倍は約 4 倍の画素となるため大きな内容は範囲分割します。PDF はこの 5 製品の入口に含まれません。

スクリーンショットと Lint の共通入力

同じ Slide データと数式ソースに対して撮影と Layout Lint を行う例です。renderRuntime は作成済み、slideData は準備済みのスナップショットです。機能自体はファイルを保存しません。ページ構築と終了処理は AI SDK 視覚検証を参照してください。

TypeScript
import { createUnitScreenshot } from '@univer-cli/unit-screenshot'import { createUnitLayoutLint } from '@univer-cli/unit-layout-lint'const source = {  unitType: 'slide' as const,  unitData: slideData,  formulaReferenceUnits,}const screenshot = createUnitScreenshot({ runtime: renderRuntime })const lint = createUnitLayoutLint({ runtime: renderRuntime })const capture = await screenshot.capture({  ...source,  target: { kind: 'slide-pages', pages: [1], scale: 2 },})const report = await lint.lint({ ...source, pages: [1] })

Slide:字形の墨跡で問題を特定する

Layout Lint はブラウザーのレイアウト事実を使います。declared はモデルの宣言枠、ink は文字の実際の墨跡を配置、整列、回転と共にページ座標へ変換した境界です。文字枠が収まっていても字形が収まるとは限りません。

現在の規則検証内容
text-off-page文字 ink がページを超える。
text-escapes-container文字が対応する小さな不透明コンテナーを明確に超える。
text-overlaps-text2 つの文字 ink が大きく重なる。

coverage.pages と coverage.rules が検証範囲を示します。Finding は pageId、要素 id、text.ink と該当する overflow、container、other を持ち、安定した fingerprint で修正前後を比較できます。現在はすべて warning で、画像と併せて確認します。空リストは選択範囲で規則が発火しなかったことだけを示します。

Canvases:描画済みコネクター経路を確認する

Canvases 撮影は layoutAnalysis としてブラウザーで解決した routes、issues、summary を返します。Slide 限定の unit-layout-lint とは別です。モデルで自動経路が未解決なら、source: 'rendered' で最終経路を確認します。

要素を横切る線、交差、矢印やラベルの衝突に対し、connectorIds、elementIds、focusBounds が返ります。対象を修正して region または elementIds で局所撮影し、全体も再確認できます。視覚的な問題を具体的な Facade 編集へ結び付けます。

証拠を引き渡す

100%

構造化結果、範囲・ページ情報、画像、診断を一緒に保存します。画像は数式の正しさを証明せず、Lint は目視確認を置き換えません。ツールバー、フォーカス、ポップアップは Web エディターで確認し、Unit 間依存の読み込みも検証します。

Worktree を Ready にする前に検証し、内容差分と証拠を対応させます。実行はヘッドレスとサーバー計算、編成は Agent と自動化を参照してください。

機能一覧に戻る

このガイドはいかがですか?

© 2026 DreamNum Co., Ltd.