GitHubのREADME.mdにデモ動画を埋め込む方法を自身の記録用として記すことにしました。(Windows10)
手順は次の通りです
1.デモ動画を撮る
2.デモ動画の画面サイズを小さくする
3.デモ動画をGIFファイルに変換する
4.README.mdに埋め込む
1.デモ動画を撮る
Windows10の場合、標準で画面録画をできるので利用していきます
※ただし、録画するウィンドウは1つのみになります。また、録画するウィンドウはあらかじめ出しておく必要があります
Windows + G
で以下のようなものが出るので丸いところをクリックして録画します
これでデモ動画はできました
2.デモ動画の画面サイズを小さくする
画面録画をしているのでサイズが大きくなりがちです
画面のサイズ自体を小さくするためにこちらのサービスを使いました(アカウント登録をすれば無料でできます)
Adobe Creative Cloud Express 無料でビデオをサイズ変更
動画を選択してサイズをカスタムで指定すれば小さいサイズにしてくれます
3.デモ動画をGIFファイルに変換する
mp4ファイルなどの動画をGIFファイルに変換するサイトやソフトはたくさんあるので、何かしらを使ってGIFファイルに変換します
EZGIF.com Video to GIF converter
Processingで作った全然正確じゃない太陽系モデルのデモ動画はこんなのになりました↓
4.README.mdに埋め込む
調べているとWikiリポジトリをcloneするというのが大体ですが、もっと簡単な方法を見つけました。こちらのサイトを参考にするとわかりやすいです
GitHub の Wiki に画像を貼り付ける一番簡単な方法(Wiki リポジトリを clone しないバージョン)
手順としては、
- GitHub Issueに貼り付けたい画像をドラッグ&ドロップ
- 生成されたタグをコピー
- GitHub Wikiに貼り付ける
- README.mdにも貼り付ける
***DEMO:***
![demo](コピーしたタグhttps://user.images......gif)
おわりに
私が作ったデモ動画はこのような感じになりました(実際は動いています)↓
Solar System Model -GitHub
Wikiに貼るときに画像が大きすぎると貼れないので、どうにかして簡単にサイズを小さくできないか、簡単に埋め込められないかと考えた結果です。
GitHub自体もまだ慣れていなくて試行錯誤の連続ですが少しずつ使いこなしていければと思っています💦