LoginSignup
0
0

More than 1 year has passed since last update.

デモ動画の撮影からREADMEへの挿入まで【Github】

Last updated at Posted at 2021-12-06

エンジニアに転職するべく Railsの勉強を始め、ポートフォリオとしてRailsを用いたWebアプリを制作しました。
自分の制作したアプリの使い方を直感的にアピールするためにデモ動画をREADMEに挿入してみたので手順をまとめます。

1. QuickTimePlayerのインストール

自分のOSに合わせたバージョンをインストールします。

2. 撮影

まずQuickTimePlayerを選択→新規画面収録クリック
スクリーンショット 2021-12-06 14.10.40.png

その後出てくる画面で選択部分を収録を選択→収録をクリック
で見てほしい画面だけを切り取って撮影が始まります。

3. ffmpegを使ってmovからgifへ変換

ffmpeg(エフエフエムペグ)とは動画と音声を変換するためのフリーソフトウェアです。
homebrewを使ってインストールします

brew install ffmpeg
ffmpeg -i [撮影した動画の名前(任意)].mov [撮影した動画の名前(任意)].gif

4. gifをREADMEヘ投稿

GithubのWikiを使用する場合もあるみたいですがカンタンなので自分はissueの方を使用しました。
Githubのリポジトリを開いてissuesを選択→New issue
スクリーンショット 2021-12-06 14.44.20.png

目的のgifをAttach→gifに対応したパスが出てくるのでそれをコピー→Submit new issue
スクリーンショット 2021-12-06 14.45.39.png

このパスをREADMEに記述すると目的のgifが挿入されます!

demo.gif

5. その他

  • 撮影した動画はQuickTimePlayerでカンタンなことなら編集できます。例えば動画の開始地点を変更したかったら編集→トリムで動画の始めの方をカットすることができます。

  • ffmpegでは画像のサイズを変更したりgifの容量を小さくすることもできます。

参考

FFmpegで動画をGIFに変換
GithubやQiitaに載せるgif形式の動画を作成する方法
Githubに画像をアップロードする小技

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