【GitHub】READMEに動画を載せる方法

#概要
GitHubのREADME.mdに動画を載せる方法を記載しています。
また、動画を載せるまでに複数試した内容も記録のために記載しておきます。

動画はGyazo GIFで撮影したものを使用しています。

#試したこと①
###新規issueにURLをペースト
調べた時に1番多く出てきた方法です。
詳細はこちらを参考にして下さい。

自身のGitHubから新規issueを作成します。New issueをクリック。

Gyazo GIFの動画を Write にペーストします。

これだと拡張子が gif ではなく mp4 が作成され、READMEには動画を載せることができませんでした。

一方、画像の場合だと

このようにアップロードされたURLが生成され、READMEにそのままコピーして使用することができます。

動画だと拡張子は mp4 が生成されるため、mp4を gifに変更する方法を考え、次の方法を実行します。

試したこと②

###homebrew で ffmpegをインストールする
Gyazo GIFを使用した短い動画にはffmpegでファイル変換するのが良いという記事が多かったので試しました。
[homebrewをインストールしていない方はこちらでインストールして下さい]
http://brew.sh/index_ja.html

% brew install ffmpeg 

インストールに少し時間がかかりました。
[ffmpegの使い方はこちらで確認して下さい。]
http://tech.ckme.co.jp/ffmpeg.shtml

ffmpegがインストールできたのでgifに変換するコマンドを入力します。

ffmpeg -i 動画データの名前.mov -vf scale=620:-1 -r 10 <動画データの名前>.gif

※上記コード内のscaleは表示サイズです。
scaleは記述しなくても問題ないですが、表示されるサイズが小さくなるため、適切なサイズの指定を行って下さい。

コマンドの結果、エラーが出ました。
調べた結果、エラーが起きる原因はimagemagickをインストールしていなかったからでした。
以下の参考ページのもと、インストールをします。
参考ページはこちら

imagemagickをインストールするとできそうですがなかなか時間を要した為、他の簡単にできる方法を探し、別の方法を試します。

試したこと③

GIPHYを活用

こちらのサイトで簡単にgifに変換できるそうです。

アカウント登録後に使用可能です。
詳しくは下記のサイトで簡単に変更できました。
READMEファイルにGif動画を載せる方法 -Qiita

一応、上記のサイトの手順通りに進めたらREADMEに動画を載せることができたのですが、画質が結構悪くなりました。
また、表示サイズも小さくなりさらに見づらくなりました。
これでは満足いかないので、別の方法を探します。

#試したこと④

手動でgifの拡張子に変更する

簡単な方法をひたすら探していたら遂に見つけました！！
難しいことは考えずに、Gyazo GIFで撮影した動画のURLの拡張子を手動で変えれば、変更できるんじゃない？？
やってみよう。

①で行った「新規issueにURLをペースト」の際に、画像のURLは取得できました。

この画像のURLを参考に、
手動で拡張子をgifに変更して動画のURLを当てはめていきます。

https://gyazo.com/bb11db489695cc74801eca1bbde901c1.mp4.                      # ①で作成したGyazo GIFの動画URL
                    ↓↓↓
https://gyazo.com/bb11db489695cc74801eca1bbde901c1.gif                       # 手動で.gifに変更
                    ↓↓↓
![Image from Gyazo](https://gyazo.com/bb11db489695cc74801eca1bbde901c1.gif)  # 変更後

上記の変更後のURLをREADMEに記述すると、見事にREADMEに動画を載せることができました！！！

遠回りしましたが、簡単できる方法見つけることができてホッとしています。

#おわりに
結果、手動で拡張子をgifに変更するだけでREADMEに動画を載せることができました。
色々試行錯誤して遠回りしましたが、様々な方法があったので今後も試していきたいと思います。

ちなみに動画はGyazo GIFも優秀ですが、
Macにデフォルトで入っているQuickTime Playerで画面を録画することもできます。
下記の記事を参考にして下さい。
【Mac】自分の画面を録画して、即gif動画化する方法 -Qiita

#参考サイト
GitHubのReadmeに動画を載せる方法とMP4をgifに変換する方法 -Qiita
markdownでの画像リサイズ
machida -blog