note でアニメーションGIFの貼り付け

今日は三連休最終日、いかがお過ごしでしょうか。
昨日、記事を作成するのに、アニメーションGIFを挿絵として使ったのですが、note に画像をアップロードしても、アップロードに失敗し続けました。
それでも GIF アニメーションのアップロードにやっと成功したので、書き留めておこうと思います。

OBS Studio による画面キャプチャ

Open Broadcaster Software | OBS

OBS Studioを使って、デスクトップ画面をキャプチャしています。
音声も Soundflower や BlackHole などの仮想オーディオデバイスやミキサーのLadioCast をわざわざ導入することなく、OBS Studio のみで MacOSのデスクトップ画面を音声を含めてキャプチャできるので、だいぶ便利です。
ちなみに、OBS Studio で配信はやったことはなく、デスクトップの画面キャプチャのみに使っています。

OBSでスクリーンキャプチャ

ffmpegで MP4動画を アニメーションGIFに変換

FFmpeg

MP4 動画から アニメーションGIFへの変換条件は以下の通り

• 速度は2.2倍速 (7秒以下にする)

• フレームレートは 20FPS

• 解像度は比率を変えず、高さを 480 px に設定

• 入力ファイルは input.mp4

• 出力ファイルは output.mp4

上記条件で 変換する場合、変換コマンドは以下のようになります。

❯ ffmpeg -i input.mp4 -vf "setpts=PTS/2.2,scale=-1:480,fps=20" -af atempo=2.2 output.gif

これでだいぶ画像解像度を小さくして、再生時間も短くできて、note への埋め込み投稿もできるようになりました！

昨日の学び

アニメーションGIFを作成するのに、試行錯誤して、やっと note に貼り付けることができるようになりました。
条件は以下の通り。

• 動画再生時間が 7秒以下になるように、再生速度やフレームレートを調節

• 動画解像度も 960 px x 540 px 以下になるようにリサイズする

• アニメーションGIF しか対応しておらず、webp とか使用不可

上記のことを念頭に入れながら、アニメーションGIFを作成すれば、説明動画を note に添えることができることが分かったので、備忘録としてメモしておきます。