30
14

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.

READMEファイルにGif動画を載せる方法

Posted at

概要

動画をGithubリポジトリのREADMEファイルにアップロードする方法を解説します。
Animated GIF-downsized (10).gif

動画をGifに変換する

動画はそのままREADMEファイルに載せることは出来ないので、まずは動画をGifに変換していきます。
GIPHYというサイトでGifを作ることができます。
GIPHYにアクセスしアカウント登録後、画面右上の Createボタンを押します。
スクリーンショット 2020-04-27 12.10.49.jpg

Choose Videoをクリックし動画を選択します。
スクリーンショット 2020-04-27 12.11.00.jpg

再生時間や再生開始時間を調整します。
調整ができたらContinue to Decorateをクリック。
その他カスタマイズもお好みで選択しContinue to UploadUpload to GIPHYをクリックしGifを作成。
スクリーンショット 2020-04-27 12.11.30.png

作成できたら、Mediaをクリック。
スクリーンショット 2020-04-27 12.09.46.jpg

SmallのところのダウンロードをクリックしGifをダウンロード。
※容量が大きいとGitHubにアップロード出来ないため、Smallを選択。
スクリーンショット 2020-04-27 12.10.23.jpg

READMEファイルにGifを載せる

Gif動画をそのまま添付しただけでは反映されないので、
GitHubリポジトリのIssuesにGifをアップロードし、そこのURLを取得していきます。

まずはGitHubリポジトリのIssuesにてNew issueをクリック。
スクリーンショット 2020-04-27 14.02.27.jpg

テキストフィールド下の「Attach files by dragging & dropping, selecting or pasting them.」をクリックし、先ほど作成したGif動画を選択。
スクリーンショット 2020-04-27 14.03.26.jpg

すると数秒してからテキストフィールドにURLが発行されますので全選択してコピーします。
またTitleも記入し、右下のSubmit new issueをクリック。
スクリーンショット 2020-04-27 14.04.18.png

そうしたらソースコードのREADMEファイルに先ほどコピーしたURLをペーストして保存し、再度GitHubにpushします。
するとGitHub上のREADMEファイルでGifが反映されているのが確認できると思います。
Animated GIF-downsized (10).gif

以上です。最後までご覧くださりありがとうございました。

30
14
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
30
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?