タダケンのEnjoy Tech

楽しみながらラクに成果を上げる仕組みを考える

Macで画面を録画してGIFに変換する方法

f:id:tadaken3:20171013002002p:plain

こんにちは!
タダケン(@tadaken3)です。

ブログやTwitterなどでアプリの操作方法を伝えたい場合に、動画で表現できるとわかりやすいですよね。

とくに自分の作ったアプリ、ツールをGithubに公開するときにGIF動画で、アプリのデモがあるとわかりやすさ倍増です。

今回は、Macで画面を録画する方法と録画したファイルからGIF動画を作る方法をご紹介します。

f:id:tadaken3:20171012235025g:plain

QuickTime Playerで画面を録画する

画面を録画するにはMacの標準ソフトであるQuickTimePlayerを使います。QuickTimePlayerがない場合はこちらからダウンロードしてください。

QuickTimePlayerはLaunchpadから「その他」で見つかると思います。

f:id:tadaken3:20171012233609j:plain

画面を収録するには、QuickTimePlayerを起動し、ファイル>新規収録画面をクリックします。 f:id:tadaken3:20171012233659p:plain

すると「画面収録」という画面が立ち上がります。赤い丸をクリックします。

f:id:tadaken3:20171012233734p:plain

下記の画面がでできます。マウスをドラッグして録画する範囲を指定できます。すると画面撮影が始まります。

f:id:tadaken3:20171012233811p:plain

撮影を終了したい場合は、メニューバーにある停止ボダンをクリックするか、Command + Control + esc キーを同時に押すと撮影終了です。

これで.mov形式のファイルができました。

f:id:tadaken3:20171013004331p:plain

FFmpegを使ってmovファイルをgifに変換する

FFmpegは動画や音声を記録・変換・再生するためのソフトです。コマンドラインから使用することができるので、大量の動画などを処理するときや処理を自動化したいときに便利です。

いくつかGUIのGIF変換アプリを試してみたのですが、細かいオプションも指定できるので、FFmpegのほうが個人的には楽でした。

FFmpegをインストールする

FFmpegはHomebrewを使ってインストールします。

$brew install ffmpeg

インストールできたら、無事に動くか確認しましょう。「ffmpeg -version」でバージョンを確認します。

$ffmpeg -version
ffmpeg version 3.3.4 Copyright (c) 2000-2017 the FFmpeg developers

という感じで表示されれば成功です。

ffmpegコマンドでmovからgifに変換する

では、早速GIF画像に変換します。オプションはたくさんあるのですが、よく使うのは以下ものです。

  • -i:元となるmovファイルを指定
  • -r:フレームレート
  • -ss:開始時間
  • -t:開始時間からの経過時間

フレームレートは高いほどGIF画像がなめらかになりますが、ファイルサイズも大きくなります。

例えば、mov形式のファイルをフレームレート10でGIFに変換する場合は下記のコマンドを実行します。

$ffmpeg -i input.mov -r 10 output.gif

再生時間を指定して変換する場合はこのようになります。動画の最初から10秒間の部分だけGIFに変換されます。

 $ffmpeg -i input.mov -r 10 -ss 00:00:00.000 -t 00:00:10.000 output.gif

その他のオプションは

$ffmpeg -h

で確認できます。

まとめ

今回は

  • QuickTime Playerで画面を撮影する方法
  • ffmpegを使ってコマンドラインからGIFに変換する方法

をお伝えしました。

画面操作を撮影して、GIF動画に変換するケースは結構あると思いますので、知っておくと便利なテクニックです。とくにMacのアプリを人に紹介する場合など重宝します。

追記:2018/08/17

パレットを指定して作成すると、きれいなgifがつくれます。

$ffmpeg -i input.mov -vf palettegen -y palette.png
$ffmpeg -i input.mov -i palette.png -lavfi paletteuse -y -r 24 output.gif

詳しくは以下の記事も参考にしてみてください

craftzdog.hateblo.jp

読者登録、Twiiterアカウントのフォローをお願いします!

本ブログではプログラミングや仕事効率化に関する情報を公開しています。よろしければ、ブログの読者登録もしくはTwitterアカウントをフォローしていただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。