Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
60
Help us understand the problem. What is going on with this article?
@kosuke0820

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

More than 1 year has passed since last update.

この半年の成果物を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

参考 & メモ

60
Help us understand the problem. What is going on with this article?
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
kosuke0820
Frontend Developer / Vue / React
hey-inc
インターネットビジネスの企画・開発・運営

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
60
Help us understand the problem. What is going on with this article?