時代遅れのIE6のアップグレードを促す「ie6-upgrade-warning」

2010年2月26日 19:31

日夜たくさんのWebサービスを利用しつつ、多くのクライアントのWebサイトを構築する業務をしておりますと、IE6(Internet Explorer 6)のバグの多さはホントWebデザイナー泣かせ。
そんなIE6のためだけにCSSハックの時間のリソースを奪われるのでは制作費のコストダウンを必要とされる状況で非常に不利です。

そんなこんなで「IE6潰し」の動きがネット界隈の各所で巻き起こっています。

というワケで弊社でも本格的にサポートを打ち切る事にいたしました。
ただ突然に切ってしまうと追従できない方も居ると思いますので、サイトにIE6でアクセスしてきたユーザーに対してアップグレードを促すウィンドウを表示する「ie6-upgrade-warning」というJavascriptを導入してみました。

ie6-upgrade-warningの導入

まずはGoogle Codeにある「ie6-upgrade-warning」のページにアクセスしてファイル一式の詰まったZipをダウンロードします。
解凍すると「ie6」というフォルダになりますので、これをサーバーにアップして導入したいページのHTMLに下記のソースコードを入れれば基本的にOKです。

<!--[if lte IE 6]><script src="js/ie6/warning.js"></script><script>window.onload=function(){e("js/ie6/")}</script><![endif]-->

「ie6」フォルダへのリンクの仕方についてはアップした階層との関係を考慮して修正が必要です。
自分の場合はhttp://～からのフルパスで指定して全ページで「ie6-upgrade-warning」が表示されるようにしました。

解説を読むとソースコードは<body>タグの直後に入れろと指定されていますが、これだとサイズが大きいページではロードが完了する前にJavascriptが実行されてしまうため表示できない場合が多々ありました。
昔のGoogle Maps APIでよくあった現象ですが、onloadで実行させるスクリプトはHTMLの後ろの方にJavascriptを入れるとこれを回避できます。
という事で</body>タグの直前に導入ソースコードを入れましょう。

こんなカンジでしょうか。

<!--[if lte IE 6]><script src="http://www.infinity-dimensions.com/ie6/warning.js"></script><script>window.onload=function(){e("http://www.infinity-dimensions.com/ie6/")}</script><![endif]-->
</body>
</html>

日本語化とバグの修正

導入したページへIE6でアクセスすると「ie6-upgrade-warning」のウィンドウが表示されるはずですが、いかんせん文章が英語なので意味が伝わりにくいかもしれません。
という事で日本語化したソースが「BUN:Log 」さんのサイトで公開されていました。
指示に従ってwarning.jsを修正するとイイ感じです。

あと「ie6-upgrade-warning」のソ－スに間違いがあって、本来はIE・Firefox・Safari・Opera・Chromeが並んで表示されるはずですが、SafariとOperaしか表示されない現象が出るようです。

「OpenSpace更新情報」さんで修正の仕方が書いてありました。

OpenSpace更新情報: JavaScript : 新JavaScript例文辞典にIE6 upgrade warningライブラリのサンプルを追加
＊このライブラリ途中のスクリプトがちょっと間違っていてIEでは正しく表示されません。スクリプトの途中にある以下の2カ所を修正すれば、一応 IEでもそれなりに表示されます。

document.documentElement.clientWidth
　　↓
document.body.clientWidth

document.documentElement.clientHeight
　　↓
document.body.clientHeight

指示の通りにwarning.jsを修正するとこのバグは解消しました。

以上のように細々と修正は必要ですが「ie6-upgrade-warning」をサイトに導入しておけばIE6のために掛けていた手間ヒマを一切ヤメてしまうのもありだと思います。

他にも「IE6 No More」というサイトでバナー風に表示させるスクリプトなんかも紹介されていました。
お好みの方法でIE6のアップグレードを啓蒙して行きましょう♪

▲ページの先頭へ