mcpField
L
laohan-luping

laohan-luping

github.com/hanzhcnクリエイティブ・メディア15144 回インストール今日更新
リポジトリ

laohan-luping について

laohan-lupingは、口頭原稿や録画指示から、CLIとブラウザーの操作を記録するbashスクリプトを生成します。tmux、Claude Code、Playwright headedの操作を順序付け、録画はユーザーが手動で開始します。

主な機能

  1. 01口頭原稿から操作手順を生成
  2. 02tmuxとClaude Codeの制御
  3. 03Playwrightのブラウザー操作生成
  4. 04ffmpegによる物理画面の録画
  5. 051080p MP4出力と一時ファイルの削除

活用シーン

  1. 01CLIツールの操作チュートリアルを録画
  2. 02Webサイト操作を含むデモ動画を作成
  3. 03原稿に沿って端末とブラウザーの場面を構成
  4. 04スクリプト生成後に手動で録画を開始

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hanzhcn/laohan-skills --skill laohan-luping

インストール後、Claude Code で/laohan-lupingを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

scripts/
browser_segment.js
record_segment.sh
record_template.sh
record_tutorial.sh

詳細

画面録画の自動化：ナレーション原稿 → 録画スクリプト → MP4

境界（2026-09-20ガバナンスP2-20）：本ツールはepisodeの制作契約には含まれません。episode内の画面録画は、⑨で凍結されたLOCAL_CAPTUREリクエスト（Prompt 08 / local-capture-mvp）にのみ応じます。リクエストがない場合はNOT_NEEDEDです。episodeのコンテキストで本ツールを使って画面録画を開始しないでください。独立した調査、デモ、またはJeffreyから明示的に依頼された自由な画面録画は、この制限の対象外です。

ナレーション原稿（または画面録画の指示）を入力すると、bash録画スクリプトを自動生成します。スクリプトはCLI操作（tmux+Claude Code）とブラウザー操作（Playwright headed）を編成し、ffmpegで物理画面を録画して、1080pのMP4を出力します。

核となる考え方

ナレーション原稿がスクリプトの設計図です。 ナレーションの各段落を画面操作（CLIコマンド／ブラウザーのナビゲーション／静的な待機）に対応させ、原稿から操作の順序と所要時間を抽出し、録画テンプレートに入力します。

画面に映るものをそのまま録画します。 ffmpegで物理画面を録画し、tmuxでターミナルを前面に表示し、Playwright headedでブラウザーを表示します。2種類の「出演者」がナレーション原稿に合わせて交互に登場します。

画面録画は素材であり、制作工程ではありません。 録画中の一時ファイルはすべて自動で削除され、最終的なMP4だけが残ります。

ワークフロー

1. ナレーション原稿を入力する

ユーザーから次のいずれかを受け取ります。

  • ナレーション原稿のファイルパス（script.md）
  • または画面録画の指示ファイルのパス（录屏指示.md）
  • または録画する内容の直接の説明

ユーザーがナレーション原稿を提供し、画面録画の指示がない場合 → 原稿の内容に基づいて、各段落に対応する操作を自動で推測します。 ユーザーが画面録画の指示を提供した場合 → 指示に記載された操作順序をそのまま使用します。

  • 完了条件： 操作の順序と各ステップの所要時間をすべて把握していること
2. ナレーション原稿を解析して操作順序に変換する

ナレーション原稿／画面録画の指示から操作を抽出します。操作は次の3種類に分かれます。

CLI操作（tmux + Claude Code）：

ナレーションの段落画面操作スクリプトのアクション
「今日のAIおすすめを集めて」と言うコマンドを実行send_cmd "抓今天的AI精选"
「ナレーション原稿を書いて」と言うコマンドを実行send_cmd "帮我写口播稿"
output/ フォルダーを表示確認コマンドsend_cmd "ls output/"

ブラウザー操作（Playwright headed）：

ナレーションの段落画面操作スクリプトのアクション
「GitHubのプロジェクトページを開く」URLに移動browser_goto "https://github.com/..."
「READMEを見てみる」ページをスクロールbrowser_scroll 500
「インストール手順をクリック」リンクをクリックbrowser_click "a[href='docs']"
「プロジェクトのスクリーンショットを表示」静的に表示browser_wait 3000

静的操作（待機のみ）：

ナレーションの段落画面操作スクリプトのアクション
オープニング／つなぎ／締めくくり静止画面sleep N

抽出ルール：

  • 引用符（「」または""）内の内容 → そのまま send_cmd の引数にする

  • URL／GitHub／ウェブサイト／ドキュメントへの言及 → ブラウザー操作

  • ターミナル／コマンド／CLIへの言及 → CLI操作

  • 説明のみの段落 → ナレーションの長さから sleep の秒数を推定（通常の速度で約3文字／秒）

  • Claudeの完了を待つ必要があるCLIコマンド → wait_for_claude を追加

  • ブラウザーページを読む時間が必要な場合 → browser_wait を追加

  • 完了条件： 種類（cli/browser/static）、内容、待機方法、ラベルを含む構造化された操作リストが生成されていること

