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

エ・ビスコム・テック・ラボ
2008-03-24 14:05:01
  • このエントリーをはてなブックマークに追加

 今回は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 flower.png

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

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

アニメーションPNGの規格

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

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

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

  • 新着記事
  • 特集
  • ブログ