Macで簡単にgifを作ろう！

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の15日目の記事です。

tl;dr

• Macで簡単に画面の録画ができる
• gifの作成もできる
• ブログ上でのデモ動画はこうやって作ろう！

目次

1. 画面の録画のやり方
2. gifの作成方法
   1. ffmpegとimagemagickのインストール
   2. gifの作成
3. まとめ

画面の録画のやり方

Mojaveからはcommand + shift + 5で画面の録画をすることができます。

• 画面全体の収録
• 選択部分の収録

の２つから選択することができます

余談ですが、スクリーンキャプチャを撮る方法はcommand + shift + 3またはcommand + shift + 4です。

gifの作成方法

ffmpegとimagemagickのインストール

brew install ffmpeg
brew install imagemagick

gifの作成

cd //gifにしたい動画のあるディレクトリに行きます
mkdir result
ffmpeg -i tmp.mov -an -r 10 ./result/%04d.png
cd result
convert *.png -resize 40% output_%04d.png
convert output_*.png result.gif

参考にさせていただきました。 https://qiita.com/kosuke0820/items/ebeb0c59b603c7224eac

注意

これはエンジニア向けに書いているので、アップロード先にはてなブログを想定しています。はてなブログは1ファイル10MBまでしか写真を投稿できないので、長い動画は短くしたり画質を落とす必要があります。（20181215現在）

自分は長めの動画を作ってしまい、何故アップロード出来ないか必死に原因究明していました…

まとめ

スクリーンキャプチャを何枚も撮って貼り付けるのは冗長的になることも多いし、デモ動画は実際に動いているところを貼り付けて見てもらうほうが早いと思います。

Firebase RealtimeDatabaseで実際に動いているところを見せたいときに活用しました。