3. 環境を確認する
which ffmpeg && which tmux && which node
ffmpeg -f avfoundation -list_devices true -i "" 2>&1 | grep "Capture screen"
node -e "require('playwright')" 2>/dev/null && echo "playwright OK" || echo "playwright missing"
  • 必要なツールがない場合 → インストールを案内します
  • 複数の画面がある場合 → インデックスの確認をユーザーに求めます
  • Playwrightがない場合 → npm install playwright
  • 完了条件： 画面のインデックスが確認され、Playwrightが使用可能であること（ブラウザー部分がある場合）
4. 録画スクリプトを生成する

scripts/record_template.sh テンプレートを基に生成します。テンプレートには次が含まれます。

  • ffmpegによる画面録画の開始／停止
  • tmuxセッションの管理（CLI部分）
  • Playwrightによるブラウザー制御（ブラウザー部分）
  • send_cmd()、wait_for_claude()、browser_*() 関数
  • 1080pへのトランスコードと一時ファイルの削除

入力する内容：

  • CLI部分：コマンドのシーケンスブロック（send_cmd + wait_for_claude）
  • ブラウザー部分：ナビゲーションJSONファイル（browser_actions.json）
  • 切り替えのタイミング：ナレーション原稿の段落順に従ってCLI／ブラウザーを切り替えます

CLI部分のみの場合 → CLIのみのモード（ブラウザーを起動しません）。 ブラウザー部分のみの場合 → ブラウザーのみのモード（tmuxを起動しません）。 両方ある場合 → 混合モードです。

生成したスクリプトは、ユーザーが指定したディレクトリ（または現在のディレクトリ）に保存します。ファイル名の形式：record_<教程名>.sh

5. 提供と実行方法の案内

次を出力します。

  1. 生成した record_xxx.sh スクリプト（ブラウザー部分がある場合は browser_actions.json も含む）
  2. 実行コマンド：bash record_xxx.sh
  3. 次の点をリマインドします。
    • ターミナルを全画面表示にする（Cmd+Enter）
    • おやすみモードをオンにする
    • Enterキーを押した後は、キーボードやマウスに触れない
    • Gateの確認ダイアログが表示されたら、Enterキーを押して続行する

スクリプトは自動実行しません — ユーザーがターミナルから手動で画面録画を開始する必要があります。

操作ルール

  • ナレーション原稿に基づく — すべての操作を原稿内の該当する段落にたどれるようにします
  • 画面録画スクリプトを自動実行しない — 画面の制御を伴うため、ユーザーが手動で実行する必要があります
  • 画面のインデックスを確認する — マシンによって構成が異なるため、ハードコードしません
  • CLIとブラウザーを自然に切り替える — 切り替え時に短い sleep（1～2秒）を入れ、自然な切り替えを再現します
  • ブラウザーのスクロールは人間らしく — 200～400pxずつスクロールし、500～800ms間隔を空けます
  • 静的な段落にはsleepを使う — オープニング／つなぎ／締めくくりなど操作のない段落は、原稿の文字数÷3で秒数を見積もります
  • 一時ファイルをすべて削除する — Claudeの作業ディレクトリ、rawファイル、browser JSONを削除し、最終的なMP4だけを残します

適用対象外のケース

  • デスクトップアプリ（ターミナルでもブラウザーでもないもの）の録画 → OBSを使用してください
  • 音声解説付きの録画 → 音声入力を別途設定する必要があります
  • ライブ配信 → これは録画方式であり、配信方式ではありません
  • ログイン済みの状態が必要なブラウザー操作 → opencli Browser Bridgeを使用してください

ブラウザー操作のJSON形式

{
  "viewport": { "width": 1920, "height": 1080 },
  "steps": [
    { "action": "goto", "url": "https://github.com/xxx", "label": "打开项目页" },
    { "action": "wait", "ms": 3000 },
    { "action": "scroll", "pixels": 600, "smooth": true },
    { "action": "wait", "ms": 2000 },
    { "action": "click", "selector": "a[href='/xxx/docs']", "label": "点击文档" },
    { "action": "wait", "ms": 3000 }
  ]
}

使用できるaction：goto、wait、scroll、click。

トラブルシューティング早見表

問題原因解決方法
違う画面を録画してしまうマルチディスプレイのインデックスが誤っているffmpeg -list_devices で確認
tmux内でclaudeがすぐ終了するネットワーク／初期化に関する一時的な問題再実行する
画面が静止したままになるclaudeが入力待ちになっているEnterキーを手動で押す
動画ファイルが大きすぎるCRF値が低すぎる-crf 23 に変更
コマンドの送信が終わらないタイムアウトmax_wait を増やす
ブラウザーウィンドウのサイズが合わないviewportが一致していないJSONでviewportを設定
Playwrightの起動に失敗するインストールされていないnpm install playwright

コメント

Markdown 対応