FirefoxのThrobberとAPNG
まずは結論から.
- firefoxの拡張でfirefoxデフォルトのthrobber(ロード中ということを表すくるくるまわるUI)を使うには, chrome://global/skin/icons/loading16.png の画像を読み込むだけでOK.
- 今後はcanvasを使ったらいいのかも
経緯と雑感
以下は思ったことを書いているだけです. 特にオチはなし.
firefoxアドオンをいじっていて, throbberを表示させたいなと思いました.
はじめは適当なweb上のジェネレータでgifアニメをつくってそれを挿入してみたんですが, 白以外の背景に設置するとちょっと無視できないほどのシャギーが出てしまって使い物にならない. よく考えるとfirefoxにもthrobberがあるんだからそれを流用すればいいやと思いつきました.
loadingとかthrobberをキーワードに, firefoxのコードをgrepしたりMXRで検索したりしたところ, loading_16.pngがちょうどそのものの画像のよう. chromeのuriだとchrome://global/skin/icons/loading16.png, 実際のファイルはmac osxだと/Applications/Firefox.app/Contents/MacOS/chrome/skin/classic/global/icons/loading_16.pngにあります(実際はjarになっています).
どうやって回しているんだろう
ふつうの画像ビューアアプリでloading_16.pngを開いてみると, これはただの静止画のようです. ということはこれを回転させているロジックがどこかにあるはず. というわけでまたfirefoxのコードを調べ始めました. loading_16.pngが使われている要素のidなどでgrepしていたんですが, どれだけ探してもそんなロジックが見つらない. どこをどう見てもただcssでその画像を表示させているだけでした.
もう少し調べていると, どうやらこの画像そのものがapngという形式の画像で, アニメーションするらしい. どうもこの画像をそのまま貼ればいいらしいということがわかってきました.
APNG
APING(Animated Portable Network Graphics)はpngのアニメーション, gifアニメのpng版です. gifに比べて優れている点はまずフルカラーを使えることや, アルファチャンネルを使って背景にうまく溶けこむように表現できることです. gifの場合はこの背景の処理がどうしても荒くなってしまい, 前述のシャギーの問題が発生してしまいます.
問題点は普及度です. APNGはmozilla提案の技術なんですが, PNG Group(pngの仕様を策定している団体?)はmozillaからのapngの提案をrejectしています(代替としてPNG Groupが押しているMNGという規格は仕様が複雑すぎるらしく, 実装がほとんどされていないという問題があります). 現在apngを表示できるのはFirefox3以降とOpera9.5以降のみです. APNGのフォーマットが作成されたのが2004年, PNG Groupが提案をrejectしたのが2007年ということを考えると, 現状APNGは普及していないし, 今後もその見込みは高いとは言えません. IEはともかくせめてWebKitが実装していれば全然状況はちがったと思うのですが.
APNGとcanvas
今回のthrobberなど, webアプリのUIを作るにあたってちょっとしたアニメーションをする要素が必要になる場面は多いと思います. APNGはgifアニメの要領で作成できるらしいのでお手軽っぽいんですが, 普及度と将来性がネックです. そうなるとやはり今後重要になってくるのはcanvasなんでしょう. 2007年にMozilla LabsのChris Beardさんという人が書いたAPNGに関するエントリでもcanvasについて触れられています. ちなみにこのエントリは従来のgifの問題点, apngの特徴などについてわかりやすく述べられているので良い記事です.
となるとベーシックなUIのパーツをcanvasで実装したライブラリがあるといいなあと思うんですが, ちょっと調べた感じでは見当たりませんでした.