【APNG】ブロマガのサムネイルを動かす方法

ブロマガのサムネイルには jpg, gif, png が使えるが、アニメーションGIF（AGIF）は使うことが出来ない。そこでアニメーションPNG（APNG）を使う事で一部のブラウザ（firefox）だけが表示できる APNG の作り方の紹介。



Chrome で見る場合にはエクステンションを導入する必要がある。
Chrome Web Store - APNG

まずはアニメーションの元となる画像を用意するか、動画から1フレームずつの画像を用意する。AviUtl を使っている場合は拡張編集プラグインのタイムラインに動画を読み込ませて拡張編集AVI/BMP出力（RGBA）での .bmp 出力で1フレームずつの画像を用意できる。

AviUtlで透過AVI・透過BMPを作る:AviUtlの小言 - ブロマガ

次に APNG Anime Maker を使って画像を読み込んで APNG を作る。ここで画像が読み込めない場合は PNG にフォーマットを変換する。私がよく使っているのは Ralpha。



Open から画像を一括して開き、Delay で描写速度を設定。msec は1枚あたりの時間。大きい値ほど動きがゆっくりになる。fps 1秒当たりのフレームレート。動画から APNG を作る場合はそれと一致させる。その他の設定は右下にある Loop（繰り返す回数）。無限なら 0 のままに。回数を指定する場合にはその値にする。Compression Level は圧縮率の設定。0（無圧縮）から9（高圧縮）まで。

適宜 Move Up, Move Down で順番を変えて Save で保存して APNG の完成。

この APNG の何がいいかというと AGIF と比べてフルカラーが使える点と、画像投稿サイトで裏技として隠し画像として投稿できる点であるが、互換性がとても乏しいので firefox だけ見られると書いてないと firefox でも最初の１フレーム目の１枚画像としか見られない。

静画に投稿したサンプル
APNGテスト / ロべルト さんのイラスト - ニコニコ静画 (イラスト)

コモンズにも投稿できる
APNGテスト - ニコニ･コモンズ

今度は APNG から動画に変換するには VirtualDub APNG Mod を使う。
SourceForge.net: VirtualDub APNG Mod

普通の画像に場合はこのまま AVI で出力をすればいいのだが、透過情報を含んでいる場合はこのまま AVI 出力をしても透過情報を維持できないので utvideo をインストールする。

或るプログラマの一生 » Ut Video Codec Suite

インストールが終わったら設定を変更する。

Video < Compression... < Utvideo RGBA (ULRA) VCM



Video < Color Depth... < Output format to compressor/display にチェック



Save as AVI... で動画を出力。

2019年現在では ffmpeg でも APNG ファイルを作ることができる。
APNG をループ出力する