0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

GithubのREADMEに、動画を載せたい!

Last updated at Posted at 2021-03-11

READMEに動画を載せようとすると・・

面接等で、Githubを人に見せる時に、中身のコードが一番重要ですが、見る人の負担を軽減するための、見やすいリポジトリも重要かなと思います。
その為に、READMEを書く&整える必要が出てくるのかなと。
文字だけでも、書かないよりかはそのリポジトリの概要が分かるのでいいかなと思うのですが、やはり画像や動画があった方がいいと思います。
筆者は、過去に作成したクイズアプリのREADMEを書いていなかったので、スマホの画面録画をREADMEに載せようかなと思いました。

しかし!!!!!!!!!!!
画像と同じように、コピペしてPreviewで確認してもリンクしか載せられませんでした。

原因は?

筆者の撮影した画面録画は、MP4でした。
どうやら、READMEに上げられる動画ファイルはGifでないといけないみたいだ。
仕方なく、Gifに変換する方法をググることに。。

筆者は、基本情報の学習で暗記したくらいで、ファイルの形式とかに全然精通しておりません。
良く分からないが、こんなサイトを見つけました。
他の記事とかだと、ffmpegとかインストールするやり方が主流?見たいですけど、実際にこのサイトで、変換してみて、簡単且解像度やアニメーション速度に問題がなかったので、いい方法だったのかなと???
zipファイルをダウンロードして、解凍するのが良きかなと。

結果発表~

無事に変換できました。

拡張子にご注目ください。

元のMP4が……
https://user-images.githubusercontent.com/65647834/110725966-df01bd00-825b-11eb-8230-0fedd2d5fb5c.mp4
Gifに変換できた!!!
https://user-images.githubusercontent.com/65647834/110722021-eb364c00-8254-11eb-84b5-9b99988e80a2.gif

あとあと、READMEに貼る前にissueにて、アップロードします。
そして、そのリンクをREADMEに貼って完成です。
こんな感じに。
image.png

おまけ

ちなみに、サイズも変更できるみたいですよ!!! 
※ただ、解像度が悪くなったり、見切れたりする。いいサイトが見つからなかった…
https://www.bannerkoubou.com/anime/gif-resize/
https://www.iloveimg.com/ja/compress-image/compress-gif
ただ、もっといい方法があったかもしれないので、「こうしたほうがいいよ~」ということがありましたら、教えていただけると幸いです。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?