63
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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 動画のあるディレクトリ
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

参考 & メモ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
63
Help us understand the problem. What are the problem?