夏休みの自由研究　MP4-Gif変換をWEBアプリ化してプレビューを表示！

先日、OBSと自作アプリで、noteに貼れる縦画面GIFの限界サイズを調べました。
今回は、いつも使っているMP4をGIFに変換する自作アプリをウェブアプリ化してプレビューを表示し、gif化する範囲を指定できるようにしてみます。

アプリのコア機能をAPI化

WEBブラウザからの指示でGIF変換を実行できるように、アプリケーションの心臓部をAPI化します。

FFmpegの確認

ローカルPCでテストするために、FFmpegがインストールされ、コマンドラインからffmpegコマンドが実行できる状態か確認します。
以下のコマンドでバージョン情報が表示されれば成功です。

ffmpeg -version

Flaskやpyothon-dotenvのライブラリをインストール

WEBアプリ化に必要なFlaskやpython-dotenvをrequirements.txtに追加します。requirements.txtにまとめておけば、違うPCでも同じ環境にできるのでチーム開発や複数PCを使っている場合に便利です。

requirements.txt

Flask==3.0.3
python-dotenv==1.0.1

インストールします。

pip install -r requirements.txt

Flaskアプリケーション（app.py）でソースコードをＡＰＩ化

ソースコードをＡＩと一緒に、変換ロジックとWEBアプリケーションの本体（Flaskアプリケーション）に分けます。

ブラウザから確認できる状態にする

index.htmlを作って、ローカルサーバーをブラウザから確認できるようにしました。

ローカルサーバーを起動してブラウザで確認

以下のコマンドを入れて、ローカルサーバーを起動します。

python app.py

起動したサーバーのアドレスをブラウザに入れると以下のような画面が表示されました。

ファイルを選択したり、開始時間、終了時間などを入れ、「GIFに変換」をクリックすると、返還後のファイルが表示され、ダウンロードできました。

非同期化

現在のアプリは、変換処理が完了するまで、ブラウザが応答を待ち続ける「同期的」な処理で、これだと、長い動画を変換するとタイムアウトしてしまいます。そこで、非同期化してGIF変換をバックグラウンドで実行する対策を入れます。

必要なツールのインストール

requirements.txtに非同期化に必要なceleryとredisを追加します。
Celeryはバックグラウンドジョブを管理するためのライブラリ。
RedisはCeleryからの「変換して」という依頼を一時的に保管するデータベースです。

requirement.txt

Flask==3.0.3
python-dotenv==1.0.1
celery==5.4.0
redis==5.0.4

インストールします。

pip install -r requirements.txt

WEB開発で役立つDocker Desktopをインストール

Redisサーバーの起動

開発用にDockerを使ってRedisサーバーを起動します。
このコマンドを実行すれば、PCを再起動するまでRedisが動き続けるそうです。

docker run -d -p 6379:6379 --name mp4gif-redis redis:7

非同期化に必要なファイルを色々作る

AIによろしくやってもらいながら、以下のファイルを追加修正します。

Celeryワーカーの起動

バックグラウンド用のCeleryワーカーを起動します。

celery -A webapp.tasks worker --pool=solo -l info

Flask WEBサーバーの起動

Celeryワーカーとは別のターミナルでコマンドを実行してローカルサーバーを立ち上げます。

python app.py

こちらも問題なく起動しました。

変換もうまくいきました。ライセンス表記も追加しました。

変換する範囲を指定

動画のプレビューと範囲指定

ブラウザは動画を表示できるので、MP4の元動画を再生しながら範囲指定ができるようにします。これで、超絶便利になりました！

いやー、便利！

ただ、このままだと、いちいちターミナルを起動しなければならないので、公開サーバーに置くか、アプリ化しようと思います。

誰かの参考になれば幸いです。

使用ツール