ビデオ コンテンツカード追加 は何をしますか？
承認されたセマンティックモーメントを、1つの一貫したHyperFramesグラフィックスオーバーレイに変換します。共有エビデンスと正規のタイムラインを使用し、このスキル内でソースの書き起こしや再分析を行わないでください。
依存関係
/video-understand は前提条件です。最初に実行し、カードが検証済みのセマンティックエビデンスと正規のタイムラインを使用するようにします。
開始する前に、これがインストールされていることを確認してください。インストールされていない場合は、この前提条件がないことをユーザーに警告し、メディアを処理する前に停止します。
PATHに ffmpeg、Python、Node.js >= 22（npx hyperframes 用、オンデマンドでフェッチ）が必要です。hyperframes render/snapshot はヘッドレスChromeを駆動します — 自身の chrome-headless-shell を管理し、キャッシュされたものが使用できない場合はシステムのChromeにフォールバックします（CHROME でオーバーライド可能）。メディアを処理する前にこれらを確認してください。
入力
work/project.json: 操作のリビジョンと依存関係work/understand/understanding.json: レビュー済みのセマンティックモーメントとエビデンスwork/timeline.json: ソースからプログラムへのマッピング、またはカットがない場合のアイデンティティタイムライン- オプションで、コントラストやパレットがそのルックに対して判断される場合の、選択されたカラ―グレードのリビジョン
このスキルは、カットやカラ―グレードがなくても有効です。キャプションがアクティブな場合は、最初にキャプションを実行し、それらの現在のリビジョンに依存し、占有領域をハードな排他ゾーンとして扱います。コンテンツカードは、両方がアクティブな場合、グラフィックモーションよりも前に行う必要があります。これらの相対ルールは、選択されたすべてのペアに適用されます。実際に消費した依存関係のみを宣言し、それらの現在のリビジョンを based_on に記録します。
すべてのプライマリまたはフォアグラウンドの人物、話者、プレゼンター、インタビュイー、または意味的に重要な人物の、可視の顔と頭部のシルエットを、カードの完全なキュー全体（入場と退出を含む）にわたってハードな排他ゾーンとして扱います。物語や視覚の焦点ではない、偶発的な背景のみの人物は除外されます。不確実なケースは保護します。カードが保護された顔や頭部と交差する場合は、最初にカードを再配置し、次にスケール変更または再設計します。準拠する配置がない場合は、カードをスキップします。
作業ファイル
work/content-cards/cards-plan.json # 永続的な編集計画
work/cache/content-cards/index.html # コード＝編集のコンポジション
work/cache/content-cards-overlay.mov # 透明レンダリングのコントリビューション
review/03-content-cards/card-stills/ # カードごとに1つの有用な静止画
review/03-content-cards/content-cards-preview.mp4 # オプションの短いキュ―ウィンドウ
review/03-content-cards/content-cards-summary.md
review/03-content-cards/content-cards-review.html # ローカルの候補レビューボード
review/03-content-cards/content-cards-review-assets/ # 候補ごとに1つのソースフレーム
review/03-content-cards/content-cards-review.json # 検証済みの人間の選択
再利用可能なレビューページは skills/video-add-content-cards/assets/content-cards-review.html にコミットされています。
生成されたHTML、スクリーンショット、オーバーレイ、プレビューレンダーは再現可能です。
計画は cache/ の外側に保持します。これは、work/cache/ を削除した後に使い捨てのHTMLとアルファアセットを再生成するために必要な、すべての可視文字列、タイミング、配置、ビジュアル処理値、レンダラーコンポジションパス、レンダラーアセットパス、ソースFPSを含んでいる必要があります。ソースの例/テンプレート、コンポジション出力パス、レンダーエンジン、およびすべてのローカルランタイムアセットの出力パス、正確なバージョン、オリジン、SHA-256を指定して、1つの計画レベルの renderer_recipe を記録します。永続的なレシピがないキャッシュされたHTMLファイルまたはダウンロードされたスクリプトでは、再生成条件を満たしません。
ワークフロー
1. ドラフト前のインタビュー
最初に understanding.json とアクティブなタイムラインを読みます。対象となるグラフィックモーメントをカウントし、インタビュー前に推奨カード数を計算します：
min(対象モーメント数, max(1, round(プログラム分数 / 0.75)))
これは目標であり、自動的な切り捨てルールではありません。質問をする前に、現在のOSのネイティブコマンドを使用して、実際のアニメーション例を自分で開きます。以下のうち正確に1つを実行します：
# Windows PowerShell
Start-Process (Resolve-Path 'skills/video-add-content-cards/examples/gallery-animated.html')
# macOS
open skills/video-add-content-cards/examples/gallery-animated.html
# Linux デスクトップ
xdg-open skills/video-add-content-cards/examples/gallery-animated.html
コマンドが失敗した場合は、診断して再試行します。このアクションをURIに置き換えたり、ユーザーにファイルを見つけてクリックするように依頼したりしないでください。ギャラリーは6つのテーマすべてを比較し、ネイティブのピッカーで1つの列にフォーカスできます：
| テーマ | 開始キャラクター |
|---|---|
almanac | 温かみのあるクリーム、セリフ、考慮された |
teal | ダークな放送、シアンアクセント |
editorial | ドキュメンタリー、インクとアンバー |
dotgrid | ピクセルモノ、テクニカル |
apex | ハイエナジースポーツ、赤アクセント |
air | 透明なLexendタイポグラフィ、バッキングプレートやスクリムなし |
次の順序で、一度に1つの質問をします：
- この編集ではどのテーマを使用しますか？
- この編集では目標カード数をいくつにしますか？計算された推奨値をデフォルトとして提供します。
- どのカードタイプを含める必要がありますか？
intro、key-quote、stat、list、outroを提供し、デフォルトはなしとします。
各質問の後に 提示 + 停止 します。3番目の回答の後、テーマ、目標数、必須タイプ、およびユーザー提供のメモを要約し、確認を求めます。ユーザーがキャンセルした場合は、分析を保持し、操作を draft のままにし、カードを作成またはレンダリングしないでください。
2. 共有理解からカードをドラフト
python skills/video-add-content-cards/scripts/build_cards_plan.py `
work/understand/understanding.json `
work/timeline.json `
work/content-cards/cards-plan.json `
--target-card-count 6 `
--theme editorial `
--must-include-type stat `
--notes "製品名はそのまま保持"
スクリプトは保持されたセマンティックモーメントをプログラム時間にマッピングし、カットによって削除されたモーメントを除外します。ソース範囲とエビデンス参照を保持し、期間を含むクリップにクランプし、コピー/配置/ビジュアル処理を draft としてマークします。stat は metric-spotlight で開始し、list は side-by-side で開始します。候補レビューでは通常のレイアウトを維持するか、リストを parallel-columns に切り替えることができます。
確認されたインタビューは cards-plan.json に brief として保存されます。複数の値に対して --must-include-type を繰り返します。適用されないフラグは省略します。古いオプションのブリーフフィールドは互換性のために受け入れられますが、通常のインタビューの一部ではありません。
3. 編集上の選択を行う
各カードの時間でエビデンスを読みます。ASRの名前と数値を修正し、弱い候補を削除し、簡潔なコピーを書き、保護された顔、可視の頭部シルエット、キャプションを避ける配置を選択し、ビジュアル処理を承認します。アナライザーのテキストを最終コピーとして扱わないでください。
すべてのオンスクリーンコピーは copy.display（例：eyebrow、title、detail）の下に保存し、要約や提案されたタイトルだけではありません。placement.face_clearance は、上記の保護された顔と頭部の定義に対して合成された静止画をレビューした後にのみ verified に設定し、その静止画のプロトコル相対パスを placement.review_still に保存します。HyperFramesコンポジション、アルファアセット、および正確な有理FPSを renderer の下に保存します。
次のマッピングを開始点として使用します：
| セマンティック種類 | カードタイプ |
|---|---|
| hook | intro |
| key-point, quote, question | key-quote |
| stat | stat |
| list | list |
| cta | outro |
repetition、tangent、risk は編集上のエビデンスであり、自動的なカードではありません。
5つの標準カードタイプを保持します。新しいトップレベルのカードタイプを作成する代わりに、以下のオプションのレイアウトを visual_treatment.layout に保存します：
| 標準カードタイプ | 許可されるレイアウト |
|---|---|
stat | default、metric-spotlight、bar-chart、pie-chart、line-chart |
list | default、side-by-side、parallel-columns |
metric-spotlight は、1つのエビデンスに裏付けられた数字、パーセンテージ、金額、倍数、年、期間が強調に値する場合にのみ使用します。その数字を簡潔な上部と下部のコンテキストの間に配置し、長い値を重なりなく収め、数字をそれらのラベルの間で視覚的に中央に保ちます。side-by-side または parallel-columns は、2〜4つの短い並行、対照、対立、または対応する概念に使用します。短いフレーズを好みます。レビューを使用して、利用可能な映像に適合し被写体を避ける方向を選択します。
グラフは、保持されたトランスクリプトが完全な、エビデンスに裏付けられたデータセットを提供する場合にのみ使用します。グラフデータを作成する前に reference/chart-data.md を読みます。ディメンション、メトリック、単位、期間、順序付けられたポイント、および各ポイントのトランスクリプトエビデンスを data の下に手動で保存します。アナライザーの要約から値を推測したり、異なるビデオのポイントを組み合わせたりしないでください。bar-chart は2〜6の比較可能なカテゴリに、pie-chart は証明された全体の相互に排他的な部分に、line-chart は3〜8の意味のある順序のポイントに使用します。必要な値、ラベル、分母、時間順序、または単位がない場合は、metric-spotlight、通常のstatカード、またはカードなしを使用します。グラフレイアウトの場合、長い説明を意味を変えずに簡潔な補足コピーに圧縮します。グラフは主にキー値とその変化または関係を伝えるべきです。グラフにすでに表示されている値、ラベル、期間、または単位を列挙または再述しないでください。
この段階では、エビデンスに裏付けられたすべての候補を保持します。ブリーフの目標カード数を目指しますが、エビデンスがそれを正当化する場合、より強いまたはより少ないセットを許可します。
4. 候補の選択をレビューして適用
候補計画が存在した後、プロジェクト固有のブラウザレビューを生成します。ソースビデオを計画の source_range とアクティブなタイムラインに合わせて渡します。スクリプトは各エビデンスの中間点を保持されたクリップにクランプし、コミットされたテンプレートに候補ごとに1つの対応するソースフレームを設定します：
python skills/video-add-content-cards/scripts/build_review_page.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.html `
--video input/source.mp4 `
--timeline work/timeline.json `
--captions-plan work/captions/captions-plan.json
プロジェクトにアクティブなキャプション操作がない場合は --captions-plan を省略します。アクティブなキャプション計画がある場合、レビューフレームはその実際の占有領域（上部、中央、または下部）を示します。
設定されたレビューをすぐに、現在のOSのネイティブコマンドを使用して自分で開きます。以下のうち正確に1つを実行します：
# Windows PowerShell
Start-Process (Resolve-Path 'review/03-content-cards/content-cards-review.html')
# macOS
open review/03-content-cards/content-cards-review.html
# Linux デスクトップ
xdg-open review/03-content-cards/content-cards-review.html
コマンドが失敗した場合は、診断して再試行します。ユーザーにファイルを見つけるように依頼しないでください。ページは各ソースフレーム、カードID、プログラム時間、編集可能なコピー、ビジュアル処理、配置を表示します。グラフレイアウトは、編集可能な構造化データとポイントエビデンス参照も表示します。承認する前に、すべての値を表示されたエビデンスに対してレビューします。
すべての候補は未選択で開始し、配置は bottom に設定されます。配置を変更すると、灰色のカードプロキシが実際のフレーム上に移動し、承認前に衝突リスクが表示されます。ユーザーはカードを選択し、コピーを編集し、処理と配置を選択し、[サマリーをコピー] をクリックし、表示されたサマリーを会話に貼り付けます。
提示 + 停止。 貼り付けられた選択サマリーを待ちます。未確認のドラフト候補からHTMLを作成しないでください。サマリーを review/03-content-cards/content-cards-review.json に変換します：計画カードごとに1つのエントリを書き、選択されたIDを選択されたコピー、ビジュアル処理、配置でマークし、その他すべてのIDを未選択として現在のドラフトコピーと空の配置でマークします。レビューの選択を visual_treatment という文字列フィールドとして保存します。次に、検証済みのレビューを適用します：
python skills/video-add-content-cards/scripts/apply_cards_review.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-review.json
適用ステップは、未知、重複、または欠落しているカードID、空白の選択されたコピー、無効な配置、および標準カードタイプと互換性のない処理を、計画を変更せずに拒否します。成功した場合、選択されたカードを保持し、それらのコピー、配置、ビジュアル処理、およびトップレベルのレビューを approved としてマークします。続行する前に、結果の選択数をブリーフ目標と照らし合わせて読みます。
選択されたグラフレイアウトの場合、適用ステップは完全な構造化データも検証し、data.status を承認としてマークします。無効な選択されたグラフは、計画がコピーされる前にレビュー全体を拒否します。グラフ以外のレイアウトを選択すると、未使用のドラフトグラフデータが削除されます。適用後、顔とキャプションのクリアランスは、実際の合成フレームに対してコンポジションがチェックされるまで保留されます。
5. 1つのHyperFramesコンポジションを作成
1つの index.html と一時停止したGSAPタイムラインを使用します。承認された各カードは、計画の program_start_s と duration_s によってキー付けられた1つの .clip になります。モーションをシーク可能に保ち、タイミングをウォールクロックタイマーではなくデータ属性から導出します。
グラフキューの場合、その一時停止したタイムラインを通じて絶対コンポジション時間でアニメーションします。バーは1つのゼロベースラインから表示されます。円グラフの扇形はポイント順に表示され、ジオメトリは値に比例します。ラインパスはポイントが表示される前にX軸順に描画されます。ソース相対サイズ設定と固定レイアウトボックスを使用して、シーク、ラベル、動的な値がレイアウトジャンプを引き起こさないようにします。推奨期間はバーと円で5〜6秒、ラインで6〜8秒で、常に保持されたクリップにクランプされます。
最も近いリポジトリの例から開始します：
examples/index-almanac.htmlexamples/index-apex.htmlexamples/index-dotgrid.htmlexamples/index-editorial.htmlexamples/index-teal.htmlexamples/index-air.html
すべてのカードで1つのビジュアル言語を維持し、ソース相対サイズ設定を使用し、選択されたグレードに対して十分なコントラストを維持します。5つの不透明パネルテーマは、可読性のためにカードまたはスクリムを使用する場合があります。air は、シーンとテキストコンテナを透明に保ち、透かしやグラデーション境界のみを許可し、光のテクスチャは許可しません。選択されたグレードからの色見本を、ルックアップテーブルまたはグレード参照を使用して読み取ったパレットと適合させるために適応させます。タイミングとキーフレーム以外では、すべてのCSSスタイルをインライン化します。許可される外部インポートは、GSAPと公式の HyperFrames CDN からのビデオコーデックのみです。
6. 透明なオーバーレイをレンダリング
1つのコマンド呼び出しで一括レンダリングします。index.html へのすべての変更をコミットしてからレンダリングします：
python skills/video-add-content-cards/scripts/render_overlay.py `
work/content-cards/cards-plan.json `
work/cache/content-cards/index.html `
work/cache/content-cards-overlay.mov `
--captions-plan work/captions/captions-plan.json `
--skip-captions-if-missing
--captions-plan と --skip-captions-if-missing は、計画外のキャプションの除外ゾーンを適用するために使用されます。プロジェクトにアクティブなキャプション操作がない場合、これらは無害に無視されます。
スクリプトは、計画のエントリをフレームフォーマットに変換し、カードをコンポジションに配置し、HyperFrames snapshot を使用して各カードのタイムスタンプから透明なPNGをキャプチャし、ffmpeg で透明なProRes 4444にマルチプレクサします。ソースFPSに一致する固定フレームレートを使用します。各カードで layer.png → mov パイプラインを再起動するのではなく、1つのレンダーでバッチ処理します。
レンダリングされたオーバーレイを数秒間隔で確認します。エンコードエラー、ムラ、タイミングミス、または未承認のカードがないか確認します。品質に満足したら、各カードの最も有用な静止画を review/03-content-cards/card-stills/ に保存します。
7. レビュー出力をコミット
概要ファイル review/03-content-cards/content-cards-summary.md を作成または更新します。これには、各カードのプログラム時間、タイプ、ビジュアル処理、配置、およびオンスクリーンコピーが含まれている必要があります。すべてのカード静止画のパスをリストします。
python skills/video-add-content-cards/scripts/build_summary.py `
work/content-cards/cards-plan.json `
review/03-content-cards/content-cards-summary.md
8. 自動リビジョン番号
すべての内容が承認されたら、ベース操作に依存関係を記録します。