GitHubのReadmeに動画を載せる方法とMP4をgifに変換する方法

githubに動画を載せる方法の備忘録です

極力簡単に
わかりやすく
記録残せたらと思います。

手順

1,ターミナルのcdであたまのページへ移動
2,Homebrewをインストール（ターミナルへコード入力）
3,ffmpegとimagemagickをインストール（ターミナルへコード入力）
4,MP4をgifに変換
MP4→pngで細切れにする→gifへ圧縮する
5,Githubでissue作成しgifをドラッグ＆ドロップ
6,UL後に表示されたURLをReadmeにコピペ

1,ターミナルのcdであたまのページへ移動

2,Homebrewをインストール（ターミナルへコード入力）

インストールがまだの場合は以下のコードをターミナルへ入力
参照ページは以下
Homebrew

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

3,ffmpegとimagemagickをインストール（ターミナルへコード入力）

#ffmpegインストールコマンド
$ brew install ffmpeg

#imagemagickインストールコマンド(過去にインストールしたことある人はこの手順は不要です）
$ brew install imagemagick

4,MP4(またはMOV)をgifに変換

MP4→pngで細切れにする→gifへ圧縮する
準備
①変換用のフォルダを作りそこに変換したい動画を格納
②動画を入れているフォルダへ移動

$ cd 動画を格納しているフォルダ名

実行

#動画を10frames/secでpng作成
#拡張子はmovの時はmp4ではなくmovと変えてください
#(追記！！)この時ファイル名フォルダ名にスペースが含まれているとバグることがあるので事前に名前は変更しておきます。
$ ffmpeg -i 動画のファイル名.mp4 -an -r 10 %04d.png

#リサイズのコマンドはこのままコピペで使えます
#作成したpngを40%にリサイズ
$ convert *.png -resize 40% output_%04d.png

#gifに変換
$ convert output_*.png つけたいファイル名.gif

変換についての参照ページ
off

5,Githubでissue作成しgifをドラッグ＆ドロップ

①githubのIssuesを開き、右端にあるNew issueという緑のボタンを押すと作成できます。

②以下の画面にgifをドラッグ＆ドロップでURLが作成されます。

作成方法参照ページ
GitHub のREADME にgif 画像を表示する1番簡単な方法 #github #gif

6,UL後に表示されたURLをReadmeにコピペ

①issuesで作成されたURLをコピーし、
Submit new issueを押す

②Readmeに戻りURLをペーストしたら完了

画像を軽くする方法

2020/5/22追記
画像によっては容量が大きすぎてgitにあげられない事があったので
普段使用する圧縮用のURLを記述します。
ドラッグ＆ドロップですこぶる簡単です。

①compressor.io
②I❤️IMG
③gifcompressor

参照ページ

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

終わりに

参照ページにも記載がございますが、Githubに.gifをあげる方法は複数あり
以下があります。個人的には画像の入れ替えや手軽さを考え、issueでのやり方を参考にさせていただきました。

①ブランチを切ってそこにアップロード
②Github wikiにアップロード
③issueにアップロード

issueへのUL上限は10MBです。
10秒ほどの動画で1.5MBだったのでいけましたが
40秒のものは完全にオーバーしてしまい無理でした。
短めに撮影される事をお勧めいたします。

初学者なため記述の不備やアドバイスなどご指摘、ご教示頂ければ幸いです。
最後までご拝読いただき、ありがとうございます。