スクリーンやターミナルの画面をアニメーション動画として公開する方法

こんにちは、Pairs事業部のkaneshinです!

GitHubのリポジトリのREADMEに張られているアニメーションgifがカッコイイので作成してみたいという方や、勉強会で登壇する際にターミナルの情報を前もって撮影して公開しておきたいという方がいると思います。
ネットを検索すれば色々な方法がありますが、現在私が使っている方法を紹介させて頂きます。

なぜアニメーションgifを公開するのか?

自明だとは思いますが、静止画やテキストでREADMEを書かれているより、動画(アニメーションgif)を見たほうが「わかりやすい」からです。
この一手間を加えて自分のライブラリをGitHubなどに公開すれば、第三者が「使ってくれるライブラリ」になるはずなので、ライブラリを作成している方で動画を貼り付けていない方は是非この記事を読了してからREADMEを刷新してください。(笑)

asciinema

Screen Shot 2016-04-30 at 8.07.58 PM

asciinemaはターミナルの画面を共有することができるサイトです。
勉強会で登壇者がライブでコマンドを打って実行結果などを発表するときがありますが、何かのミスによってコマンド実行がうまくいかずに発表時間を全て使い切るということも稀にあります。

事前に、実行結果をここにアップロードしておけば突然の事故を避けることもできるのでオススメです。

インストール

OSXでの紹介になりますが、インストールは非常に簡単です。

$ brew install asciinema

これでインストールが可能です。

使い方

折角なのでアニメーションgifにしています。

gifify.mov

$ asciinema rec
~ Asciicast recording started.
~ Hit Ctrl-D or type "exit" to finish.

上記のようにコマンドを実行すると新しくセッションが立ち上がるので、そこからレコーディングがスタートになります。
レコーディングを終了するにはそのセッションから抜け出すことで完了になり、下記のメッセージが出力されるのでアップロードするかキャンセルするかを選択してください。

~ Asciicast recording finished.
~ Press <Enter> to upload, <Ctrl-C> to cancel.

今回実行したものがhttps://asciinema.org/a/052njthqyuj68okhfmrk0p0j3にアップロードされいるのでよければご覧ください。

gifify

先ほどasciinemaはサイトにいかなければいけないのですが(HTMLソースの共有は可能)、READMEにそのままアニメーションgifを貼りたい人がほとんどだと思います。
そんなときはこのgififyを利用します。

gififyとは

OSXでアニメーションGifを動画から作成したことがある方はご存知だと思いますが、アニメーションgifを作成するためにffmpegが必要なのと、ffmpeg自体あまり使わないコマンドなので私は毎回ヘルプを見ながらコマンドを叩いていました。
このちょっとした不自由さに頭を使うのが面倒なので(覚えればいい話なのですが、、)インタフェースが少しだけ簡単になったスクリプトがgififyです。

インストール

リポジトリはこちらにあるので、ここから落としてくるか、homebrew経由でインストールが可能です。

$ brew install gifify

使い方

動画はQuickTimeなどで撮影したとして、その動画を保存したとします。(ファイル名:recording.mov)そのファイルパスをgifify実行時に渡してあげると同じディレクトリにgifファイルが保存されます。

$ gifify recording.mov

# new_gif.gifというファイル名で出力
$ gifify -o new_gif recording.mov

# 左上から100x100でクロップする
$ gifify -c 100:100 recording.mov

# 60fpsで出力する
gifify -r 60 recording.mov

# 30fpsかつ2倍速で出力する
gifify -r 30@2 recording.mov

# 1回のループで終了させる
gifify -l 1 recording.mov

先ほど、asciinemaの使い方で上げたgifアニメーションはこのgififyを使用して出力した画像です。

おわりに

READMEは他者が見てすぐに理解できるようにアニメーションを加えた方が絶対に好印象になります。
今まで静止画やテキストだけで公開していた方は本当にいますぐこれらのツールを使って、リポジトリを公開するようにしましょう。
そして、登壇発表時にコマンドが実行不可能で失敗してしまった方やこれから登壇しようとしている方はは同じ轍を踏まないようにasciinemaの利用を強くすすめます!

  • このエントリーをはてなブックマークに追加

エウレカでは、一緒に働いていただける方を絶賛募集中です。募集中の職種はこちらからご確認ください!皆様のエントリーをお待ちしております!

Recommend

SREエンジニアとしてエウレカにジョインしました!

Go言語でもくもくする会「ごもく会」第二回を開催しました