はじめに
プログラミング学習をしていく中で、なにかアプリケーションを開発することはよくあると思います。
READMEに開発背景や、使用技術、実装機能など記載するだけでなく実際にそのアプリケーションを動かしているデモ動画があるとどんなアプリケーションかイメージがつくのでいいですよね。
自分は今まで、Wantedlyでしかデモ動画を載せておらずGitHubのREADME上には載せていませんでした。そこで今回は、READMEにてデモ動画と画像を埋め込む方法について共有させて頂きます。
動画の表示方法
調べてみると、GitHubのWikiを用いてやる方法がありましたのでそちらでやってみました。
流れとしては、
- wiki作成
- 作成したwikiリポジトリをローカル上にcloneする
- 動画や画像を入れるためのフォルダを作成し、必要な動画・画像を入れる
- リモート上にプッシュ
-
https://raw.github.com/wiki/[githubユーザー名]/[リポジトリ名]/[動画ファイルへのパス]でアクセスできるので、こちらをREADMEに記載する！
意外と簡単でした！
載せる動画は下記リンクより、mp4からgifに変換しました。
acconvert.com
画像の表示方法
issueを作成して、そこに画像をアップすることでできるらしい！簡単！
流れとしては、
- 新規issueを作成
- issueのコメント欄で、表示させたい画像をドロップする
- アップロードが終わると画像リンクが生成されるため、それをREADMEにそのままコピペ
参考記事
【GitHub】README.md に画像を表示させる簡単な方法
やってみた
雑ですが、こんな感じでできました！（リンクは伏せさせていただきます）
（ちなみにこちらは、自分が開発している社内向けの質問アプリケーションで質問が投稿された際にSlackで通知がとぶという機能の画像です笑）
※追記 デモ動画もgif形式にして、画像アップの方法で出来そうでした！
しかし、ファイルサイズは10MBより小さい必要はありました。
まとめ
今回は、GitHub上に動画と画像を表示させる方法について紹介させて頂きました。
とはいってもすでに多くの方が紹介しているため、自分用にまとめた形になります。
以上！