エンジニアに転職するべく Railsの勉強を始め、ポートフォリオとしてRailsを用いたWebアプリを制作しました。
自分の制作したアプリの使い方を直感的にアピールするためにデモ動画をREADMEに挿入してみたので手順をまとめます。
1. QuickTimePlayerのインストール
自分のOSに合わせたバージョンをインストールします。
2. 撮影
まずQuickTimePlayerを選択→新規画面収録クリック
その後出てくる画面で選択部分を収録を選択→収録をクリック
で見てほしい画面だけを切り取って撮影が始まります。
#3. ffmpegを使ってmovからgifへ変換
ffmpeg（エフエフエムペグ）とは動画と音声を変換するためのフリーソフトウェアです。
homebrewを使ってインストールします
brew install ffmpeg
ffmpeg -i [撮影した動画の名前(任意)].mov [撮影した動画の名前(任意)].gif
#4. gifをREADMEヘ投稿
GithubのWikiを使用する場合もあるみたいですがカンタンなので自分はissueの方を使用しました。
Githubのリポジトリを開いてissuesを選択→New issue
目的のgifをAttach→gifに対応したパスが出てくるのでそれをコピー→Submit new issue
このパスをREADMEに記述すると目的のgifが挿入されます！
5. その他
-
撮影した動画はQuickTimePlayerでカンタンなことなら編集できます。例えば動画の開始地点を変更したかったら編集→トリムで動画の始めの方をカットすることができます。
-
ffmpegでは画像のサイズを変更したりgifの容量を小さくすることもできます。
参考
FFmpegで動画をGIFに変換
GithubやQiitaに載せるgif形式の動画を作成する方法
Githubに画像をアップロードする小技