vhs入門：ターミナル操作をGIFに録画するコマンドラインツール

vhs はターミナル操作を GIF や動画として録画できるツールです。.tape というスクリプトファイルに操作を書いておけば、何度でも同じ GIF を再生成できます。

vhs デモ：tape スクリプトで自動録画

vhs とは

Charm が開発する OSS のターミナル録画ツールです。

画面録画ソフトと違い、操作をコードで記述します。

Type "git status"
Enter
Sleep 1s

このように書いたファイルを vhs demo.tape で実行すると GIF が生成されます。スクリプトなので Git で管理でき、内容を変えて再録画も簡単です。

インストール

brew install vhs

依存として ttyd・ffmpeg が自動的に入ります。

バージョン確認：

vhs --version
# vhs version 0.11.0

tape ファイルの基本構文

出力ファイルを指定する

Output demo.gif

Output は tape の先頭に書きます。.gif のほか .mp4・.webm も指定できます。

見た目を設定する

Set FontSize 14
Set Width 1200
Set Height 600
Set Padding 20
Set TypingSpeed 80ms

設定	説明
`FontSize`	フォントサイズ（px）
`Width` / `Height`	画面サイズ（px）。最低 120×120 必要
`Padding`	余白（px）
`TypingSpeed`	1文字あたりの入力速度

操作を記述する

Type "git status"   # 文字を入力
Enter               # Enter キー
Space               # Space キー
Down                # 下矢印
Up                  # 上矢印
Sleep 1s            # 待機（ms / s 単位）

セットアップを非表示にする

録画に映したくない準備コマンドは Hide / Show で囲みます。

Hide
Type "cd /tmp/my-project"
Enter
Sleep 500ms
Show

# ここから録画に映る
Type "git log --oneline"
Enter

実際に試してみる

最小限の tape

Output demo.gif

Set Width 800
Set Height 300

Type "echo 'Hello, vhs!'"
Enter
Sleep 1s

これを demo.tape として保存し、実行します。

vhs demo.tape

カレントディレクトリに demo.gif が生成されます。

プロジェクトでの管理方法

project/
├── sandbox/
│   └── {記事名}/
│       ├── demo.tape    # Git 管理（再録画できる）
│       └── setup.sh     # デモ環境のセットアップスクリプト
└── assets/
    └── {記事名}/
        └── demo.gif     # .gitignore 済み（生成物）

tape スクリプトだけ Git に入れておけば、環境が変わっても vhs demo.tape で同じ GIF を再生成できます。

活用例：lazygit のデモ

この GIF は vhs で録画したものです（lazygit入門の記事より）。

lazygit でファイルをステージしてコミットするデモ

使った tape スクリプト（抜粋）：

Output assets/lazygit-intro/demo.gif

Set Shell zsh
Set FontSize 14
Set Width 1200
Set Height 650

Hide
Type "bash sandbox/lazygit-intro/setup.sh"
Enter
Sleep 3s
Type "clear"
Enter
Show

Type "lazygit"
Enter
Sleep 3s

Space    # ファイルをステージ
Sleep 700ms
Down
Space
Sleep 700ms

Type "c"                              # コミットメッセージ入力
Sleep 800ms
Type "add greet function and update app"
Enter
Sleep 2500ms

Type "q"

TUI ツールのように動きが重要なものは、テキストの説明より GIF のほうが一目で伝わります。

まとめ

コマンド	説明
`Output demo.gif`	出力ファイルを指定
`Set Width 1200`	画面幅（px）
`Type "コマンド"`	文字を入力
`Enter`	Enter キー
`Sleep 1s`	待機
`Hide` / `Show`	録画の一時停止・再開
`vhs demo.tape`	GIF を生成

tape ファイルはコードなので Git 管理・再録画が可能
Hide / Show でセットアップを非表示にできる
Width・Height はピクセル単位（最低 120×120）

ターミナルの TUI 操作や複数ステップのコマンド解説に特に効果的です。