【技術ブログで使える】Macで画面収録のgifアニメーションをつくる方法【プログラミング初心者向け】

ウサギ
ウサギ

Macを操作している様子のgifアニメをつくりたいの!

イヌ
イヌ

おっけー!

Macを利用して、画面収録のgifアニメーションのつくりかたを説明していくね!

ウサギ
ウサギ

おなしゃす!!

✅ 本記事の内容

・QuickTime Playerの画面収録で操作動画を録画する
・FFmpegを利用し、movファイルをgifファイルに変換する

✅ 本記事の信頼性

イヌ
イヌ

・小規模の開発会社、上場企業2社でエンジニアを経験

・正社員、フリーランス合わせて10年以上エンジニアとして活動

・現在、フリーランスエンジニアとして時給5桁で活動中

この記事を書いているイヌは10年前、独学でプログラミングを始めました。
わかりやすい技術記事を書くことを意識しています。

技術ブログやQiitaなどを書いているときに、文字や画像だけでは伝わりにくい表現がありますよね。

そんなときは動画を利用すれば、一発で解決!するかも〜。

ただ、画面収録の動画をmp4やmovのままだと、容量が重いし、動画再生の設定が必要です。

gifアニメーションなら、画像としてページに埋め込んで、ループ再生なので、手軽です。

画面収録から、gifアニメーションへの変換まで、解説します。

QuickTime Playerの画面収録で操作動画を録画する

まず、QuickTime Playerを起動し、「ファイル」→「新規画面収録」をクリックします。

画面収録の範囲を選ぶ枠が表示されます。

ドラッグや枠の端にあるサイズ変更で領域を決めて、Enterで確定します。

画面収録の作業をして、右上の「■」の停止ボタンを押します。

すると、デスクトップに「画面収録 2020-11-07 16.00.38.mov」のように、録画した日時の名前のファイル名で保存されます。

(もし「.mov」拡張子が表示されていなければ、Finder→環境設定→詳細→「すべてのファイル拡張子名を表示」にチェックをいれます)

ファイル名に日本語やスペースが入っていると、取り扱いしづらいので、以下のように名前を変更します。

「画面収録 2020-11-07 16.00.38.mov」→「my-movie.mov」

ご自身のわかりやすい名前を、英数字でつけることをおすすめします。

FFmpegを利用し、movファイルをgifファイルに変換する

この記事では、FFmpegというフリーソフトウェアを利用して、movファイルからgifアニメーションファイルに変換します。

FFmpegをMacにインストールする前に、Macのアプリケーションやソフトウェアを手軽に管理する、パッケージ管理システムであるHomebrewをインストールします。

Homebrewを使うと、FFmpegをインストールするために必要なほかのソフトウェアもすべてインストールしてくれるので、便利です。

流れとしては、

  • Homebrewをインストールする
  • FFmpegをインストールする
  • FFmpegでmovファイルをgifファイルに変換する

です。

まずはHomebrewをインストールします。

https://brew.sh/index_ja

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
Code language: JavaScript (javascript)

上記のコマンドをターミナルで実行します。

インストールが終わったら、FFmpegをインストールします。

$ brew install ffmpeg

さまざまなライブラリがインストールされるので、インストールが終わるまでしばらくかかりますので、気長に待ってください。

インストールが終わったら、ffmpegコマンドが利用できるようになります。

まずは基本のコマンドです。

  • デスクトップにあるmy-movie.movを、my-movie.gifに変換し、デスクトップに保存する
$ ffmpeg -i ~/Desktop/my-movie.mov ~/Desktop/my-movie.gif
Code language: JavaScript (javascript)

次はサイズを変更するコマンドです。

  • 横を640pxでアスペクト比を保って変換する
$ ffmpeg -i ~/Desktop/my-movie.mov -vf "scale=640:-1" ~/Desktop/my-movie.gif
Code language: JavaScript (javascript)
  • 縦の640pxでアスペクト比を保って変換する
$ ffmpeg -i ~/Desktop/my-movie.mov -vf "scale=-1:640" ~/Desktop/my-movie.gif
Code language: JavaScript (javascript)
  • 横1920px、縦1080px固定で変換する(比率は自分で計算する必要がある)
$ ffmpeg -i ~/Desktop/my-movie.mov -s 1920×1080 ~/Desktop/my-movie.gif
Code language: JavaScript (javascript)

次はサイズを変更するコマンドです。

  • フレームレートを10で変換(指定しない場合はmovのフレームレートのまま)
$ ffmpeg -i ~/Desktop/my-movie.mov -r 10 ~/Desktop/my-movie.gif
Code language: JavaScript (javascript)

すべて適用したコマンドは以下のとおりです。

  • 横を1024pxでアスペクト比を保ってリサイズ
  • フレームレートを10で変換
$ ffmpeg -i ~/Desktop/my-movie.mov -vf "scale=1024:-1" -r 10 ~/Desktop/my-movie.gif
Code language: JavaScript (javascript)

変換後の画像を埋め込むと以下のとおりです。

FFmpegは、さまざまが画像、音声、動画の変換が可能なので、興味があれば、調べてみてください!

イヌ
イヌ

gifアニメーションの作り方でした!

がんばって技術記事、書いていきましょ〜

ウサギ
ウサギ

参考になった!ありがとう!

またね〜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です