LoginSignup
78
64

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-03

この半年の成果物を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 動画のあるディレクトリ
ffmpeg -i sample.mp4 -an -r 10 %04d.png  // 10frames/secでpng作成
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

参考 & メモ

78
64
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
78
64