GIF ファイルで誤解のない情報共有をしよう (macOS)

FFmpeg GitHub Mac brew

記事タイトルとURLをコピーする

アプリケーションサービス部の千葉です。 PullRequest (MergeRequest) をもらったら、コードレビューだけではなくモチロン動作確認もしますよね？
その際に期待する結果を得られなかった場合の情報連携ってどうしてますか？

操作手順を箇条書きで記載するのって大変なうえに伝わりづらいですよね。
動画で伝えるのがラクなのですがファイルサイズが大きくなるし、わざわざダウンロードしてもらうのも申し訳ないな。と

以前関わっていたプロジェクトで自分が出した PullRequest のコメントに GIF が貼ってあって『xxxの手順で確認したところ例外が発生しました』って感じのコメントが添えてくれた方がいて『おお、めちゃくちゃ親切だな』と感じました。

そんなワケで親切には GIF ファイルですよ！

1. 準備

Homebrew で ffmpeg をインストールしてください。

$ brew install ffmpeg

2. QuickTime Player で画面キャプチャ

macOS に標準インストールされている QuickTime Player をつかって画面を録画します。
メニューバーの [File] → [New Screen Recording] からツールを起動して操作手順を収録します。

ref. Appleサポート: MacのQuickTime Playerで画面を収録する

3. 動画の編集

キャプチャされた動画がデスクトップに出力されるので、QuickTime Player で開いて動画を確認してください。
トリミングであれば [Edit] → [Trim] から実施できます、複雑な編集をしたければ iMovie 等でがんばってください。

4. GIF への変換

ffmpeg コマンドをつかって GIF を作成しましょう。
-r オプションで指定している数字はフレームレートです、ファイルサイズとのバランスで値を調整してください。

※ 以下の例では便宜的に QuickTime Player が自動作成するファイル名の『Screen Recording yyyy-mm-dd at hh.mi.ss.mov』でななく『ScreenRecording.mov』ってファイル名にしています

$ ffmpeg -i ~/Desktop/ScreenRecording.mov -r 24 ~/Desktop/ScreenRecording.gif

ほかにも -s オプションを付けることで画像サイズを変換することも可能です。

# 1600 x 900 に変換
$ ffmpeg -i ~/Desktop/ScreenRecording.mov -r 24 -s 1600x900 ~/Desktop/ScreenRecording.gif 

# wsxga みたいに規格で指定することも可能
$ ffmpeg -i ~/Desktop/ScreenRecording.mov -r 24 -s wsxga ~/Desktop/ScreenRecording.gif

5. 確認

Web ブラウザでできあがった GIF ファイルを確認してみましょう。

$ open -a Safari ~/Desktop/ScreenRecording.gif

ScreenRecording

まとめ

こんな感じで動作確認をした際の操作手順なんかが PullRequest のコメントに添えてあったら親切ですね。