なぜGIFアニメーションが必要になったのか
私事ですが、7月1日に転職して、新しい会社でiOSエンジニアとしてのキャリアをスタートしました。
新しいチームでは、レビュアーの確認を容易にする為に、PRにスクリーンショットだけではなく、GIFアニメーションを一緒に添付する方が分かりやすい、
という事で、アニメーションなどの確認の為に、GIFアニメーションをPRに添付する運用を行っています。
その為、シュミレーターで録画したMP4動画をGIFアニメーションに変換する必要がありました。
複数のMP4動画を纏めて変換できると良いなぁ、と思い、会社の人に相談すると、
という記事を紹介して頂きました。
さらに、Automatorを使わなくても、ショートカットでも同じような事が出来ると思うよ、
と教えて頂いたので、ショートカットとクイックアクションで、上記のQiita記事と同じような事ができなか試してみる事にしました。
GIFアニメーションへの変換方法
環境
まずは、私が試した実行環境をメモしておきます。
- Intel Core i9
- macOS Monterey (12.5)
- Simulator 13.4.1 (977.2)
- ショートカット 5.0
- FFmpeg 5.0.1
作るショートカットの説明
Simulatorで録画したMP4動画を複数選択し、右クリック > クイックアクション > 今回作成するカスタムアクションを選択すると、指定のフォルダに、選択したMP4動画のGIFアニメーションを作成するショートカットを作ります。
MP4動画をGIFアニメーションへ変換する部分は、以下のFFmpegのコマンドを使って行います。
ffmpeg \
-i "${INPUT_FILE}" \
-filter_complex "[0:v] fps=10,scale=320:-1,setpts=PTS/1.25,split [a][b];[a] palettegen [p];[b][p] paletteuse" \
"${OUTPUT_FILE}"
ショートカットの作成方法
-
ショートカットアプリを起動して、右上にある「＋」ボタンをタップして、新しいショートカットを作ります。
-
「＋」ボタンをタップすると、新しいショートカット用のウインドウが表示されるので、ショートカットの名前を決めます。
今回は、ConvertToGifAnimationとしました。
-
クイックアクションから実行したいので、右上の
スライダー>詳細から、クイックアクションとして使用とFinderにチェックを入れます。
チェックを入れると、左側にクイックアクションが自動で追加されます。
-
追加された
クイックアクションに対して、動画を受け取れるように設定を行います。
受け取るのはMP4動画なので、今回はメディア以外のチェックを外しました。
-
念の為、入力がない場合の振る舞いも設定しておきました。
-
最終的な出力サイズを３２０にする予定なので、MP4動画のリサイズを実施します。
右上の検索窓より、「video」で検索を行い、メディアをエンコードを左側へドラッグ＆ドロップし、エンコードしたい内容を設定します。
-
リサイズしたMP4動画を一時的に保存したいので、先に、最終的なGIFアニメーションの出力先のフォルダを作成します。
今回は、すぐにフォルダにアクセス出来るように、デスクトップ上にGifAnimationOutputというフォルダを作成しました。 -
ショートカットアプリで、「ファイルを保存」で検索を行い、
ファイルを保存を左側へドラッグ＆ドロップし、保存先の変更を行います。
-
「シェル」で検索を行い、
シェルスクリプトを実行を左側へドラッグ＆ドロップし、FFmpegのコマンドで動画を変換するスクリプトを記述します。
引数として保存済みのファイルが渡ってくるので、それを順番にGIFアニメーションへ変換し、変換が完了したMP4ファイルはゴミ箱へ移動しています。
-
もしも、以下のようなウインドウが表示された場合は、
スクリプトの実行を許可にチェックを入れてください。
内容を変更する場合は、ショートカットアプリの環境設定から、いつでも変更が可能です。
以上で、MP4動画をGIFアニメーションへ変換する為のショートカットの作成は終わりになります。
実際に動かしてみた
この動画も画面収録後、作ったショートカットのFFmpegコマンドのscaleを640に変更して作成しました。
今回、初めてショートカットアプリを使ってみましたが、シェルスクリプトを組み合わせることもできるので、
手作業でやっている部分などに、積極的にショートカットを活用していけたら、色々と作業が効率化できるのではないかと思いました。