Macでttyrec・ttygifを使ってターミナルのgif画像を作成する

2014/06/29 | Linux, Mac

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 163 follow us in feedly

まえがき

ここ最近?になってからよく、ターミナルでの操作をGif画像としてブログにアップロードされている方などをよく見かけます。

こんなかんじのやつですね

ttyrec-gif-test.gif

今回自分も同じようなことをやってみようと調べたところ、結構簡単にターミナル操作をgif化できましたのでやり方をメモしておこうと思います。

開発環境

  • MacOSX

今回はMacでやってみましたが、ほかのLinux系ディストリでもできるようです。

やり方

  • 必要なツールをインストール・ダウンロードしてくる
  • ttyrecでターミナル操作を録画する
  • ttygifで録画ファイルを画像(png)に変換する
  • pngファイルをgif化する

といった流れになります

ImageMagick ttyrec ttygifのインストール

ImageMagickとttyrecに関してはhomebrewを使ってインストールします

brew install imagemagick
brew install ttygif

ttygifはgitのリポジトリからダウンロードしてきてmakeして使います。

git clone https://github.com/icholy/ttygif.git
cd ttygif
make

これで準備は完了です。

ターミナル操作を録画してgifファイルを作成する

まずはターミナルの操作を録画して録画ファイルを作成します

# 録画開始
ttyrec hoge

あとは『exit』するか『ctrl+d』などで終了するまで録画は続きます。

次に録画したファイルからpng画像に変換します。

# 動画ファイルのpng化
./ttygif hoge

すると、カレントディレクトリにxxxxxx.pngみたいなのがたくさん出来上がると思います。

あとはこのpngファイルをまとめてgif化すれば終わりです。

# macの場合
sh concat_osx.sh hoge.gif

# 非macの場合
sh concat_osx.sh hoge.gif

https://github.com/icholy/ttygif

https://github.com/icholy/ttygif

おすすめ書籍

2014/06/29 | Linux, Mac

関連記事

imgres-9

Macでwgetコマンドを使えるようにするの書

まえがき お題の通り、wgetコマンドをインストールして使えるように...

記事を読む

htop-1htop-1.png

MacでもLinuxでもtopコマンドからhtopコマンドにしてハッピー

まえがき LinuxやMacで使えるプロセス監視ようのコマンド『top...

記事を読む

no image

.bashrc .vimrc の晒しあげ

ご連絡 新しい記事を書きました。またbashからzshに変更もしまし...

記事を読む

mysql_tab.png

MYSQLでタブ補完できるってばよ!

まえがき LinuxのCUIやらCiscoルーターのCUIやらはタブの...

記事を読む

keitarou_keitarou__Users_keitarou_Dropbox_memo_—_vim_—_178×70-8

Vimの検索・置換コマンドに関するメモ

まえがき 前回の移動系のコマンドのメモに引き続き、今回は検索・置換の...

記事を読む

新着記事

no image

PHPでRubyのirbっぽいインタラクティブなスクリプトが実行できる「boris」

まえがき PHPでもRubyのirbみたいなことがしたくて探してみたと...

記事を読む

2015年の抱負と去年の振り返り〜よちよちWEB業界1年経験して〜

まえがき あけましておめでとうございます。今年もどうぞよろしくお願いし...

記事を読む

Java SE 7 Bronze試験(1Z0-802)を受けてきました

まえがき 以前から少し受けてみたかった試験『Java SE 7 Bro...

記事を読む

HubotでJenkinsのジョブを実行する

まえがき HubotをつかってJenkinsのジョブをじっこうしてみた...

記事を読む

no image

Hubotをforeverでデーモン化する

まえがき 今回はHubotをforeverを使ってデーモン化してみた時...

記事を読む

スポンサーリンク

  • Sorry. No data so far.

PAGE TOP ↑