kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

Mac でターミナル操作をレコーディングしてシュッと公開できる「asciinema」

Mac で「ターミナル操作」をレコーディングしたくなる場面がある.ブログに載せたり,GitHub リポジトリの README.md に載せたり,プレゼンテーションでデモを行う場合のバックアップ用途として使ったりする.今までは Terminalizerttyrec + ttygif を使っていたけど,今回は別の選択肢として「asciinema」を試す.発音は [as-kee-nuh-muh] だから「アスキーヌーマ」とか?簡単に紹介すると「asciinema」を使うと「ターミナル操作」をレコーディングして,サービス側にアップロードできる.そしてブログに載せることもできる.

asciinema.org

f:id:kakku22:20201018094006p:plain
GitHub - asciinema/asciinema-logo: Official asciinema logo より引用

インストール 📹

asciinema コマンドは Homebrew で簡単にインストールできる.Homebrew だけじゃなく,pip3 でもインストールできるし,yumapt-get でもインストールできる.Docker を使って docker run コマンドで実行することもできる.今回インストールした最新バージョン v2.0.2 は2019年9月にリリースされているため,直近1年ほどはアップデートされていない?

$ brew install asciinema

$ asciinema --version
asciinema 2.0.2

asciinema.org

ログイン 📹

「asciinema」はサービス登録をしなくても使える.しかし,レコーディングデータは「7日間」で自動的にアーカイブされてしまうため,ブログに載せたりすることを考えると使いにくいと思う.今回はまずサービス登録(メール認証)をしてから,asciinema auth コマンドを実行してアカウント連携をしておく.これで準備完了!

$ asciinema auth
Open the following URL in a web browser to link your install ID with your asciinema.org user account:

https://asciinema.org/connect/00000000-1111-2222-3333-444444444444

This will associate all recordings uploaded from this machine (past and future ones) to your account, and allow you to manage them (change title/theme, delete) at asciinema.org.

レコーディング 📹

asciinema rec コマンドを実行すると,新しく /bin/zsh などのシェルプロセスが立ち上がり,レコーディング状態になる.適当にコマンドを実行して,最終的に ctrl-d でプロセスを落とせば,レコーディングは完了する.

レコーディング後に enterctrl-c を入力するように求められる.挙動の差は以下に簡単にまとめた.なお,asciinema にアップロードをした場合,private とは言え URL を直接指定すればアクセスできるため「限定共有」のような仕組みになる.

  • enter : asciinemapriavate 状態でアップロードする
  • ctrl-c : ローカルファイル (.cast) に出力する
$ asciinema rec
asciinema: recording asciicast to /var/folders/xx/yyy/T/zzz-ascii.cast
asciinema: press <ctrl-d> or type "exit" when you're done

(中略)

asciinema: recording finished
asciinema: press <enter> to upload to asciinema.org, <ctrl-c> to save locally
asciinema: asciicast saved to /var/folders/xx/yyy/T/zzz-ascii.cast

以下に echokubectlcowsay を実行した(本当に適当な👻)サンプルをレコーディングした.asciinema にアップロードすれば,Markdown 形式でブログに載せることもできる.ターミナルデザインはレコーディング時のものではなく,以下から選べるようになっている.今回は Tango を選んだ.

  • Default (asciinema)
  • asciinema
  • Tango
  • Solarized Dark
  • Solarized Light
  • Monokai

asciicast

ローカルファイル (.cast) 📹

レコーディング完了時に ctrl-c「ローカルファイル (.cast)」を出力した場合,asciinema play コマンドを使えばレコーディングを再生できる.本当にコマンドを再実行するわけではなく,実行結果がそのまま表示される仕組みになっている.よって .cast ファイルを一部修正することもできる.そして「ローカルファイル (.cast)」の仕様は GitHub に公開されていて,現在は asciicast file format v2 が使われている.実際に .cast ファイルを読むのは難しいけど,仕様が公開されているのは良いことだと思う.

$ asciinema play zzz-ascii.cast
 ~ echo 'hello'
hello
 ~ k get nodes
NAME             STATUS   ROLES    AGE   VERSION
docker-desktop   Ready    master   13d   v1.18.8
 ~ cowsay kakakakakku
 _____________
< kakakakakku >
 -------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

設定ファイル 📹

「asciinema」には「設定ファイル機能 (Configuration file)」もある.api(API)record(レコーディング)play(再生) の挙動を細かく設定できる.設定ファイルは ${HOME}/.config/asciinema/config に置く.特に recordidle_time_limit はデフォルト off なので,設定しておくと便利.レコーディング時にコマンドを実行せずに静止している時間が続いた場合に指定した秒数に詰めてくれるため,変に間延びしたレコーディングにならない.asciinema rec コマンドのオプションに --idle-time-limit を設定することもできるけど,デフォルトで入れておくのが良さそう.

[record]

idle_time_limit = 2

asciinema.org

GIF 📹

レコーディングデータを GIF に変換したいこともある.GitHub に公開されているツール asciicast2gif を使えば実現できそうだけど,実際に試したところ,うまく変換できなかった.Docker も npm も試した.GitHub で2018年頃からアップデートされていないことを考慮すると,asciicast file format v2 に対応していなさそうだった.README.md に載っている拡張子も .cast ではなく demo.json になっていた.

github.com

まとめ 📹

Mac で「ターミナル操作」をレコーディングできる「asciinema」を試した.簡単に使えるし,サービス側にアップロードできるのも便利だった.しかし asciinema コマンドは直近1年ほどはアップデートされてなく,関連ツールの asciicast2gifasciinema-player もうまく動かなかった.asciinema Blog も接続できず,今後も継続的に使えるのかは判断が難しいところ.

asciinema.org