MP4の動画をGIFアニメーションに一括変換するクイックアクションを作ってみた

# なぜGIFアニメーションが必要になったのか
私事ですが、7月1日に転職して、新しい会社でiOSエンジニアとしてのキャリアをスタートしました。

新しいチームでは、レビュアーの確認を容易にする為に、PRにスクリーンショットだけではなく、GIFアニメーションを一緒に添付する方が分かりやすい、
という事で、アニメーションなどの確認の為に、GIFアニメーションをPRに添付する運用を行っています。
その為、シュミレーターで録画したMP4動画をGIFアニメーションに変換する必要がありました。

複数のMP4動画を纏めて変換できると良いなぁ、と思い、会社の人に相談すると、
> **[AutomatorでFFmpegを呼び出して動画ファイルをGIFに変換するフォルダアクションを作った](https://qiita.com/macneko/items/4595c4b04eebab2b8911)**

という記事を紹介して頂きました。
さらに、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のコマンドを使って行います。
```bash
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}"
```

## ショートカットの作成方法
1. ショートカットアプリを起動して、右上にある「＋」ボタンをタップして、新しいショートカットを作ります。
![スクリーンショット 2022-07-23 18.38.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/56a3e0e5-628a-3b29-a980-c742561cfce0.png)
1. 「＋」ボタンをタップすると、新しいショートカット用のウインドウが表示されるので、ショートカットの名前を決めます。
今回は、`ConvertToGifAnimation`としました。
![スクリーンショット 2022-07-23 18.41.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/2f2f1f09-a13b-e9f2-0242-4cbcb8763ed7.png)
1. クイックアクションから実行したいので、右上の`スライダー` > `詳細`から、`クイックアクションとして使用`と`Finder`にチェックを入れます。
チェックを入れると、左側に`クイックアクション`が自動で追加されます。
![スクリーンショット 2022-07-23 18.53.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/16ca0d1a-a0f7-b34f-4312-cbffd7e3fc8f.png)
1. 追加された`クイックアクション`に対して、動画を受け取れるように設定を行います。
受け取るのはMP4動画なので、今回は`メディア`以外のチェックを外しました。
![スクリーンショット 2022-07-23 18.57.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/eaa48dd3-bc64-5930-9c8b-abf11caa4371.png)
1. 念の為、入力がない場合の振る舞いも設定しておきました。 
![スクリーンショット 2022-07-23 18.59.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/d333334a-2a2d-0f75-7c99-5da5ea6ea061.png)
1. 最終的な出力サイズを３２０にする予定なので、MP4動画のリサイズを実施します。
右上の検索窓より、「video」で検索を行い、`メディアをエンコード`を左側へドラッグ＆ドロップし、エンコードしたい内容を設定します。
![スクリーンショット 2022-07-23 19.05.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/efc54854-1ff4-6e49-825f-5ca1ec87fbbe.png)
1. リサイズしたMP4動画を一時的に保存したいので、先に、最終的なGIFアニメーションの出力先のフォルダを作成します。
今回は、すぐにフォルダにアクセス出来るように、デスクトップ上に`GifAnimationOutput`というフォルダを作成しました。

1. ショートカットアプリで、「ファイルを保存」で検索を行い、`ファイルを保存`を左側へドラッグ＆ドロップし、保存先の変更を行います。
![スクリーンショット 2022-07-23 19.15.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/f73833f0-3017-49b7-a494-707a5b7af7c4.png)
1. 「シェル」で検索を行い、`シェルスクリプトを実行`を左側へドラッグ＆ドロップし、FFmpegのコマンドで動画を変換するスクリプトを記述します。
引数として保存済みのファイルが渡ってくるので、それを順番にGIFアニメーションへ変換し、変換が完了したMP4ファイルはゴミ箱へ移動しています。
![スクリーンショット 2022-07-23 19.38.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/d91f6455-ab1f-662d-9800-3c0aab601863.png)
1. もしも、以下のようなウインドウが表示された場合は、`スクリプトの実行を許可`にチェックを入れてください。
内容を変更する場合は、ショートカットアプリの環境設定から、いつでも変更が可能です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/c69ece18-9020-2c32-a308-d08b0391a007.png" width="420" />

以上で、MP4動画をGIFアニメーションへ変換する為のショートカットの作成は終わりになります。



# 実際に動かしてみた
![画面収録 2022-07-23 19.47.45.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30834/211718c3-d56f-a98f-8386-2352b7563955.gif)
この動画も画面収録後、作ったショートカットのFFmpegコマンドのscaleを640に変更して作成しました。

今回、初めてショートカットアプリを使ってみましたが、シェルスクリプトを組み合わせることもできるので、
手作業でやっている部分などに、積極的にショートカットを活用していけたら、色々と作業が効率化できるのではないかと思いました。