ターミナルの操作を記録してgif ファイルを作成する terminalizer を試してみた

Github Trends で人気だったので試してみた

github.com

概要

terminal のコマンドを記録して実行結果を記録して gif をつくれる こんな感じの gif ファイルができる

面白いのは単純に実行環境の録画ではなく、再現するterminal環境のShellを選べたり、terminalのレイアウトを選べて、後でカスタマイズできるということ

動機 🤔

• ターミナルコマンドの実行中と実行した結果をブログにはるため

環境 💻

• macOS High Sierra 10.13.6
• node.js v10.6.0
• npm 6.1.0

使い方

インストール

管理は npm

利用には node.js が必須

npm install -g terminalizer

実行と録画

以下のコマンドで録画を開始して録画を開始して CTRL+D で終了する

terminalizer record demo

実行ディレクトリに以下のファイルができている

実行するシェルやterminal の背景とかフォントなど色々指定できる 単純にローカルの実行環境の実行結果の gif を作る訳ではなく色々カスタマイズできるみたい

demo.yml

# The configurations that used for the recording, feel free to edit them
config:

  # Specify a command to be executed
  # like `/bin/bash -l`, `ls`, or any other commands
  # the default is bash for Linux
  # or powershell.exe for Windows
  command: bash -l

  ....(中略)
  
  # Font family
  # You can use any font that is installed on your machine
  # in CSS-like syntax
  fontFamily: "Monaco, Lucida Console, Ubuntu Mono, Monospace"
  
  # The size of the font
  fontSize: 12
  
  # The height of lines
  lineHeight: 1
  
  # The spacing between letters
  letterSpacing: 0
  
  # Theme
  theme:
    background: "transparent"
    foreground: "#afafaf"
    cursor: "#c7c7c7"
    black: "#232628"
    red: "#fc4384"
    green: "#b3e33b"
    yellow: "#ffa727"
    blue: "#75dff2"
    magenta: "#ae89fe"
    cyan: "#708387"
    white: "#d5d5d0"
    brightBlack: "#626566"
    brightRed: "#ff7fac"
    brightGreen: "#c8ed71"
    brightYellow: "#ebdf86"
    brightBlue: "#75dff2"
    brightMagenta: "#ae89fe"
    brightCyan: "#b1c6ca"
    brightWhite: "#f9f9f4"

  ....(中略)
  
# Records, feel free to edit them
records:
  - delay: 208
    content: 'mbp:~ user$ '
  - delay: 904

記録した内容を terminal 上で再現する

terminalizer play demo

gifファイルの生成

長いコマンドだと出力に結構時間かかる

gifファイルが生成されている

render1533389856283.gif

terminalizer render demo
Rendering frame 123/123 100% [==============================] 0.0s
Merging frame 123/123 100% [==============================] 0.0s

Successfully Rendered
The animated GIF image is saved into the file:
/Users/user/render1533389856283.gif

以上。終了