コマンドラインでのGIFの作成と最適化方法

以下の文章を日本語にネイティブな言葉で言い換えてください。一つのオプションで結構です。

「Introduction」
-> はじめに

1990年代から流通している画像形式の中で、JPGとPNGに加えて、GIFも最も一般的なものの一つです。JPGとPNGとは異なり、GIFは複数のアニメーションフレームを含むことができます。そして、単純ながらも「アニメーションGIF」という存在は、インターネットのあらゆる場所で使われる確固たる要素です。

GIFは実は古い技術であり、現在は多くの場面でウェブ動画の埋め込みに比べて効率が低下しています。なぜなら、ほとんどのウェブ動画は現代の動画圧縮技術やより人気のある現代のコーデックを使用しているからです。コーデックは、動画をエンコードおよびデコードするために使用され、ほとんどのプラットフォームにはそれらのコーデックを再生するための専用ハードウェアがあります。一方で、GIFは常にCPUで直接デコードされます。解像度が低くアニメーションのフレーム数がわずかなGIFのCPUオーバーヘッドは無視できますが、理論的にはYouTubeの動画と同様の解像度やフレームレートのGIFを作成することもできますし、その際にどれだけのシステムリソースを消費するかに驚かされるでしょう。

ただし、GIFはまだ有用であり、画像として扱われるために動画ではないと考えられています。ウェブやその他のアプリケーションの動作方法から、GIFは多くの状況で自動的に再生されるため、別々に埋め込む必要もリンクする必要もありません。これは反応画像からインタラクティブなフィクション開発や他のプレゼンテーション形式まで、あらゆる場面で便利です。

このチュートリアルでは、ビデオクリップからGIFを作成するためのいくつかのツールを試してみます。その後、サイズと品質を最適化し、さまざまな状況で使用できるようにします。また、これらのツールを組み合わせて、別のアプリケーションスタックに統合することもできます。

必要条件

このチュートリアルでは、Ubuntu 22.04 サーバーのインストール手順を提供します。Ubuntu 22.04 の初期サーバーセットアップガイドに従って設定することができます。

このチュートリアルで使われるツールのうち、1つをインストールするためにHomebrewパッケージマネージャーを事前にインストールしておく必要があります。

ステップ1 — ffmpeg、Gifski、およびGifsicleのインストール

このチュートリアルでは、例に沿って進めるために3つのツールが必要です。最初はビデオのカットや操作に使用するffmpegです。次に、GIFを作成するためのGifskiがあり、最後にGIFを最適化してさらに操作するためのGifsicleがあります。これらのツールはほとんどのプラットフォームで利用可能です。

Ubuntuのデフォルトリポジトリには、ffmpegとgifsicleの両方が利用可能で、aptパッケージマネージャーを使用してインストールできます。まずはapt updateコマンドを使用してパッケージソースを更新してください。

1. sudo apt update

それから、apt installコマンドを使ってffmpegとgifsicleパッケージをインストールしてください。

1. sudo apt install ffmpeg gifsicle

最後のツールであるgifskiは、Homebrewを通じて利用できます。brew installコマンドを使用してインストールしてください（Homebrewは他の依存関係をインストールするため、数分かかる場合があります）。

1. brew install gifski

あなたのマシンには必要なすべてのツールがインストールされています。次に、GIFを作成するためのサンプルビデオを取得します。

ステップ 2 — サンプルビデオのダウンロードと確認

どんな既存のビデオクリップからでもGIFを作成することができます。お使いになりたいビデオクリップがまだない場合は、Silicon CloudのIntroducing App Platformのビデオを出発点として使用することもできます。

curlを使用して、当社のサーバーから他の場所にあるこのビデオのコピーをダウンロードすることができます。

1. curl -O https://deved-images.nyc3.cdn.digitaloceanspaces.com/gif-cli/app-platform.webm

curlは、あらゆる種類のWebリクエストを行うためのコマンドラインツールです。URLと一緒に-Oフラグを使用することで、curlはリモートファイルをダウンロードし、同じファイル名でローカルに保存します。

ビデオのローカルコピーがあるので、いくつかのメタデータを確認することができます。これは高品質のGIFを作成しようとする際に重要です。以前にffmpegをインストールした際に、ffprobeというコマンドも一緒に付属していました。ffprobeを使用すると、メディアファイルの解像度、フレームレート、その他の情報を確認することができます。ダウンロードしたapp-platform.webmビデオ上でffprobeを実行して、これらの詳細を確認してください。

1. ffprobe app-platform.webm

