STORES Product Blog

こだわりを持ったお商売を支える「STORES」のテクノロジー部門のメンバーによるブログです。

issueやPRに貼る動画を編集しよう!

蒸し暑い日々が続きますね。

こんにちは!

STORES 決済 モバイルチームの Engineering Manager、
iOS アプリ・SDKの開発を担当しております。 いわいです。

みなさん、issueやPRを作成する時に動画を貼ったりしますよね?
折角貼るなら、ファイルサイズを軽くしたり、見やすく編集したりしたいですよね?
ぼくはしたいです!

というわけで、このブログは簡単に動画を編集するお話です。

※はてなブログには動画を貼れない為、動画はDropboxのリンクになっております。ご了承ください。

QuickTime Player

トリミング

まずはトリミング。

ぼくは iOSエンジニアなので、iPhone や iPad でアプリが動作している動画を撮ることが多いです。
その際に、前後に不要な部分が録画されてたりする場合は QuickTime Player を使ってトリミングをしています。

使い方は簡単で、皆さんがお使いの Macに入ってる QuickTime Player.app で編集したい動画を開き、

  • 編集メニュー → トリミング… を選ぶ
  • 黄色い枠をいじって不要な部分をカット

だけです!

編集メニュー → トリミング…

   

黄色い枠をいじってトリミング

あら簡単

変更前 トリミング後
. www.dropbox.com www.dropbox.com

また、QuickTime Playerでは、動画から音声を削除するなどもできるので、
カメラで撮影した動画に仕事しながら聞いていた音楽も入っちゃっている時などに便利です。

動画からオーディオを削除することもできます

ffmpeg

ここからの動画編集には ffmpeg を利用します。

ffmpeg.org

ffmpeg は Homebrew で簡単にインストールできます。

brew install ffmpeg

解像度を変更する

年々デバイスの解像度の向上に伴い画面録画した動画も高解像度化しているので、高解像度である必要がなければ解像度を落としてファイルサイズを小さくしてあげましょう!

ffmpegを使って動画の解像度を変更するのは以下のコマンドです。

ffmpeg -i {元動画ファイル} -vf scale={width}:-1 {出力動画ファイル}

例: 動画のwidthを 444 にする (アスペクト比を維持)

ffmpeg -i inputFile.mp4 -vf scale=444:-1 outputFile.mp4
変更前 解像度変更後
www.dropbox.com www.dropbox.com

フレームレートを変更する

動画ファイルのサイズが大きいとGithubに貼れなかったりするので(10MB上限)、フレームレートを小さくしてファイルサイズを小さくしましょう。

ffmpegを使って動画のフレームレートを変更するのは以下のコマンドです。

ffmpeg -i {元動画ファイル} -r {FPS} {出力動画ファイル}

例: FPSを10にする

ffmpeg -i inputFile.mp4 -r 10 outputFile.mp4
変更前 フレームレート変更後
www.dropbox.com www.dropbox.com

再生速度を変更する

再生時間が長い動画を倍速で再生させたり、UIの動きをじっくりと見せるために 0.5倍速にしたり用途に応じて再生速度を変更してあげるのも時には便利です。

再生速度を n 倍速にする

ffmpeg -i {元動画ファイル} -vf setpts=PTS/{n} -af atempo={n} {出力動画ファイル}

例: 再生速度を 2 倍速にする

ffmpeg -i inputFile.mp4 -vf setpts=PTS/2 -af atempo=2 outputFile.mp4
変更前 再生速度2倍に変更後
www.dropbox.com www.dropbox.com

GIF アニメーションに変換する

GIFアニメーションをGithubに貼ると、ループしながら自動で再生してくれます。
カジュアルに動画を見せたい時などはGIFアニメーションに変換すると便利です。

GIFに変換したいときは、出力ファイル名の拡張子を gif にしてあげるだけです

ffmpeg -i {元動画ファイル} {出力動画ファイル}.gif

MP4などの動画ファイルをただ GIFに変換するとファイルサイズが大きくなってしまうので、解像度変更やFPSの変更とセットで使うと良い感じに仕上がります。

ffmpeg -i {元動画ファイル} -vf scale={width}:-1 -r {fps} {出力動画ファイル}.gif

例: 動画のwidth:400 FPS:10 の GIFにする

ffmpeg -i inputFile.mp4 -vf scale=400:-1 -r 10 outputFile.gif
変更前 GIF & 解像度FPS変更後
www.dropbox.com

色々と便利に動画を編集できますね!

だがしかし!

ffmpegコマンドを覚えて毎回入力するのは大変ですよね。

なので、スクリプトにしてみました。

convertToGif.sh

#!/bin/sh

INPUT_FILE_NAME=$1
WIDTH=$2
FPS=$3
PLAYBACK_SPEED=$4
OUTPUT_FILE_NAME=${INPUT_FILE_NAME%.*}

ffmpeg -i "$INPUT_FILE_NAME" -vf setpts=PTS/"$PLAYBACK_SPEED",scale="$WIDTH":-1 -af atempo="$PLAYBACK_SPEED" -r "$FPS" "$OUTPUT_FILE_NAME.gif"

使用例

  • 解像度を横幅 400
  • FPSを20
  • 再生速度 3倍
  • のGIFファイルを生成
./convertToGif inputFile.mp4 400 20 3
変更前 変更後
www.dropbox.com

サクッと変換!あら便利!

ぼくはこのファイルを Downloadsフォルダに置いて使ってます。

まとめ

issueやPRを見てくれる人がストレス無く動画を見られるように一工夫して楽しいエンジニアライフを!