LoginSignup
7

More than 3 years have passed since last update.

posted at

updated at

Organization

Terminalizerのススメ

なにげなく :military_medal:JavaScript Open Source Award 2019 を眺めてたら、Terminalizerというターミナルの画面キャプチャツールが紹介されてて使いやすそうでした!

hello_black_render.gif

  • :rocket: Node.jsが入ってれば npx terminalizer ですぐ記録・再生・公開できる
  • :pick: 記録した後から内容を変更できる
  • :art: デザインが変更しやすい
  • :lifter: GIFに変換する時は若干重い(?)

キャプチャの仕方

実際にTerminalizer自身でインストールから実行するまでをキャプチャしてみます。

# インストール
npm install terminalizer --global
# hogeという名前で操作の記録開始(Ctrl-Dで記録終了)
terminalizer record hoge
# hoge.ymlで保存された操作を実行
terminalizer play hoge

test_black_render.gif

記録した時に残したくない情報(プロンプトやディレクトリ、コマンドの結果とか)はYAMLを直接編集して消せます!(逆に打ち間違えは残したり)

hoge.yml
records:
  - delay: 100
-    content: "\e]0;howking@pc:~/Downloads\a~/Downloads$" # 記録されているプロンプト
+    content: "~/$" # 簡潔なものに変更

アニメーションGIFへの変換

保存されたYAMLファイルを指定して、下記のコマンドでGIFにします(ちょっと時間がかかる)。

terminalizer render hoge -o out.gif

このままだとファイルサイズが大きいので、Gifsicleを使って最適化をかけてます。

gifsicle -O3 --colors 32 out.gif > ani.gif # 3.9MB -> 391KB

デザインの変更

右下に画像を配置できる(watermark)のと、僕は背景色は白派なので、YAMLファイルを下記のように修正して出力(render)してみると、、、

hoge.yml
# ウィンドウ枠の装飾を消して背景色を白とする
frameBox:
  type: null
  title: null
  style:
    backgroundColor: white
    border: 5px white solid

# 右下に画像を配置
watermark:
  imagePath: /home/howking/img/my_favorite_logo.svg

# フォントの種類や大きさを調整
fontFamily: "Inconsolata, MeiryoKe_Console"
fontSize: 14

# フォントの色は黒っぽく
theme:
  foreground: "#111111"

出力結果:
test.gif

個人的にすっきりした表示にあとからでも変更できる(設定を保存もしておける)のが気にいりました! :clap_tone1::clap_tone1::clap_tone1:

:christmas_tree: FORK Advent Calendar 2019
:arrow_right: 02日目 @nag244 さんよろしくです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7