omuriceman's blog

iOS / AWS / Firebase / Deep Learning を中心とした技術を発信します

ターミナルの操作を録画してgifにする「terminalizer」をさらに映えさせるためのTIPS

技術ブログを映えさせるためにいろんなツールを調査しているのですが、terminalizerというターミナル操作を録画してgifにするOSSを利用することにしました。

github.com

terminalizerはgifにするときに色々なカスタマイズがあるのですが、これをいじることで画面の見栄えにかなり影響がでます。使い方と合わせてブログで紹介したいと思います。

インストール

公式では下記のコマンドを入力すればインストールできると書いてあります。

npm install -g terminalizer

私の場合は初めてインストールした時に「Error: EACCES: permission denied, ~」というエラーが出てしまいました。sudoをつけてもインストールできなかったのですが、最終的に以下の方法でインストールができました。

sudo npm install -g terminalizer --unsafe-perm=true --allow-root

使い方

terminalizerで必要な操作は大きく3つだけです。

record(録画)

terminalizer record <recordingFile>

で録画を開始します。

f:id:omuriceman:20190804220655g:plain

play(再生)

terminalizer play <recordingFile>

recordした内容を再生します。

f:id:omuriceman:20190804224735g:plain

render(gif出力)

terminalizer render <recordingFile>

recordした内容をgifに出力します。

f:id:omuriceman:20190804225249g:plain

見栄えを良くするためのTIPS

さて一見便利そうなterminalizerですが、デフォルトの設定では少し見辛いかな〜と思うことがあります。 皆さんも私の意見を参考にしつつ自分の最適な設定を見つけてもらえれば幸いです。

f:id:omuriceman:20190804232710g:plain
デフォルト設定のterminalizer

モバイル端末で見るともはや何も見えませんね!

フォントサイズの変更する

まず何より文字が小さくて見辛いのでフォントサイズを12から20にあげました。 全体の設定に反映する場合は、.terminalizer/config.ymlのfontSizeを変更すればOKです。

f:id:omuriceman:20190804233036g:plain
フォントサイズを変更

少し修正するだけで見やすくなったと思います。

行数/列数を明示的に指定して不要な間を消す

さて次は行数と列数を変更します。上記までは行数と列数がautoになっていたので、下の方に不必要な隙間ができていました。

f:id:omuriceman:20190804235301p:plain

最適な設定は録画する内容によって変わるかと思いますので難しいのですが、行数を10・列数を50に設定しています。

f:id:omuriceman:20190804234050g:plain
行列の設定変更例

ブログだけでなくSNSなどに投稿する場合にも見栄えが良く見えるのではないでしょうか。

gif画像のフレームのタイトルを変更する

こちらの部分のことです。Terminalizerと書いてあるとちょっと気になりますよね。

f:id:omuriceman:20190804234254p:plain

上記と同じconfig.ymlファイルのframeBox->titleを変更します。私の場合は「omuriceman」としました。

.bash_profileでターミナルの表示名を変更する

これはterminalizerの設定ではありませんが、.bash_profileでプロンプトの表示形式をカスタマイズすることができます。 私の設定は下記の通りです。

export PS1="🌈\[\e[33m\] \W \[\e[0m\]\$ "

ユーザー名などの情報についてはgif出力時に余計な幅にしかならないので、がっつり省きました。

設定できる内容については、とても良くまとまっている記事がありましたので紹介します。

qiita.com

色々と設定するとこんな感じです。 f:id:omuriceman:20190804220655g:plain

まとめ

  • terminalizerはターミナル操作をgifにしてくれる
  • ブログやSNSなどで発信したり、コマンドの操作共有などに使えそう
  • そのままの設定だと見辛いので修正を加えるべきポイントをまとめた