Pull Requestを出すときに動作確認としてトリミングされたSimulatorの動画を貼り付けたい


※この記事の手順よりも恐らくもっと簡単な方法があるはずです。どうしても他に方法が見つからない場合のみ、活用することをお勧めします

[追記]

2021年05月から、動画ファイルがアップロードできるようになりました
公式のツイート

PRに動画を貼りたい

Pull Requestを出すときに、動作確認として動画を貼りたい!
でも、GitHubからは動画ファイルはアップロードできないって言われちゃう

そこで、以下の2パターン

トリミングは前後カットだけでいい
  • simulatorの画面を録画
  • Quick Time Playerでトリミング、大きさを変更
  • ファイルをGifに変換
細かくトリミングしたい
  • simulatorの画面を録画
  • iMovieでトリミング、再生速度設定、画面サイズの変更、ファイルを軽量化
  • Quick Time Playerで動画の向きを変更、大きさを変更
  • ファイルをGifに変換

という恐らくもっと楽な方法もあるであろう工程(今の私の限界)を踏んで、
GifファイルにすることでPRに貼り付ける

simulatorの画面を録画

【Swift5/Xcode】Xcodeのシミュレーターの画面撮影(画面録画)する方法
↑こちらの記事を参考に・・・

Xcodeでビルドして、simulatorを開く。

ターミナルを開いて、プロジェクトのディレクトリまで移動する。

$ xcrun simctl io booted recordVid ファイル名.mov

このコマンドで録画がスタート

simulatorを好きなように操作したら、、、

Control + C で録画を停止。

すると、simulatorの画面部分のみを録画したファイルが、プロジェクトフォルダ内に保存される。

(Quick Time Playerでトリミング)

QuickTime Playerでは動画の切り取りと結合ができる
↑こちらの記事を参考に・・・

Quick Time Playerは、動画の前後でいらない部分をカットできる

もし、真ん中で切りたい部分があれば、

□■□ 前半部分とカットしたものと後半部分をカットしたものを新規保存で用意して、

前半部分をQuick Time Playerで開き、後半部分をFinderからドラッグしてくっつける!(前半と後半は逆でも可)

でも・・・
真ん中部分とかでカットしたい数が多いときはちょっと面倒・・・

そんなときは↓

iMovieでトリミング、再生速度設定、画面サイズの変更、ファイルを軽量化

iMovieを使えば、動画の真ん中部分でも簡単にカットできる!

iMovieを初めて使う時に、わけが分からなくなる点を整理する

この記事とかをみて、イベントを作成→Finderからドラッグして編集したい動画を取り込む!

カットしたい部分の先頭にカーソルを当てて右クリック、「Split Clip(クリップを分割)」で動画を分ける。

さらに、カットしたい部分の後ろにカーソルを当てて右クリック、「Split Clip」で、

□■□■□ カットしたい部分■ と 残したい部分□ に分ける。

カットしたい部分■に右クリックをして「削除」

すると取っておきたい部分だけが残った □□□ ができる!

画面サイズの変更

iMovieは動画の比率が決まっており、simulatorで撮った映像をiMovieで編集してそのまま保存しようとすると、横長の長方形の真ん中に縦長の動画があって、サイドが黒い動画になってしまう。

↓こんな感じ

なので、

iMovieでは一度動画を横向きにします!

画面右上の直角2つで四角を作ってるようなマーク(クロップ)をクリック、

フィットを選択(サイズ調整してクロップでも可)で

この回転させるボタンをクリック(後で縦にするのでどっち向きでもOK)

画面が横向きになる!

容量を小さくして保存する

ここからは、GitHubに載せるため少しでも容量を小さくするためにやることで、

元から小さい動画だったら不要の場合もあります。

  • 動画を早回しにする

早回しにすることで、見る側もサクッと見れるので便利。

画面右上のこの部分の時計みたいなメーターみたいなマークをクリック。

速度のところ「速く」を選ぶと、2/4/8/20倍速を選べる。

「カスタム」にすると百分率で設定でき、125とかにするとどんな動きをしているか分かり易く、かつサクサク見れるのでおすすめ

  • ファイルを保存(画質を荒くする)

動作確認するだけなら何やっているか判ればよくて、高画質とかはいらない!
って感じなら、この共有ボタンを押して

「ファイル」を選択。

解像度を720p、品質を中とかに下げる。(ここはお好みで

そうしたら、「次へ」を押してファイルを保存!

Quick Time Playerで動画の向きを変更、大きさを変更

向きを変更

iMovieで編集した動画をもう一度Quick Time Playerで開く。

そうすると、端っこがちょっとだけ黒くなった横向きの動画が開かれる。

編集 → 時計回りに回転(反時計回りに回転) → 動画が縦になる

大きさを変更

次は「ファイル」を選択して、「書き出す」をクリック。

720pxとかを選択。(480でもいいかもしれないけどやってないので分かりません

そして保存!

ここまでで、
余分な部分がカットされて、必要最低限の画質・大きさの動画が出来上がったので
やっとGifに変換します!長い!

ファイルをGifに変換

ACONVERT.COM

このサイトを使って.movを.gifにします!

FILEを選んで→「ファイルを選択」→ これまでの編集の最終形態を選択 → 今すぐ変換

で変換できるのを少し待って・・・

オペレーティングの左側のsaveボタンをクリック

すると、新規タブでファイル情報が開かれるので、「ファイルを圧縮」を選択。

するとFinderのダウンロード内にZipファイルが保存されるので、解凍してgifファイルを取り出す。

それをGithubの編集画面にドラッグすれば、動作確認の動画を貼り付けることができる