Pull Requestでちょうどよいgifを上げる方法

こんにちは。久しぶりに出社したら、翌日ふくらはぎが筋肉痛になったエンジニアの奈良です。
スペースマーケットでは、コードレビューはGithubのPullRequest機能を利用しているのですが、
今回は最近取り入れたPullRequest作成がより楽になるTipsを紹介したいと思います。

Android Studioの録画機能

Pull Requestはレビュアーに対して、変更点の説明をする必要があるのですが、そのときに助かるのがスクリーンショットによるキャプチャです。
特に、Androidアプリエンジニアなのでアプリがどのような表示・動作をしているかを説明する機会が多いです。そこでよく使うのが、Android StudioのLogcatにある画面の録画機能、Screen Recordです。

使い方は以下のリンクや画像を参考にしてほしいのですが、エミュレータや機体の動作を簡単に記録できるため、重宝しています。

画面の録画  |  Android デベロッパー  |  Android Developers

しかし、PullRequestで使用しようとなると問題が二つあります。

一つは、Android Studioで録画した動画形式はmp4に限定されます。
Githubに添付できるのは画像のみなので、動画をあげようとするとgif形式にするしかありません。

二つ目は、動画サイズが大きすぎてアップロード上限にひっかかってしまうことです。

File attachments on issues and pull requests - GitHub Docs

GithubのPull Requestに添付できる画像のサイズは10MBが上限です。
単一の画像ならほとんど問題になることはないですが、gifだとすぐに超えてしまいます。

解決法

動画編集を検討したり、取得時にサイズをパラメータを指定して軽くしたりなど、いろいろ試したのですが、
最終的には以下のブログをみつけ、いまはffmpeg + Automatorを使うやり方で落ち着きました。

ffmpegとAutomatorで、動画変換作業を効率化

ffmpegのインストール

多くの方がhomebrewを入れておられると思うので、コマンド一発でインストールできます。

$  brew install ffmpeg

ただ、かなり関連ライブラリが多くインストールするのに時間がかかったので、時間に余裕のあるときに実施するのがおすすめです。

Automatorでワークフロー作成

Automatorを簡単に説明すると、Mac上での操作を自動化してくれる機能です。
今回実施するまで、いろんな使い方を覚えなくてはいけないと思って、敬遠していたのですが、「クイックアクション」→「シェルスクリプトを実行」の組み合わせであれば、
実行条件・操作はAutomatorで、肝心なロジックはシェルスクリプトに任せるだけでほとんど覚えるものなく利用ができました。

ブログを参考にして以下のように設定しています。

簡単ですが、手順は以下のとおりです。
1.  クイックアクションでワークフローを作成
2. 「シェルスクリプトで実行」アクションをワークフローに追加
3. 「ワークフローが受け取る項目」を ムービーファイルに設定
4. 検索対象をFinder.appに設定
5. シェルスクリプトに以下を設定

# mp4ファイルをgifに変換
DIRNAME=`dirname $@`
BASENAME=`basename $@`
FILENAME=${BASENAME%.*}
/usr/local/bin/ffmpeg -i $@ -r 8 -vf scale=320:-1 ${DIRNAME}/${FILENAME}.gif

「$@」に選択したムービーファイルがはいります。
そのファイル名をもとに新しいxxx.gifファイルを生成しています。
そのとき、PullRequest用に320wに変換したり、サイズダウンを実施するためにフレーム・レートを下げています。

利用するときは、LogcatでScreen Recordしたmp4ファイルを右クリック→クイックアクション→作成したワークフローを選択するだけです。

新たにサイズダウン&gif形式に変換されたファイルが作成されます。

このAutomatorの使い方は、スクリプトと対象ファイルさえ変えられればなんにでも応用が聞きます。
例えば、画像ファイルに応用し、320wに幅を揃えるワークフローも作成しました。対象ファイルを画像ファイルにした上で、シェルスクリプトに以下を設定するだけで動作します。

# imageファイルを320wに変換
DIRNAME=`dirname $@`
BASENAME=`basename $@`
FILENAME=${BASENAME%.*}
EXTENSION=${BASENAME##*.}
if [ "${BASENAME}" = "${EXTENSION}" ];then
 NEW_FILENAME="${FILENAME}_320"
else
 NEW_FILENAME="${FILENAME}_320.${EXTENSION}"
fi

/usr/local/bin/ffmpeg -i $@ -vf scale=320:-1 ${DIRNAME}/${NEW_FILENAME}

選択した画像ファイルから320wに揃えた別画像を作成しています。

まとめ

動画・画像ともにレビュアーが見やすいように気軽にアップロードできるようになりました。
動画・画像の編集やローカル作業の自動化は始める前は苦手意識がはたらいてしまうのですが、このffmpegでの動画・画像編集とシェル実行をするだけのAutomatorは気軽にはじめられるので、おすすめです。他の作業もどんどん自動化して行こうかと思います。