bounce12340/josh-video-skills

screen-record：公開ウェブページ操作録画（Reel 素材）

Josh 2026-10-11 承認済み。用途は一つ：公開ウェブページの操作画面を録画し、IG Reel の動画素材とすること。 投稿フローは一切変更なし（IG／Threads は従来通り box ブラウザの方法を使用）。このツールは投稿には関与しません。

絶対ルール（毎回必ず遵守）

1. 毎回、新規で一時的なメモリ内ブラウザを使用（chromium.launch() + newContext()、userDataDir は使用禁止）。
2. 決して box にログイン済みのブラウザプロファイルを指定しない；決して --extension、attach、CDP／wsEndpoint で box ブラウザに接続しない；決して cookies や storageState を読み込まない；--persistent／--profile を使用しない。
3. いかなるサイトにもログインせず、テキスト入力、フォーム送信、投稿、コメント、いいねなどを一切行わない。
4. 公開ページのみ録画（http/https、localhost／内部ネットワークは不可）。IG、Threads、FB は「未ログイン」状態での公開ページのみ閲覧可能。ログインウォールが表示されたら別のソースに切り替え、ログインを試みない。
5. record.mjs に組み込まれた保護機能：spec に storageState／cookies／userDataDir／profile／cdp／extension／login／password／fill／type などのフィールドがある場合は直接拒否；すべての POST／PUT／PATCH／DELETE リクエストはブロック（ログに blocked POST ... と表示されます、正常動作）；フォームの送信ボタンのクリックを拒否；http(s) 以外または内部ネットワークの URL は拒否。
6. 保護を回避するために record.mjs を変更しないこと。本当にログイン後の画面が必要な場合は、Josh に確認を取ること。

インストール済み

• Playwright（Node ライブラリ）1.64.0：このフォルダ node_modules/ にインストール（Apache-2.0）
• Playwright CLI @playwright/cli 0.1.22：グローバルコマンド playwright-cli（~/.local/bin、Apache-2.0）。デフォルトセッションはメモリプロファイル。一時的に手動でページ表示やスクリーンショットを取得可能；--persistent、--profile、attach --extension は使用しないこと。
• Chromium：npx playwright install chromium（~/.cache/ms-playwright/chromium-1248、chromium_headless_shell-1248）
• @playwright/mcp は未インストール（CLI＋本スクリプトで十分。Microsoft もエージェントには CLI を推奨）。

使い方

cd <SKILLS_DIR>/screen-record
node record.mjs spec.json                 # spec.out に出力
node record.mjs spec.json --out /path/x.mp4
./contact_sheet.sh x.mp4 x_sheet.jpg 4 3  # 4x3 サムネイルグリッド。Read で確認

例：examples/playwright-mcp.json（テスト動画：<YOUR_WORKSPACE>/media-team/03-drafts/screen-record-test/test.mp4、19.8 秒、4.1 MB）。

spec.json

{
  "url": "https://github.com/microsoft/playwright-mcp",
  "out": "<YOUR_WORKSPACE>/media-team/03-drafts/<題目>/work/screen/clip01.mp4",
  "viewport": {"width": 720, "height": 1280},
  "outSize": {"width": 1080, "height": 1920},
  "hide": [".cookie-banner"],
  "steps": [
    {"action": "chapter", "title": "Playwright MCP", "description": "github.com/microsoft/playwright-mcp", "ms": 2200},
    {"action": "scroll", "by": 500, "ms": 2000},
    {"action": "scroll", "role": "heading", "name": "Key Features", "ms": 2000},
    {"action": "highlight", "role": "heading", "name": "Key Features", "label": "Key Features", "ms": 2500},
    {"action": "hover", "text": "Getting started"},
    {"action": "click", "text": "Apache-2.0 license"},
    {"action": "goto", "url": "https://playwright.dev"},
    {"action": "wait", "ms": 1000}
  ]
}

• 要素の指定方法（3 つのうちいずれか）：selector（CSS）、role＋name（最も安定）、text（exact を追加可能）。
• scroll：by ピクセル、または to／role／text で特定の要素までスクロール（offset はデフォルトで上部から 25%）。ms はスクロール時間（イーズイン・イーズアウト）。
• highlight：黄色い枠＋オプションのラベル。ms 後に削除。
• chapter：Playwright ネイティブのチャプターカード（ぼかし背景＋タイトル）。
• click、hover には Playwright ネイティブの showActions（アニメーションカーソル＋ターゲット枠＋アクション説明）が付きます（"showActions": false で無効化可能）。
• その他のオプション：fps（デフォルト 30）、crf（デフォルト 23）、mobile（モバイルエミュレーション）、colorScheme、locale、tail、keepWebm。

画面サイズ

Playwright の screencast は CSS ピクセルで録画します（deviceScaleFactor は動画に反映されません）。そのため：

• デフォルト viewport 720x1280 で録画し、lanczos で 1080x1920 に拡大：大きなスマホのようなレイアウト、文字は十分大きく、画質はややソフトですが Reel には十分。
• 最もシャープにする場合："viewport": {"width":1080,"height":1920}（デスクトップレイアウト、文字は小さめ）。
• 横向きで録画してから縦向きに切り抜く場合："viewport": {"width":1280,"height":720}, "cropTo916": true（"cropX": 200 で切り抜き開始位置を指定可能）。出力は 1080x1920 ですが、中央部分のみが残ります。通常は縦向き viewport を直接使う方が良いでしょう。

完成動画への組み込み

• stock-footage-reel：shots.json の該当ショットに以下を記述 "pick": {"source":"file","path":"/abs/clip01.mp4","license":"Screen recording of <site>","author":"<サイト所有者>"}
• OpenMontage（openmontage-house 経由）：ローカルクリップとして素材リストに追加、または screen-demo フローの実録ソースとして使用。
• 既存ルールはそのまま：縦型 1080x1920、Sarah Explains ナレーション、繁体字中国語メイン字幕＋英語小文字、B ロール Vox カバー、IG 完成動画は 45 MB 以下。
• credits.json に 1 行追加：{"source":"screen-record","credit":"Screen recording of <site>","url":"<URL>","recorded":"YYYY-MM-DD"}；エンドロールの出典表記は「Screen recording of 」。
• 録画対象は他社のサイト：紹介／レビュー用途のみで使用。個人情報、他社のプライベートメッセージ、ペイウォールコンテンツは録画しないこと。