Graphics)形式とは、高画質なアニメーション用の画像形式です。類似の画像形式としてGIFアニメーション形式が存在しますが、APNGは高画質化が可能であり透過情報の扱いに長けています。詳しい利点は記事「これからはGIFアニメからAPNGの時代に」で紹介しています。本記事ではAPNGファイルの作り方を解説します。APNGファイルの作り方はいろいろありますが、「できるだけデータ容量を軽く」というテーマでまとめてました。APNGファイルの作り方を徹底解説」で解説してます。本記事では次の手順で解説します。使い方」で紹介してますので、あわせてご覧ください。CCにもともと入っているテンプレートのアニメーションを利用します。Canvas]カテゴリー→[サンプルアニメーション]を選択ください。CCでアニメーションを作成したら、メニューより[ファイル]→[書き出し]→[ムービーの書き出し]を選択します。次に、書き出したい画像の名前を入力します。ここではframe.pngとしていますが、生成時にframe0001.pngと自動でフレーム番号を割り振られます。シーケンス(*.png)]を選択し保存ボタンをクリックします。PNG書き出しのオプションウィンドウでは次の通り設定します。※透過(アルファチャンネル)を表現したいため各項目を選択しましたら書き出しボタンをクリックします。すると、次のように連番画像が書き出されます。これで、APNGの作成に必要な下準備が整いました。ここまでは、PNG連番画像の作成方法を解説しました。Assembler」というソフトウェアを使って紹介します。ちなみに、2016年6月に公開された「アニメ画像に変換する君」というデスクトップアプリケーション(WindowsとmacOSに対応)を利用する方法もあります。手軽にAPNGファイルを作成したい場合は「アニメ画像に変換する君」をご利用ください。Assemblerのほうが向いてます。Assembler」を使用します。WindowsではGUI(グラフィカル・ユーザー・インターフェイス)版が公開されていますが、macOSではバイナリ版のみの公開となっているため両環境での書き出し方法をご紹介します。2.9から「apngasm_gui-2.9-bin-win32.zip」ファイルをダウンロードします。ダウンロードしたZIPファイルは任意の場所で展開ください。連番画像の読み込み解凍したフォルダー内に入っている「apngasm_gui.exe」ファイルを起動し、先ほど書き出した連番画像をドラッグ&ドロップします。Settings]ボタンをクリックしてアニメーションのループ回数を設定します。indefinitely]のチェックを外し右の入力欄にループ回数を入力します。Frames]ボタンをクリックしフレームレートを設定します。seconds]と入力します。詳しくは後ほどご紹介しますが、zlib・7zip・Zopfliの3つの中から選択できます。今回は標準で選択されている7zip方式で書き出します。PNG]ボタンをクリックします。すると拡張子が.pngのファイルが作成されます。APNG形式は通常のPNG形式と同じ拡張子になります。保存したAPNGファイルはブラウザーのFirefoxを使って再生できるか確認するといいでしょう。2.9から「apngasm-2.9-bin-macosx.zip」ファイルをダウンロードします。ダウンロードしたZIPファイルを展開すると「apngasm」というバイナリファイルが入っています。このファイルを連番画像と同じ場所にコピーします。appを起動するmacOSには「ターミナル。app」というソフトウェアがもともとインストールされています。APNGの作成にはこのソフトウェアを使うので、起動しましょう。[アプリケーション]フォルダー→[ユーティリティ]フォルダーに移動し、[ターミナル]を起動します。ターミナルでPNGフォルダーまで移動するターミナルを起動したら、PNGファイルが格納されたフォルダー(apngasmファイルがあるフォルダー)をターミナルで開く必要があります。次の手順で移動します。(チェンジ・ディレクトリーの略で、フォルダーの階層を移動するコマンドです。apngasmを実行コマンドの基本的な指定方法は下記のようになっています。[オプション]今回は出力ファイル名をanimate.png、連番画像をファイル名の頭にframeと付いているPNGという意味のframe*.png、フレームレートを24で実行します。ループ回数を設定したい場合は、-l4(4回ループ)をオプションに追加します。拡張子が.pngのファイルが作成されます。APNG形式は通常のPNG形式と同じ拡張子になります。保存したAPNGファイルはブラウザーのFirefoxを使って再生できるか確認するといいでしょう。24]として設定しました。2.9のOptionsをご覧ください。Assemblerではzlib・7zip・Zopfliの3つの圧縮形式を選択できます。こちらの各圧縮形式とアニメーションGIFを、連番画像の総データ容量を基準として比較しました。データ容量で比較すると、アニメーションGIFの431KBが圧倒的でZopfliの681KBが続きます。データ容量のみで比較するとアニメーションGIFが優勢ですが、アニメーションGIFは上限色数が256色でアルファチャンネル非対応。比べてZopfliで圧縮したAPNGはフルカラーでアルファチャンネルも対応しており、連番画像に比べて42%圧縮できるのは魅力的ではないでしょうか。GIFとAPNGの画質を比較しよう以下にアニメーションGIFとAPNGの品質を見比べられるデモを用意しました。※APNGをサポートしていない環境でも擬似的に表示できるJSライブラリ「apng-canvas.js」を使用しています。次の画像は実際に書き出した画像です。59+での閲覧を推奨します。Zopfliで書き出したAPNG以上の画像の画質を見比べると、zlib・7zip・Zopfliそれぞれで大きな見た目の差はありません。3つの圧縮形式が用意されているのでしょうか。見た目の大きな差がないなら圧縮率がもっとも高いZopfliのみで問題ないはずです。それぞれの圧縮形式で大きく違うのは、書き出しにかかる時間です。zlibを選択した場合は数秒で終わる書き出しが、7zipでは数十秒、Zopfliでは場合によって数分かかってしまいました。実案件にAPNGを用いる場合、開発中はzlibで書き出したAPNGで進めデザイン修正にもそれほど時間をかけず対応。リリース前にZopfliで書き出すという流れが良さそうです。Assemblerと複数のソフトウェアを使用しました。現在はアニメーション制作からファイル作成まで1つのソフトウェアで実現できないので手間が多いのが実情です。以前の記事でも触れましたが、APNGファイルを再生できるウェブブラウザーが増えているので、今後の動向に注目です。平成29年6月7日に内容をメンテナンスしています。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。