えんじにあメモ

試してみた技術とか、たまに家電ネタ

Macの画面キャプチャで高品質なGIFを作る

最近Macの画面キャプチャ(動画)を取る機会があったのでまとめる

きっかけ

git-open という、ターミナルからgitのremoteURLをブラウザで開くCLIツールのGo版(元々npmで提供されていたものを使っていたが、)を作った際に、READMEに動作のアニメーションGIFを置きたいと思った

GIPHY Captureという前にも使ったことのあるアプリを使って画面キャプチャのGIFを作ってみたが、 最高画質の設定で作成しても若干荒く微妙だった 🤔

今回作った方法

GIF作成には Gifski というアプリを使いました

Gifski

Gifski

  • Sindre Sorhus
  • ビデオ
  • 無料
apps.apple.com

Gifskiは動画ファイルを読み込みGIFへの変換を行います

そのため事前に画面キャプチャの動画を撮る必要がありますが、MacのMojave以降だと「Command(⌘) + Shift + 5」のショートカットキーで撮ることができます

撮り方は以下に記載されています(範囲選択なども可能)

support.apple.com

TouchBarが付いているMacであれば録画の停止をTouchBar上から行うことができるので、カーソルが画面内に入らなくて良い(数少ないTouchBarの利点)

録画して保存した動画ファイルをGifskiから開く

f:id:shosfs:20200208004814p:plain

サイズやQualityなどを指定して"Convert"を実行するだけでGIF作成完了 👍

出来上がったGIF

実際にGitHubのREADMEにも上げているものがコチラ https://user-images.githubusercontent.com/26164869/73953393-ae0dd500-4943-11ea-91e2-fd7b4278c71b.gif

すごくキレイ ✨

ちなみにGIPHY Captureで撮った同じキャプチャ(厳密には録画ファイルを再生したとこを撮ったもの)が↓コチラ

なんか薄い 😞

あとがき

ということでこれから画面キャプチャGIF作る際は、Mac標準の画面録画+Gifski でいきたいと思います。

またGIFを作るきっかけとなった git-open ですが、
意外と便利で、自分はgit push後の確認やPR出す際に重宝してるのでよければ使ってみてください ←←

github.com