… Input #0, matroska,webm, from ‘app-platform.webm’: Metadata: ENCODER : Lavf59.27.100 Duration: 00:01:59.04, start: -0.007000, bitrate: 1362 kb/s Stream #0:0(eng): Video: vp9 (Profile 0), yuv420p(tv, bt709), 1920×1080, SAR 1:1 DAR 16:9, 25 fps, 25 tbr, 1k tbn (default) Metadata: DURATION : 00:01:59.000000000 Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default) Metadata: DURATION : 00:01:59.041000000

出力には、通常1つのビデオと少なくとも1つのオーディオストリームを含むファイル内のすべてのストリームがリストされます。また、サンプルレート、コーデック、およびストリームのその他の特性も示されます。出力のハイライトされた情報から、このビデオが1080p解像度でエンコードされ、秒間25フレームで再生されていることが分かります。YouTubeで視聴することで、おそらく約2分間の長さであることも分かったかもしれません。そして、1つのGIFにはおそらく長すぎるでしょう！

次のステップに進むためには十分な情報です。このビデオからクリップを切り取ってGIFを作成します。

ステップ3 – 動画からクリップを切り取る

日本語で以下の文の言い換えをお願いします。１つのオプションで結構です：
あなたは今、特性が分かっている２分間のビデオファイルを持っています。それをGIFにする前に、短いクリップを抜き出すだけの作業が必要です。

ターミナルシェルでビデオを再生することはあまり便利ではありませんので、YouTubeのビデオと一緒に視聴して、適切なカット箇所を見つけることができます。このチュートリアルでは、00:00:09から00:00:12までをカットします。これにより、なかなかスムーズなアニメーションが作成されます。

app-platform.webmビデオをffmpegに渡すことで、そのカットを作成できます。

1. ffmpeg -ss 00:00:09 -to 00:00:12 -i app-platform.webm -c copy clip.webm

このコマンドは以下のように分解されます：

• -ss 00:00:09 -to 00:00:12 is how ffmpeg understands timecodes. In this case, cutting from a starting position to an ending position in the clip. You can also clip based on duration, or to fractions of a second.
• -i app-platform.webm is the path to your input file, preceded by -i.
• -c copy is where you would normally specify an output audio or video codec to ffmpeg. Using copy in lieu of a codec skips reencoding the video at all, which can be much quicker and avoid any loss in quality, as long as you don’t need to target a different output format. Because you’re making this clip into a GIF later anyway, preserving the native input format is fine, and saves time.
• clip.webm is the path to your output file.

これにより、clip.webmという新しい3秒のビデオが作成されます。ls -lhコマンドを使用して、その存在とサイズを確認できます。

1. ls -lh clip.webm

-rw-r–r– 1 sammy sammy 600K Nov 16 14:27 clip.webm

次のステップでGIFを作成する際に、わかったことですが、3秒の動画はたった600Kしかありません。これは、比較の良いポイントとなります。

第4ステップ — 動画をGIFに変換する

3秒の動画と、フレームレートと解像度の上限を考えたなら、それを元にしてGIFを作成することができます。もし動画をGIFに自動的に変換するパイプラインを開発している場合、ffprobeから解像度とフレームレートを自動的に抽出し、次のいくつかのコマンドに直接渡すのは役に立つかもしれません。このチュートリアルでは、出力のための適切な解像度とフレームレートの値をハードコーディングしています。

コマンドラインでGIFを作成するためのいくつかのオプションがあります。FFmpeg単体でも作成することができますが、構文を変更したり理解することが非常に困難かもしれません。

1. ffmpeg -filter_complex “[0:v] fps=12,scale=w=540:h=-1,split [a][b];[a] palettegen [p];[b][p] paletteuse” -i clip.webm ffmpeg-sample.gif

この例では、クリップの解像度とフレームレートを半分に減らしています。フレームレートは12fps、解像度は540pになります。これは通常、GIFの作成時の良い出発点です。GIFは画像のように扱われるため、ウェブページが読み込まれる際には完全にダウンロードされます。ビデオのように解像度が徐々に下がってストリーミングされるという概念はありません。CDNの使用は静的サイトのアセットの配信を最適化するのに役立ちますが、特定の理由がない限り、巨大な画像を提供することは避けるべきです。したがって、必要以上に大きなGIFを作成することは常に避けるべきです。画像に対しては、通常3M以下が良い実践です。新しいGIFのファイルサイズは、ls -lhコマンドを使用して確認できます。

1. ls -lh ffmpeg-sample.gif

-rw-r–r– 1 sammy sammy 2.0M Nov 16 14:28 ffmpeg-sample.gif

この方法で2MのGIFを作成しました。これは良い結果ですが、gifskiを使用してより複雑な構文を使用せずに、さらに良い結果を得ることができます。次のgifskiコマンドを試してみてください。

1. gifski –fps 12 –width 540 -o gifski-sample.gif clip.webm

