アニメーションPNGを作成する--FirefoxのCSS対応 番外編

　今回はFirefox 3が新しく対応したアニメーションPNGについて紹介する。スタイルシートに直接関連するものではないが、Webページのデザインに活用できるアイテムの1つとしてチェックしておきたい。なお、アニメーションPNGの表示には、Firefox 3の他にOpera 9.5（ベータ版）も対応している。

アニメーションPNGとは

　アニメーションPNGはThe Animated Portable Network Graphicsの略で、APNGとも呼ばれている。静止画像のPNGフォーマットを拡張して、動画を扱えるようにしたフォーマットだ。本格的な動画の再生には適していないが、アニメーションGIFと同じように、パラパラ漫画の要領で手軽に動画を作成することができる。

　また、アニメーションGIFが256色しか扱うことができないのに対して、アニメーションPNGは24bitフルカラーでアルファチャンネルを扱うことができる。さらに、表示環境がアニメーションPNGに未対応でも、PNGに対応していれば最初の1フレームが静止画として表示される仕組みになっており、下位互換を保つことも可能だ。そのため、アニメーションGIFに代わるフォーマットとして、広く普及することが期待されている。

　次の画像はアニメーションPNGとして作成したもので、Firefox 3やOpera 9.5で表示すれば、周期的に色が変わって表示される。一方、アニメーションPNGに対応していないブラウザでは、一番最初のフレームが静止画像として表示される。

flower.png

　この画像はバックを透明にして、アルファチャンネルを含めて保存してあるので、背景を変えてもアニメーションGIFのように輪郭にジャギーが出ることはない。素材の使い回しやデザインのアレンジを考えると、大きなメリットだ。

	背景を赤くしてflower.pngを表示したもの
	背景画像の上にflower.pngを表示したもの

アニメーションPNGの規格

　アニメーションPNGの規格は、Firefoxの開発を行っているMozilla Corporationによって提案されている。PNGを拡張した動画形式として古くからあるMNGフォーマットとは異なる規格なので、注意が必要だ。

　PNGやMNGの規格は、PNGグループによって策定が行われているが、現在のところ、動画形式のPNGとして公式に認められているのはMNGフォーマットだけとなっている。アニメーションPNGについては、PNGの思想と矛盾する点があるとして、2007年4月に公式なフォーマットとして認めることが否決されている。

　しかし、MNGフォーマットは規格が複雑すぎることなどからほとんど普及していない。一方、アニメーションPNGは対応ブラウザが増えれば一気に普及することが考えられるので、今後の動向には注意しておきたい。