1300の優良サイトを調査してみたシリーズ、第1回は「PNG Fix」です。
PNG Fixとは、Internet Explorer5〜8が、PNGの表示を正しく扱えないという問題を解決するための手法のことです。
インターネットにおいては、IE8が未だに高いシェアを持ち対応を求められます。そして、PNGの持つ表現力は、他のフォーマットでは代替が難しいという状況です。ビジュアルデザインを重視したWebサイト・アプリ制作を行う現場の人は、必ず覚えておきたい基本の知識と言えます。
今回、1300の優良サイトが採用しているPNG Fix手法を確認し、ベストプラクティスが何かを探ってみようかと思います。
IEには具体的にどんな課題があるのか？
IE5〜6は、PNGファイルが透明度(Alpha値)を正しく反映して表示することが出来ないという問題を持ちます。以下のように、透明な背景を灰色で塗りつぶした状態で表示させてしまいます。
IEの7〜8で、上記の問題は解決されたかのように思えました。しかし、CSSで透明度(Opecity)を与えると、PNGファイル内の透明度(Alpha値)が0でも255でもない半端な状態の場合、正しい解釈が行えなくなるという別の問題が発生します。
これは、最近のWebサイトでは定番となったフェードイン・フェードアウト処理の、弊害になることがあります。
ふろしき.jsの調査では、1300中247サイト(19.00%)にて、JSライブラリによる対策が行われていることを確認しました。本記事では、その247サイトで利用されている全JSライブラリを網羅的に紹介させて頂きます。
DD_belatedPNG (157件)
IE5〜8へのPNG Fix対応を行う、世界シェアトップのライブラリです。background-imageプロパティで指定されたPNGファイルもFixされます。CSSセレクタを利用して指定をしますが、表記がやや独特というデメリットを持ちます。
- 公式サイト：http://www.dillerdesign.com/experiment/DD_belatedPNG/
- ライセンス：MIT License
- 開発：Drew Diller
CSSセレクタを利用して、対象を指定します。
<img src="hoge.png" class="hoge" />
↓
DD_belatedPNG.fix('.hoge');
jQuery belatedPNG (30件)
DD_belatedPNGをjQueryで利用できるように改良した、和製のプラグインです。シンプルなWebサイトでは、PNG FixのためにわざわざjQueryを使わなくてはいけないというのはデメリットでしょう。しかし、CSS3の見慣れたセレクタ表記を使えるのは、jQueryが一般化した今となってはメリットとも言えます。
- 公式サイト：http://wakuworks.jugem.jp/?eid=153
- ライセンス：MIT License
- 開発：Drew Diller / Kazunori Ninomiya(日本人)
<img src="hoge.png" class="hoge" />
↓
$(".hoge").fixPng();
jQuery pngFix (17件)
IE5.5-6へのPNG Fix対応を行います。ただ、筆者の環境ではマニュアル通りに設定しても上手く動作しませんでした。上位２つのライブラリで代替可能な上、しかも対応が手厚いため、わざわざこれを選択する理由も弱いように思えます。
- 公式サイト：http://jquery.andreaseberhard.de/pngFix/
- ライセンス：GPL
- 開発：Andreas Eberhard
iepngfix (12件)
IE5.5-6へのPNG Fix対応を行います。ライセンスの面で見ても上位２つの方がメリットも大きいため、選択する理由は弱いでしょう。
- 公式サイト：http://www.twinhelix.com/css/iepngfix/
- ライセンス： GNU LGPL, version 2.1 or later
- 開発：Angus Turnbull
alphafilter.js (10件)
IE5.5-6へのPNG Fix対応を行います。JavaScriptへの記述が不要という特徴を持つため、プログラミングが苦手なデザイナの方には利便性が高いように思えます。ただアイデアは素晴らしいですが、IE7-8のPNG Fixには対応していなかったり、「deffer」を必ず与えないと動作しなかったりと、他より劣る部分も多いようです。
- 公式サイト：http://blog.webcreativepark.net/2007/02/01-233315.html
- ライセンス：MIT License
- 開発：Kazuma Nishihata(日本人)
<img src="./sample.png" class="alphafilter" alt="" />
unitpngfix.js (8件)
IE6へのPNG Fix対応を行います。上位２つで代替できる上、GPLライセンスであるため、選択する理由は弱いように思えます。
- 公式サイト：http://labs.unitinteractive.com/unitpngfix.php
- ライセンス：GNU GPL License
- 開発：Unit Interactive, LLC
pngfix.js (8件)
IE5.5-6へのPNG Fix対応を行います。売りのロールオーバ対応も上位２つで対応されており、ライセンスが不明であることから、選択する理由は弱いように思えます。
- 公式サイト：http://homepage.ntlworld.com/bobosola/pnghowto.htm
- ライセンス：不明
- 開発：不明
iepngfix_tilebg (5件)
iepngfixを拡張し、CSS周りの問題点を解消したライブラリです。これも、上位２つで代替可能で、ライセンス面で見てもデメリットが大きいように思えます。
- 公式サイト：https://code.google.com/p/widgetfx/source/browse/widgetfx.org/iepngfix_tilebg.js
- ライセンス：GNU LGPL, version 2.1 or later
- 開発：Angus Turnbull
ベストプラクティスは？
PNG Fix自体は要求はシンプルで、差別化もそこまでされないようです。機能面、ライセンスの面でも最もメリットの大きい、上位２つのライブラリ「DD_belatedPNG」「jQuery belatedPNG」のどちらかを使うのがベストプラクティスでしょう。
このような対策のためにライブラリを使わなくてはいけないというのは非常に残念です。しかし、IE9以降は大きく改善され、他のモダンブラウザと遜色ないPNGの表示を行えるようになりました。普及するまで、もう暫くの辛抱です。
