ターミナルの操作を録画してgifにする「terminalizer」をさらに映えさせるためのTIPS
技術ブログを映えさせるためにいろんなツールを調査しているのですが、terminalizerというターミナル操作を録画してgifにするOSSを利用することにしました。
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>
で録画を開始します。
play(再生)
terminalizer play <recordingFile>
recordした内容を再生します。
render(gif出力)
terminalizer render <recordingFile>
recordした内容をgifに出力します。
見栄えを良くするためのTIPS
さて一見便利そうなterminalizerですが、デフォルトの設定では少し見辛いかな〜と思うことがあります。
皆さんも私の意見を参考にしつつ自分の最適な設定を見つけてもらえれば幸いです。
モバイル端末で見るともはや何も見えませんね！
フォントサイズの変更する
まず何より文字が小さくて見辛いのでフォントサイズを12から20にあげました。 全体の設定に反映する場合は、.terminalizer/config.ymlのfontSizeを変更すればOKです。
少し修正するだけで見やすくなったと思います。
行数/列数を明示的に指定して不要な間を消す
さて次は行数と列数を変更します。上記までは行数と列数がautoになっていたので、下の方に不必要な隙間ができていました。
最適な設定は録画する内容によって変わるかと思いますので難しいのですが、行数を10・列数を50に設定しています。
ブログだけでなくSNSなどに投稿する場合にも見栄えが良く見えるのではないでしょうか。
gif画像のフレームのタイトルを変更する
こちらの部分のことです。Terminalizerと書いてあるとちょっと気になりますよね。
上記と同じconfig.ymlファイルのframeBox->titleを変更します。私の場合は「omuriceman」としました。
.bash_profileでターミナルの表示名を変更する
これはterminalizerの設定ではありませんが、.bash_profileでプロンプトの表示形式をカスタマイズすることができます。
私の設定は下記の通りです。
export PS1="🌈\[\e[33m\] \W \[\e[0m\]\$ "
ユーザー名などの情報についてはgif出力時に余計な幅にしかならないので、がっつり省きました。
設定できる内容については、とても良くまとまっている記事がありましたので紹介します。
色々と設定するとこんな感じです。
まとめ
- terminalizerはターミナル操作をgifにしてくれる
- ブログやSNSなどで発信したり、コマンドの操作共有などに使えそう
- そのままの設定だと見辛いので修正を加えるべきポイントをまとめた
