GitHub
ImageMagick
ffmpeg
gif

GithubのReadmeに荒くないgifを作成から貼り付けまで

この半年の成果物をGithubにあげるのに感覚的にわかってもらう為にgifをどうしても貼りたかった。
ほぼ他の方のPostと内容は同じですが、個人的に忘れると思うので備忘録を残す。
Githubにすでにリポジトリがある前提で話を進めます。

ffmpeg、Image Magicのインストール

  • ffmpeg - 無料で使える動画や音声のエンコーダです。
  • Image Magick - スクリーンショットや画像の圧縮や変換などをしてくれます。

どちらもCLI上で操作できます。

homebrewでインストールて行きます。
※homebrewがインストールがまだの方はこちらから

brew install ffmpeg
brew install imagemagick

.gifへ変換

Quicktime Playerの画面収録作った.movや.mp4の動画ファイルをgifに変換します。

cd 動画のあるディレクトリ
mkdir out  // この後生成される画像類のフォルダの準備
ffmpeg -i sample.mp4 -an -r 10 %04d.png  // 10frames/secでpng作成
cd out
convert *.png -resize 40% output_%04d.png  // 作成したpngを40%にリサイズ
convert output_*.png result.gif  //  gifに変換

そうするとoutのフォルダにresult.gifが生成される。

リポジトリに貼り付け

Githubに.gifをあげる方法はいくつかある。

  • ブランチを切ってそこにアップロード
  • Github wikiにアップロード
  • issueにアップロード ←今回はこれ

issueを新しく作ってそこに先ほど作ったファイルをドロップ。
上限が10MBまでのなので注意!

すると上のURLがでるのでそのままReadmeにコピー。

完成!

qiita.gif

参考 & メモ