fluid_27’s blog

勉強した内容をアウトプットするためのブログ

githubのREADMEにデモ動画をアップするまでの一連の流れ

PF用に作成したオリジナルアプリなどをgithubのREADMEにデモ動画を載せたい!と思った方もいるかと思います。
macで実際にアプリを操作している際の画面を動画として撮影し、githubに載せるまでの手順をまとめましたので、ぜひ参考にして頂けたら幸いです。

①実際にアプリを操作している画面の動画を撮る

 1. macではデフォルトで「QuickTimePlayer」というアプリが入っているので、
 「アプリケーション」フォルダから QuickTime Player を開いて、メニューバーから「ファイル」>「新規画面収録」の順に選択します。

 2. 撮影する画面を選択。
  ※停止する際は「command + control + esc」キー押下で停止します。

 3. 撮影を開始し、実際にアプリを操作する。

 4. 停止すると自動で撮影したファイルが開かれるので、「完了」押下し、保存します。

 5. 編集
  保存したファイルを開き、実際に使いたい部分だけをトリムします。
  手順としては「編集」> 「トリム」押下し、使いたい部分だけを選択している状態で「トリム」押下。完了したら保存します。

②保存した動画をGIFにする

 保存した動画の拡張子がmovになっているので、GIFに変換します。
 ググれば無料でGIFに変換してくれるサイトが見つかると思うので、それらのサイトを利用します。
 ※筆者は下記サイトを利用しました。
 https://syncer.jp/gif-maker

③GIFをgithubにアップする

 1. github issuesで「New issue」押下します。

 2. 本文(Leave a commentと書いてある部分)に保存していたGIFをドラッグ&ドロップする。

 3. 生成されたタグをコピーし、READMEに貼り付ける。

以上で完了です。

 参考サイト
 Mac で画面を収録する方法 - Apple サポート (日本)
 GIFメーカー (動画や画像からアニメーションを作ろう!)
 GitHubにデモ動画を簡単に埋め込む - Qiita