13
7

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 1 year has passed since last update.

GitHubにデモ動画を簡単に埋め込む

Last updated at Posted at 2022-02-27

GitHubのREADME.mdにデモ動画を埋め込む方法を自身の記録用として記すことにしました。(Windows10)

手順は次の通りです
1.デモ動画を撮る
2.デモ動画の画面サイズを小さくする
3.デモ動画をGIFファイルに変換する
4.README.mdに埋め込む

1.デモ動画を撮る

Windows10の場合、標準で画面録画をできるので利用していきます
※ただし、録画するウィンドウは1つのみになります。また、録画するウィンドウはあらかじめ出しておく必要があります

Windows + Gで以下のようなものが出るので丸いところをクリックして録画します
image.png

これでデモ動画はできました

2.デモ動画の画面サイズを小さくする

画面録画をしているのでサイズが大きくなりがちです
画面のサイズ自体を小さくするためにこちらのサービスを使いました(アカウント登録をすれば無料でできます)

Adobe Creative Cloud Express 無料でビデオをサイズ変更

動画を選択してサイズをカスタムで指定すれば小さいサイズにしてくれます

3.デモ動画をGIFファイルに変換する

mp4ファイルなどの動画をGIFファイルに変換するサイトやソフトはたくさんあるので、何かしらを使ってGIFファイルに変換します
EZGIF.com Video to GIF converter

Processingで作った全然正確じゃない太陽系モデルのデモ動画はこんなのになりました↓
ezgif.com-gif-maker.gif

4.README.mdに埋め込む

調べているとWikiリポジトリをcloneするというのが大体ですが、もっと簡単な方法を見つけました。こちらのサイトを参考にするとわかりやすいです
GitHub の Wiki に画像を貼り付ける一番簡単な方法(Wiki リポジトリを clone しないバージョン)

手順としては、

  • GitHub Issueに貼り付けたい画像をドラッグ&ドロップ
  • 生成されたタグをコピー
  • GitHub Wikiに貼り付ける
  • README.mdにも貼り付ける
***DEMO:***

![demo](コピーしたタグhttps://user.images......gif)

おわりに

私が作ったデモ動画はこのような感じになりました(実際は動いています)↓
image.png
Solar System Model -GitHub

Wikiに貼るときに画像が大きすぎると貼れないので、どうにかして簡単にサイズを小さくできないか、簡単に埋め込められないかと考えた結果です。
GitHub自体もまだ慣れていなくて試行錯誤の連続ですが少しずつ使いこなしていければと思っています💦

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?