IE PNG Fix を組み込んだページを IE6 で閲覧しようとするとフリーズすることがある

Sorai — Tue, 21 Apr 2009 16:06:31 +0000

以前JavaScriptやCSSで簡単にIE6でアルファ画像(透過png)を使う方法で IE PNG Fix を紹介しましたが、なぜか最近これのせいで IE6 でページを閲覧しようとするとフリーズしてしまうようになってしまいました。この原因を発見するのに8時間ほどの時間を要しました。

この問題の発見までの経緯

まず私は最近 Ajax をページに組み込んだので、Ajax が原因だと思っていました。最初に Ajax で prototype.js の Ajax.Updater を使用してページを部分的に更新させようとしているのですが、これは利用者がボタンを押すと更新されるものなので、ページを表示しただけではこの部分が表示されません。なので、最初に Javascript の onload を使ってページを部分的に更新させることによって表示させています。IE では onload が何かダメだった記憶があるので、onload がいけないのだと思い onload に頑張って細工を加えたりしてみたんですが、全然ダメ。仕方無いので IE6 では Ajax を使っているコンテンツを非表示にすることにしました。そして、利用者には「IE6 では機能をご利用いただけません」という表示をすることにしました。

利用者のブラウザが IE6 かを PHP で感知して、IE6 であれば Ajax を用いた全ての機能を非表示にする。レイアウトもオシャレになるように調整する。

終わったー！と思って、IE6 で更新！あれっ！？

ページはフリーズしました。

どうやら Ajax が原因ではないらしい。通りで、Google で onload IE6 や Ajax.Updater IE6 で検索しても事例が見つからなかったわけだ。そして3歩進んで2歩下がった私は、何度か更新ボタンを押しているうちに、何を血迷ったのか Google Adsense 広告の読み込みに時間がかかっているのではないかと思いだした。幸いサイトは部分毎に切り分けて PHP で include しているので削除は簡単。でもやっぱり HTML と PHP が混じっている中から広告を削除するのには時間がかかった。でもページはフリーズした。

どうやら Google Adsense 広告は原因ではないらしい。通りで Adsense IE6 で検索しても事例が見つからなかったわけだ。そして3歩進んで2歩下がった私は、次は何を血迷ったのか Google Analytics のトラッキングコードに問題があるのではないかと思った。ちょっと削除して確認してみたがフリーズした。

おかしいなぁーということで、試しに IE6 で Javascript を無効にしてみたら一瞬で表示された。やっぱり Javascript に問題があるんだ。

headタグの中にある Javascript を削除したり弄ってるうちにとうとう発見！ IE PNG Fix が犯人だったみたい。

面倒くさかった。一時的に Ajax を IE6 のユーザーには使えないようにしていた自分が恥ずかしい。自分は Javascript 関連の問題があるといつもこうだ。Javascript って PHP と違ってとっつきにくいので苦手なんですよね。でも PHP と違ってユーザーの PC を使って動くので、どんどん使えた方が絶対良い。PHP はサーバーサイドなプログラムだから利用者が増えるとキツイ。少しずつ Javascript でもできる処理は Javascript で行わせるようにしていきたいですね。

フリーズの原因

ちなみに IE PNG Fix の何が問題だったのか、なぜ今まで問題なかったのに突然フリーズするようになってしまったかわかりません。Javascript を少しずつでも理解を深めていくうちに、原因がわかれば追記します。でも Javascript をマスターする前に、できれば英語が読めるようになりたいです。

IE PNG Fix の使い方

Sorai — Sun, 08 Mar 2009 09:06:14 +0000

今回はIE PNG Fixを使ってみたので、使い方をついでにメモしておきました。ちなみにIE PNG Fix 2が去年登場してるみたいなので、ここではIE PNG Fix 2の使い方を紹介します。
IE6 透過PNG表示、IE PNG Fix 2登場 | エンタープライズ | マイコミジャーナル

ダウンロード

Beta Testing Areaにアクセスして、IEPNGFix v2.0 Alphaをクリックしてダウンロードします。

ファイルを組み込む

ダウンロードしたファイルを解凍したらiepngfix.htc、blank.gif、iepngfix_tilebg.jsの3つのファイルを任意のフォルダにコピーします。
そして、CSS内に以下のように記述してiepngfix.htcを読み込ませます。太字のところは自分の環境に合わせて書き換えてください。

1	img, div { behavior: url(iepngfix.htc) }

そしてHTMLのからの部分に以下のように記述します。これも自分の環境に合わせて書き換えてください。

1	<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>

そして最後にblank.gifをiepngfix.htcにちゃんと読み込ませないと、IE6なので透過処理をさせたときに画像が無しみたいな状態になって困るかもなので、ちゃんと読み込ませます。太字の部分がパスになります。絶対パスでの記述が良いと思いますです。