【CLI操作をGIFで記録】VHSの使い方

2024/02/24

VHS(https://github.com/charmbracelet/vhs)はgoで作られたツールです。

ターミナル操作をGIF画像や動画として記録できます。 CLIの使い方、操作方法などを共有する際に便利です。

ここでは、VHSの基本的な利用方法を紹介します。

インストール

VHSを始める前に、ttydとffmpegがシステムにインストールされている必要があります。
これらはVHSの動作に必要な依存関係です。

以下コマンドでVHSをインストールできます。

brew install vhs

インストールできました。

$ vhs --version
vhs version 0.7.1

動作確認

以下手順で利用します。

.tapeファイルの作成
VHSで操作を記録するためのスクリプトファイルを作成。
コマンドの記述
.tapeファイルに実行したいターミナルコマンドを記述。
GIFの生成
.tapeファイル に記載した操作をもとにGIFを生成。

.tapeファイルの作成

以下のコマンドを実行します。

vhs new demo.tape

demo.tapeファイル が生成されました。

コマンドの記述

demo.tapeファイルに、実行したいコマンドを記述します。

今回は、デフォルトの内容でそのまま実行します。demo.tapeの内容は以下になってました。

# VHS documentation
#
# Output:
#   Output <path>.gif               Create a GIF output at the given <path>
#   Output <path>.mp4               Create an MP4 output at the given <path>
#   Output <path>.webm              Create a WebM output at the given <path>
#
# Require:
#   Require <string>                Ensure a program is on the $PATH to proceed
#
# Settings:
#   Set FontSize <number>           Set the font size of the terminal
#   Set FontFamily <string>         Set the font family of the terminal
#   Set Height <number>             Set the height of the terminal
#   Set Width <number>              Set the width of the terminal
#   Set LetterSpacing <float>       Set the font letter spacing (tracking)
#   Set LineHeight <float>          Set the font line height
#   Set LoopOffset <float>%         Set the starting frame offset for the GIF loop
#   Set Theme <json|string>         Set the theme of the terminal
#   Set Padding <number>            Set the padding of the terminal
#   Set Framerate <number>          Set the framerate of the recording
#   Set PlaybackSpeed <float>       Set the playback speed of the recording
#   Set MarginFill <file|#000000>   Set the file or color the margin will be filled with.
#   Set Margin <number>             Set the size of the margin. Has no effect if MarginFill isn't set.
#   Set BorderRadius <number>       Set terminal border radius, in pixels.
#   Set WindowBar <string>          Set window bar type. (one of: Rings, RingsRight, Colorful, ColorfulRight)
#   Set WindowBarSize <number>      Set window bar size, in pixels. Default is 40.
#   Set TypingSpeed <time>          Set the typing speed of the terminal. Default is 50ms.
#
# Sleep:
#   Sleep <time>                    Sleep for a set amount of <time> in seconds
#
# Type:
#   Type[@<time>] "<characters>"    Type <characters> into the terminal with a
#                                   <time> delay between each character
#
# Keys:
#   Escape[@<time>] [number]        Press the Escape key
#   Backspace[@<time>] [number]     Press the Backspace key
#   Delete[@<time>] [number]        Press the Delete key
#   Insert[@<time>] [number]        Press the Insert key
#   Down[@<time>] [number]          Press the Down key
#   Enter[@<time>] [number]         Press the Enter key
#   Space[@<time>] [number]         Press the Space key
#   Tab[@<time>] [number]           Press the Tab key
#   Left[@<time>] [number]          Press the Left Arrow key
#   Right[@<time>] [number]         Press the Right Arrow key
#   Up[@<time>] [number]            Press the Up Arrow key
#   Down[@<time>] [number]          Press the Down Arrow key
#   PageUp[@<time>] [number]        Press the Page Up key
#   PageDown[@<time>] [number]      Press the Page Down key
#   Ctrl+<key>                      Press the Control key + <key> (e.g. Ctrl+C)
#
# Display:
#   Hide                            Hide the subsequent commands from the output
#   Show                            Show the subsequent commands in the output

Output demo.gif

Require echo

Set Shell "bash"
Set FontSize 32
Set Width 1200
Set Height 600

Type "echo 'Welcome to VHS!'" Sleep 500ms  Enter

Sleep 5s

demo.tapeには、簡単な使い方も記載されています。
Typeの行(67行目) が実行されるコマンドです。