この記事は

YAMAP エンジニア Advent Calendar 2020 の二日目になる予定です。

久しぶりにブログを書くので緊張しています。

tl;dr

macOS 上で操作内容を QuickTime Player.app (以後、QuickTime Player と記載) で撮影してブログ等に貼りたい場合、撮影した動画 (mov ファイル) を GIF アニメーションに変換したいというニーズが高まりました。以前は、LICECap.app (以後、LICECap と記載) を使っていたのですが、OS のバージョンアップによって使えなくなってしまったので、操作内容を動画で共有することは諦めていました。今回、どうしても動画で残したく、インターネット上を検索すると、あの有名な ffmpeg を使う方法が紹介されていたので試してみました。

www.cockos.com

ffmpeg.org

ffmpeg とは

ffmpeg とは、Wikipedia によると、以下のように解説されています。

FFmpeg（エフエフエムペグ）は動画と音声を記録・変換・再生するためのフリーソフトウェアである。Unix系オペレーティングシステム (OS) 生まれであるが現在ではクロスプラットフォームであり、libavcodec（動画/音声のコーデックライブラリ）、libavformat（動画/音声のコンテナライブラリ）、libswscale（色空間・サイズ変換ライブラリ）、libavfilter（動画のフィルタリングライブラリ）などを含む。ライセンスはコンパイル時のオプションによりLGPLかGPLに決定される。コマンドラインから使用することができる。対応コーデックが多く、多彩なオプションを使用可能なため、幅広く利用されている。

https://ja.wikipedia.org/wiki/FFmpeg

色々な種類の動画をよしなに扱いたい場合に利用するソフトウェアで、今回のように mov ファイルの取り扱いもお手の物だと思います。

また、ffmpeg は、コマンドラインツールとして提供されており、macOS では homebrew でのインストールがお手軽です。

brew install ffmpeg

尚、前後してしまいますが、本記事で利用する環境は、以下の通りです。

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.7
BuildVersion:   19H15

macOS Catalina ですね。

よし、GIF アニメーションを作るぞ

撮影

早速、sl コマンドが動く様子を QuickTime Player で撮影してみました。

f:id:inokara:20201130194208p:plain

撮影した動画は mov 形式で保存されます。一旦、YouTube にアップした動画をご覧下さい。

youtu.be

GIF アニメーションを作る

既に ffmpeg はインストールされていて、既にパスが通っているものとします。

ffmpeg で mov ファイルから、GIF アニメーションを作る場合には、以下のように実行します。

$ ffmpeg -i [MOV ファイル名] -r 10  -vf scale=960:-1 [GIF ファイル名]

GIF ファイルを開くと、以下のように GIF アニメーションが生成されました。

f:id:inokara:20201130205616g:plain

いい感じですね。

ffmpeg で GIF アニメーションを作る際の詳細

ffmpeg で GIF アニメーションを作る際のオプションを見てみたいと思います。

$ ffmpeg -i [MOV ファイル名] -r 10  -vf scale=960:-1 [GIF ファイル名]

-i オプションは、変換元の動画ファイルを指定します。

usage: ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}...

-r オプションでは、フレームレート (1 秒間の動画で見せる静止画の枚数) を指定します。上記の例だと、フレームレートは 10 なので、毎秒の静止画は 10 枚ということになります。

-r rate             set frame rate (Hz value, fraction or abbreviation)

そして、-vf オプションは、様々なフィルタを指定出来るオプションのようですが、今回は scale=960:-1 オプションを使って、横幅 960 でリサイズを行っています。

-vf filter_graph    set video filters

ちょっと遊んでみる

上記に掲載したオプションを弄ってみたいと思います。

$ ffmpeg -i [MOV ファイル名] -r 1  -vf scale=960:-1 [GIF ファイル名]

思いっきりフレームレートを下げてみました。

f:id:inokara:20201130215812g:plain

カクカク感が増したような。

続いて、上下反転させてみます。

$ ffmpeg -i  [MOV ファイル名] -r 10 -vf vflip,hflip -metadata:s:v:0 rotate=0 [GIF ファイル名]

-vf オプションは多彩です。vflip,hflip オプションを付与することで、上下反転を実現しています。

f:id:inokara:20201130220905g:plain

面白いですね。

オチ

ffmpeg にちょっとだけ慣れたところで、ffmpeg を使うきっかけとなった LICECap が動かない件。この記事を書くにあたって、改めて LICECap のサイトを訪れたところ、最新版が配布されていた (LICEcap v1.30 for macOS) ので、最新版をインストールしてみたところ、以下のように LICECap.app で GIF アニメーションを作成することが出来ました。

f:id:inokara:20201130221915g:plain