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

2014/06/29 | Linux, Mac

  • Pocket
  • このエントリーをはてなブックマークに追加
  • 173 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

関連記事

keitarou_keitarou__Users_keitarou_Dropbox_memo_—_vim_—_178×70-8

Vimの移動系のコマンドをメモ

まえがき 今回はVimの移動系のコマンドをとりあえずまとめてメモ。 ...

記事を読む

no image

wgetコマンドでファイル名指定したり、ファイルを保存しないようにしたりする

まえがき wgetコマンド。便利ですよねー。 オプションも結構あって覚...

記事を読む

LinuxのiptablesとSELinuxを停止・無効化する

まえがき LinuxでVMなり、新しいホスト立てた時、自分はまずipt...

記事を読む

git-image1

Gitでリモートリポジトリの作り方のメモ

まえがき 今回はGitでのリモートリポジトリの作り方に関するメモ。 ...

記事を読む

PP_tenkey500-thumb-186xauto-299

vhost環境で.htaccessが効かなくなった

まえがき Apacheのバーチャルホスト環境でなかなか.htacce...

記事を読む

新着記事

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を使ってデーモン化してみた時...

記事を読む

スポンサーリンク

PAGE TOP ↑