「キャプチャにGifを貼るのはさすがにジジイっすよ」

はじめに

タイトルは同僚に言われた一言です。
GitHubやドキュメントに操作手順や不具合の再現を画面キャプチャで動画として貼り付けることは日常的にありますよね。
そういうときに私はずっとGifアニメーションを貼り付けていました。
しかし、同僚にタイトルの一言を刺され、H.264/mp4を使うようになったという話を書きます。

従来の手法

具体的には、以下のプロセスを行っていました。

1. Giphy Capture(以下Giphy)でキャプチャ
2. Giphyで不要な部分のカット、注釈を入れるなどの簡易編集
3. Gifとしてexport
4. 貼り付け

なぜGifを使っていたのか

動画ファイルは重たいという教育で育ったので、そうだと思い込んでいました。
H.264で吐き出したことはあるのですが、実際撮って出しだとファイルサイズは大きかったです。
エンコードすれば減るのかもしれないけど手間だし、どれくらい減るのか実感がなかったというのもあります。

なぜGifはだめなのか

• Gifは256色しか使えない
• 適切に圧縮した動画ファイルよりサイズが大きい

じゃあなんでいままでgifだったの？

• gifは互換性の高いフォーマットとして昔からあった
• H.264/movは2003年に策定されたが、初期はブラウザ上での再生ができなかった
• chromeが2011に対応を一度やめてから翌年に撤回するなどのゴタゴタがあった
• githubがh264/mov,mp4に対応したのは2021/5(https://github.blog/news-insights/product-news/video-uploads-available-github/)

H.264/mov,mp4について

H.264はコーデックでAVCとも呼ばれています。
mov, mp4はコンテナフォーマットです。
H.265など他のエンコーディングもありますが、互換性・圧縮率・ハードウェア支援によるエンコード・デコードのバランスで普及しています。

実際どういうプロセスでやればいいの

• 1.キャプチャする
• 2.編集する
• 3.再エンコーディングする

1.キャプチャする

macなら標準の画面収録（shift + command + 5）でできます。
kapやgiphyなどのキャプチャツールも多数あるので、お好みで。
ただし、それらはH.264/movでの書き出しは出来るものの、品質が高い状態なので、ファイルサイズが多いことに留意です。

2. 編集する

これは必要に応じて行ってください。
私は1と合わせてGiphyで行うようにしています。

3. 再エンコーディングする

1のファイルサイズが大きいため、再エンコーディングで圧縮しましょう。
ffmpegがCLIツールとしてはデファクトスタンダードですが、こいつがエンコーディングってめんどくさいと感じる原因でもあります。

とくにこだわりなく適当に小さくしたいときは魔法の呪文として以下でよさそう。
alias登録しておくとよいかもしれません。

$ ffmpeg -i input.mp4 -c:v libx264 -crf 25 -preset medium output.mp4

コマンドのオプションは次のとおりです。

• -i input.mp4: 入力ファイルをinput.mp4とする
• -c:v libx264: H.264エンコーダーを用いる
• -crf 25: 圧縮品質(Constant Rate Factor), 18でほぼ無劣化、22がデフォルト
• -preset medium: エンコード自体の速さと品質とのトレードオフ。mediumはぼちぼち

GUIでやりたい、という場合はHandbrakeなどのラッパーもあるのでそちらを使う選択肢もあります。

やってみる

実際にどれくらいのサイズになるのか、Giphyで10秒程度の動画を取ってみて、gif,mp4,エンコしたmp4を比べてみましょう。

• 解像度: 1392*780
• 時間: 11秒

形式	ファイルサイズ
gif	8.4MB
撮って出しのmp4	135.3MB
再エンコーディングmp4	1MB

圧倒的だった。画質は大差ないです。
ちなみにエンコードにかかった時間は3秒でした。

終わりに

これからはmp4にします。
キャプチャ・簡易編集・再エンコーディングのオールインワンで手頃なアプリあれば教えて下さい。