重要な詳細であるフレームレートと解像度と入力と出力のファイル名だけを保存する必要があることに注意してください。出力ファイルを確認してください。

1. ls -lh gifski-sample.gif

-rw-r–r– 1 sammy sammy 1.3M Nov 16 14:33 gifski-sample.gif

これはわずか1.3メガバイトしかありませんが、同じ品質レベルで大幅に改善されました。この段階で、GIFのフルフレームレート、フル解像度版を作ってみたくなるかもしれません。比較のために、以下があります：

1. gifski –fps 25 –width 1080 -o gifski-high.gif clip.webm

この最後のテストファイルのサイズを確認してください。

1. ls -lh gifski-high.gif

-rw-r–r– 1 sammy sammy 6.9M Nov 16 14:37 gifski-high.gif

6.9Mは、元の動画クリップが0.6Mだったことを考えると、明らかに大きすぎます！ GIFは現代のビデオコーデックと比べて効率が良くありません。適切なファイルサイズにエンコードする際には、いくつかのわずかな犠牲を払う必要があります。このチュートリアルの最終ステップでは、さらにGIFを最適化します。

ステップ5 — GIFの最適化、検証、視聴

このチュートリアルの最後のステップでは、gifを洗練させるためにgifsicleを使用します。gifsicleは音声や動画に対してffmpegが行うことと同様に、gifに対して行うことができます。ほぼ何でもできるが、その結果としてかなり複雑になることもあります。そのため、実際にGIFを作成する場合はgifskiを使用し、改善や操作には一部のgifsicleコマンドに焦点を当てることができます。

最初に、標準的なgifsicleの最適化コマンドを実行してください。

1. gifsicle -O3 –lossy=80 –colors 256 gifski-sample.gif -o optimized.gif

このコマンドでは、最も積極的な最適化のために -O3 オプションを指定し、–lossy 80 では元の入力から最大20%の画質の低下を許容し、–colors 256 では出力画像で最大256色を使用します。GIFはモダンなインターフレームのビデオ圧縮やJPEGスタイルの画像圧縮技術をデフォルトで使用しないため、あなたが予想するよりも高品質の画像が生成されます。また、この文脈では、256色とは、一般的な256色の制限されたパレットではなく、既存のGIFに基づいた256色のパレット全体を意味します。一般的に、GIFの圧縮はあまり目立ちません。

最後のステップと同様に、optimized.gifのサイズを確認してください。

1. ls -lh optimized.gif

-rw-r–r– 1 sammy sammy 935K Nov 16 14:44 optimized.gif

この最後のステップによって、元のビデオよりもわずかに大きいサイズでファイルサイズが成功裏に削減されました。アニメーション画像にとって非常に適切な935Kです。これは、このチュートリアルで以前に表示されていた最適化されたGIFと同じものです。

Gifsicleのマニュアルを参照することで、他のGIFの操作方法を学ぶことができます。例えば、GIFを「爆発」させて、アニメーションの各フレームごとに1つの画像ファイルに分解することができます。

1. gifsicle –explode optimized.gif

これにより、個々の画像ごとにoptimized.gif.000、optimized.gif.001などという名前の複数のファイルが作成されます。

1. ls -lh optimized*

-rw-r–r– 1 sammy sammy 935K Nov 16 14:46 optimized.gif -rw-r–r– 1 sammy sammy 20K Nov 16 14:54 optimized.gif.000 -rw-r–r– 1 sammy sammy 17K Nov 16 14:54 optimized.gif.001 -rw-r–r– 1 sammy sammy 22K Nov 16 14:54 optimized.gif.002 -rw-r–r– 1 sammy sammy 22K Nov 16 14:54 optimized.gif.003 …

–rotate-90または–rotate-180オプションを使用して、GIFを回転することもできます。

1. gifsicle –rotate-90 optimized.gif -o rotated.gif

効率の悪さにもかかわらず、GIFはほぼどこでも使用できるため、依然として役立ちます。自動的にアニメーションさせるための短いクリップが必要な場合や、映像ではなく画像形式が必要な場合、時には古き良きGIFに代わるものはありません。

結論

このチュートリアルでは、既存のビデオから最適化されたGIFを作成するために複数のツールを使用しました。さらに、オープンソースのビデオ操作やGIF操作のエコシステム、およびGIFをさらに編集するための他のオプションについても紹介しました。GIFは興味深い時代遅れの技術です。多くの面では現代的ではありませんが、特定の文脈ではまだ本当の代替手段がありませんし、GIFを扱うためのツールは堅牢でメンテナンスが行き届いています。そう言って、賢くGIFを使ってください。

次に、Node.jsでメディア処理APIを構築する方法を学ぶことをおすすめします。