APNG AssemblerでアニメーションするPNG(APNG)を書き出す

  • 4
    いいね
  • 0
    コメント

APNGとは?

APNG(エーピング)とはアニメーションするPNG画像のことです。もともとブラウザベンダーのMozillaが提案した規格で、Webサイトでのアニメーション表現に利用できます。従来よりアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなどクオリティ面で悩ましいところが多々あります。その悩みを払拭してくれると期待されるのがAPNG形式です。

最近では、LINEのアニメーションスタンプ(うごスタ)にも使われています。

APNGの詳細はICS MEDIAにて解説してますのでご覧ください。

APNGファイルの作成に必要なものはPNGの連番画像

APNGファイルの作成には、次のようなアニメーションの連番画像(コマ画像)が必要です。ぱらぱらアニメをイメージするとわかりやすいと思います。複数枚のPNGファイルを結合して1つのAPNGファイルになります。

create_png_flash_step4.jpg

APNGファイルを書き出せる無料ツール「APNG Assembler」の使いかた

APNGファイルの書き出しには無料のツール「APNG Assembler」を使用します。WindowsとOS Xで書き出し方法が異なるので、両環境での使い方を解説します。

Windowsでの書き出し方法

1. APNG Assemblerのダウンロード

記事更新時点(2016年8月19日)での最新バージョンは2.9なので、APNG Assembler 2.9から「apngasm_gui-2.9-bin-win32.zip」ファイルをダウンロードします。ダウンロードしたZIPファイルは任意の場所で展開ください。

2. 連番画像の読み込み

展開したフォルダ内に入っている「apngasm_gui.exe」ファイルを起動し、連番画像をドラッグ&ドロップします。

160603_line_stamp_08.jpg

3. ループ回数の設定

ループ回数は[Playback Settings]ボタンをクリックして設定します。初期設定では無限にループするように設定されています。ループ回数を4回にしたい場合は、[Play indefinitely]のチェックを外し、右の入力欄に4を入力します。

160603_line_stamp_09.jpg

4. フレームレートの設定

フレームレートは[Delays – All Frames]ボタンをクリックして設定します。作成したアニメーションのフレームレートと同じ数値を指定しましょう。フレームレートが15fpsの場合は、[1 / 15 seconds]と入力します。

160603_line_stamp_10.jpg

5. 圧縮形式の設定

APNG Assemblerでは、zlib・7zip・Zopfliの3種類の圧縮形式を選択できます。その圧縮形式は[Compression Settings]ボタンをクリックして設定します。3種類の圧縮形式の中から最も圧縮率の高いZopfli方式で書き出します。

160603_line_stamp_11.jpg

6. 出力ファイル名、出力先を入力し書き出し

APNGの書き出しは[Make Animated PNG]ボタンをクリックします。その前に、[Output file]欄にAPNGファイルのファイル名を入力します。ボタンをクリック後、拡張子が.pngのファイルが書き出されるとアニメーションスタンプの完成です! APNG形式は通常のPNG形式と同じ拡張子になります。

160603_line_stamp_12.jpg

書き出したAPNGファイルをFirefoxで開くとアニメーションが再生されます。

OS Xでの書き出し方法

1. APNG Assemblerのダウンロード

APNG Assembler 2.9から「apngasm-2.9-bin-macosx.zip」ファイルをダウンロードします。ダウンロードしたZIPファイルを展開すると「apngasm」というバイナリファイルが入っているので、連番画像と同じ場所にコピーします。

160603_line_stamp_13.jpg

2. ターミナル.appを起動する

OS Xには「ターミナル.app」というソフトウェアがもともとインストールされています。APNGファイルの作成にはこのソフトウェアを使うので、起動しましょう。[アプリケーション]フォルダ→[ユーティリティ]フォルダに移動し、[ターミナル]を起動します。

160603_line_stamp_14.jpg

3. ターミナルでPNGフォルダまで移動する

ターミナルを起動したら、連番画像が格納されたフォルダ(apngasmファイルがあるフォルダ)をターミナルで開く必要があります。次の手順で移動します。

  1. cdと入力します (チェンジ・ディレクトリーの略で、フォルダの階層を移動するコマンドです。cdの後ろに半角スペースを入力ください)
  2. 連番画像が格納されたフォルダをドラッグ&ドロップします
  3. [Enter]キーを押します
  4. これでターミナルでフォルダを移動できました

160603_line_stamp_15.jpg

160603_line_stamp_16-1.jpg

4. apngasmを実行

コマンドの基本的な指定方法は下記のようになっています。

./apngasm 出力ファイル名 連番画像 [オプション]

今回は次の設定でコマンドを実行します。

  • ファイル名:01.png
  • 連番画像:frame*.png(ファイル名の頭にframeと付いているPNGファイルという意味)
  • フレームレート:1 15(15fps)
  • ループ回数:-l4(4回)
  • 圧縮方式:-z2(Zopfli)

./apngasm 01.png frame*.png 1 15 -l4 -z2

※他にもさまざまなオプションが用意されておりますので、APNG Assembler 2.9のOptionsをご覧ください。

拡張子が.pngのファイルが書き出されるとアニメーションスタンプの完成です! APNG形式は通常のPNG形式と同じ拡張子になります。

書き出したAPNGファイルをFirefoxで見るとアニメーションが再生されます。

めんどくさいなと思った方はデスクトップアプリケーション「アニメ画像に変換する君」がオススメ

ICSでは、WebP(ウェッピー)も書き出せるデスクトップアプリケーション「アニメ画像に変換する君」を公開しました。連番画像のプレビュー機能から、大きくなりがちなデータ容量の圧縮機能までまるっとやてくれるアプリケーションです。APNG Assemblerの使いかたを紹介していてあれですが、ぜひお試しください :joy:

help-thumb.png

デスクトップアプリケーション「アニメ画像に変換する君」を公開しました。