## 経緯
ターミナルでの操作動画を作るのに便利そうなので、チュートリアルを参考にやってみたくなった。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">GitHub - charmbracelet/vhs: Your CLI home video recorder 📼</p>
<p class="link-card-description">Your CLI home video recorder 📼. Contribute to charmbracelet/vhs development by creating an account on GitHub.</p>
</div>
<img src="https://repository-images.githubusercontent.com/515619101/e6079ef6-4d03-49fe-87ac-2498b8dda284" class="link-card-image" />
</div>
<a href="https://github.com/charmbracelet/vhs?tab=readme-ov-file#tutorial"></a>
</div>
## 環境
- [[Ubuntu 22.04 LTS]] ([[WSL]])
- [[mise]]
## インストール
```console
mise use --global vhs
```
バージョンは0.7.1。
## 作ってみる
### 作業場の作成
作業場をつくる。
```console
cd ~/tmp
mkdir vhs-test
cd vhs-test
```
### tapeファイルの作成
`tape`ファイルを作成。
```console
vhs new demo.tape
```
> [!positive] 洒落が聞いていてよい拡張子
`demo.tape`の中身配下のような感じ。コメントアウト部分は割愛。
```txt
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
```
### 実行
とりあえず実行してみる。
```console
$ vhs demo.tape
ffmpeg is not installed. Install it from: http://ffmpeg.org
```
[[ffmpeg]]が必要らしい...。
### [[ffmpeg]]のインストール
```console
mise use --global ffmpeg
```
なんか上手くいかなかった...。
```error
mise ~/.local/share/mise/plugins/ffmpeg/bin/install failed
* Configuring ffmpeg with default options
nasm/yasm not found or too old. Use --disable-x86asm for a crippled build.
If you think configure made a mistake, make sure you are using the latest
version from Git. If the latest version fails, report the problem to the
[email protected] mailing list or IRC #ffmpeg on irc.libera.chat.
Include the log file "ffbuild/config.log" produced by configure as this will help
solve the problem.
asdf-ffmpeg: An error occurred while installing ffmpeg 6.1.1.
mise ~/.local/share/mise/plugins/ffmpeg/bin/install exited with non-zero status: exit code 1
mise Run with --verbose or MISE_VERBOSE=1 for more information
```
[[NASM]]か[[yasm]]が必要らしい。[[mise]]でインストールできそうなのは[[NASM]]っぽいので、そちらを入れてみる。
```console
mise use --global nasm
```
warningは出まくるけど、無事にインストールできた。バージョンは6.1.1。
### ふたたび実行
```console
$ vhs demo.tape
ttyd is not installed. Install it from: https://github.com/tsl0922/ttyd
```
[[VHS (CLI)|VHS]]実行までの道は険しい... 次は[[ttyd]]が必要とのこと。
### ttydのインストール
```console
mise use --global ttyd
```
こちらは簡単に入った。
### 3度目の正直
```console
$ vhs demo.tape
File: demo.tape
Host your GIF on vhs.charm.sh: vhs publish <file>.gif
Output .gif demo.gif
Require echo
Set Shell bash
Set FontSize 32
Set Width 1200
Set Height 600
Type echo 'Welcome to VHS!'
Sleep 500ms
Enter 1
Sleep 5s
Creating demo.gif...
```
`demo.gif`ができたので確認して動いていればOK。
### オリジナリティを出す
デフォルトのままだと面白くないので、`demo.tape`を少し変更する。
```txt
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
```
## 気になる点
- [[ttyd]]で開かれたターミナルエミューレータは `.zshrc` などを読み込んでなさそう
- `source ~/.zshrc` を最初に実行することで解消はできる
- ただ、[[Ubuntu]]の[[Google Chrome]]に[[Nerd Fonts]]のインストールが必要
- 面倒そうなので今は保留