eiji.page

vhsでtmuxのペイン分割なども録画する方法

#zsh #CLI #tmux

ターミナルの操作を録画できるvhsで、tmux操作も録画する方法を解説します。

簡単な方法

再現性がなくていいのであれば、Type "tmux" Enterのようにしてtmuxを実行するだけです。ただこれだとせっかくのvhsのメリットが消えてしまいます。

カスタマイズで表示しているステータスバーなどは、録画時には逆に見づらくなるかもしれません。

再現性のある方法

公式リポジトリを見ると、examplesにtmuxを使った例がありました。こちらを見てみましょう。

Hide
  Type "tmux -f /dev/null -L test new-session -- bash" Enter
  Type "tmux split-window -d -h -- bash && \" Enter
  Type "tmux set status && \" Enter
  Type 'tmux setw pane-border-style "fg=0" && \' Enter
  Type 'tmux setw pane-active-border-style "fg=0"' Enter
  Sleep 0.5
  Ctrl+L
  Sleep 1
Show

立ち上げコマンド

tmuxの立ち上げは次のようなコマンドを使っています。

Terminal window
tmux -f /dev/null -L test new-session -- bash

fオプション

-f /dev/nullの指定で、設定ファイルなしで立ち上げます。普段の設定ファイルを読み込まずに最低限だけ設定することで再現性を確保する方針です。

Lオプション

-Lオプションはデフォルトのtmuxサーバーとは別のものを作成する指定です。

通常はdefaultという名前でそこにセッションを作っていきますが、それとは別の録画用のサーバーを立ち上げます。

興味のある人はvhsで録画中に/tmp/tmux-UID/〇〇/を見てみるともっと分かりやすいでしょう。

Terminal window
ls -al /tmp/tmux-501/
実行結果
total 0
drwx------@  4 eetann  wheel  128 Jul 17 11:42 ./
drwxrwxrwt  14 root    wheel  448 Jul 17 11:42 ../
srwxrwx---@  1 eetann  wheel    0 Jul 15 07:42 default=
srwxrwx---@  1 eetann  wheel    0 Jul 17 11:42 test=

それ以外のコマンド

立ち上げ以外は最低限の装飾設定をしています。

Type "tmux split-window -d -h -- bash && \" Enter
Type "tmux set status && \" Enter
Type 'tmux setw pane-border-style "fg=0" && \' Enter
Type 'tmux setw pane-active-border-style "fg=0"' Enter

履歴表示の削除

このままだとtmux関係のコマンドの実行履歴が表示されたままであるため、キーバインドまたはclearコマンドの実行で非表示にします。

Ctrl+L

連続キーバインドはどうやって書くのか

CtrlB+qのような連続して入力するキーバインドの実行は次のようにTypeを使って書きます。

Ctrl+B Type q

実際の例

筆者がeditpromptの使い方の記事を書いた時に実際に録画したtapeファイルを掲載します。

Output tmux-split.mp4
Set Shell zsh
Set FontSize 14
Set Width 800
Set Height 500
Set Framerate 60
Set Padding 50
Set WindowBar Colorful
Set BorderRadius 10
Set FontFamily "HackGen Console NF"
Set Theme "Builtin Solarized Dark"


Hide
  Type@0 "tmux -f /dev/null -L test new-session -- zsh" Enter
  Type@0 "tmux set status && \" Enter
  Type@0 'tmux setw pane-border-style "fg=0" && \' Enter
  Type@0 'tmux setw pane-active-border-style "fg=0"' Enter
  Type@0 "tmux bind q split-window -v -l 10 -c '#{pane_current_path}' 'editprompt --editor nvim'" Enter
  Type@0 "clear" Enter
  Sleep 1
Show


Type "claude" Enter
Sleep 1s
Ctrl+B Type@0 q
Sleep 1s
Type "i"
Type "foo bar buz"
Sleep 1s
Escape
Type@300ms ":wq" Enter
Sleep 3s
# 録画終了後にclaudeをkillするのを忘れないように！

以上、vhsでtmuxの操作を録画する方法でした。tmux関係の機能や設定を紹介するときや、単純に画面分割して見せたい時に使えそうです。

#zsh #CLI #tmux
記事一覧に戻る

関連記事

すべての記事を見る