README用のgifアニメーションを作る方法

README内にコマンドラインやアプリケーションのアニメーション画像を貼る際のgifアニメーションの作り方について調べました。

結論

mac純正のキャプチャソフト、gif変換ソフトffmpeg を使って作る。

キャプチャソフトを使ってアニメーション用のキャプチャを撮影

  1. cmd + shift + 5 でキャプチャソフト起動
  2. 画面全体を収録選択部分を収録 でキャプチャを撮影(オプションからファイルの保存先などを設定可能)

アニメーション用キャプチャをgifに変換

gif変換ツールをインストールしてキャプチャした画像をgifに変換する

ffmpeg

コマンドラインからgif変換できるツール

FFmpeg

homebrew経由でインストール

$ brew install ffmpeg
$ ffmpeg -v
ffmpeg version 5.0.1 Copyright (c) 2000-2022 the FFmpeg developers
  built with Apple clang version 13.1.6 (clang-1316.0.21.2.5)
  ...
$ brew list | grep ffmpeg
ffmpeg

gifに変換

ffmpgeg コマンドでgifに変換する

$ ffmpeg [変換するファイル名] [変換後のファイル名] 
$ ffmpeg -i ~/Desktop/file_name.mov ~/Desktop/file_name.gif
  • ファイル名は拡張子まで書くこと。
  • -r オプションでフレームレートを指定できる。

まとめ

アニメーション画像は初めて作りましたが、思ったより簡単で良かったです。 作り方を覚えておくと何かと役に立ちそうな気がしています。

参照

Macでgifアニメーションを作る恐らく一番楽な方法 - Qiita