Edited at

IEユーザーを撲滅させるためのJavaScript。さぁ今すぐWebサイトに組み込もう!

More than 5 years have passed since last update.

2013/11/26追記:久々にやってきたらこんなネタにすごい量のストックが。恐縮。ちなみにIE10は普通にいいと思いますよ(これ書いた時ってIE最新はまだ9で、表示のバグも多くぐぬぬしてたもので。)といっても、実質辛いのはCSS3のほぼ使えないIE8以下。WindowsXPのIEは8でストップなので当分怨嗟は止まらんのでしょうな


結論-IEを判別してアラートを出し、モダンブラウザのダウンロードページに移動させる

そのためのコードがこちら。headタグ直下にでも配置しましょう。


death-ie.js

<script language="javascript">

var isMSIE = /*@cc_on!@*/false;
if (isMSIE) {
if(confirm('〇〇〇〇*はInternet Explorerに対応しておりません。本サイトを閲覧するためにはGoogle Chrome,Mozilla Firefox等のモダンなブラウザをご利用ください(無料)。対応ブラウザのダウンロードページに移動しますか?')==true) {
location.href="http://www.google.co.jp/chrome/intl/ja/landing_ff.html";
} else {
}
}
</script>
//*はサイトの名前を記入


参考サイト:JavaScriptでIEかどうかをたったの1行で判別する方法-PHPSPOT開発日誌


このタグを設置すると、IEでページを開くとYES/NOアラートが表示され、「〇〇〇〇*はInternet Explorerに対応しておりません。本サイトを閲覧するためにはGoogle Chrome,Mozilla Firefox等のモダンなブラウザをご利用ください(無料)。対応ブラウザのダウンロードページに移動しますか?」といった文章が出てきます。

YESを押すと、Google Chromeのダウンロードページへ。NOならそのままサイトを表示します。


解説(必要なのか?)

confirmはYES/NOの選択肢付きのアラートを出すもの。

こちらの本文に あ か ら さ ま に I E 対 応 を サ ボ っ た 旨を書いてしまいます。

そして、YESをクリックしたら、任意のブラウザダウンロードページへとlocationで飛ばします。(サンプルではGoogle Chromeにしています。私はFirefoxユーザーですけど、CMとかの影響で乗り換えやすいかなって。画面が表示された途端に「無料」という文字が大きく見えるのもポイントですね)

こうして、IEしか知らないユーザーをモダンなブラウザへと華麗に移行させます

「へー、最近のWebサイトを見るにはブラウザを変えなきゃならないんだー」と思わせれば勝ち。


余談:なぜこのようなダークサイドに落ちたか

最近、スマートフォンサイトばっかり作ってたわけです。すると、こうCSS3を使って軽量でナイスなサイトが、もうバンバン作れちゃうわけです。特に角丸とかグラデーションのボタンとか。

CSSだけでここまで表現できちゃうものだから、もうデザインカンプなんか手抜きでやってしまって、HTMLとCSSで書いたほうが早いくらいです。泣きそうです。

もちろん、IE7や8でも角丸にする手法などは世に公開されていて、できないことはないですが、まーそりゃめんどくさいことこの上ない。

そしてついに、IE対応を捨て去って、CSS3フル活用でWEBサイトを作ってみたわけです。すると

な ん と い う こ と で し ょ う

工程数は2/3から1/2程度に抑えられ、かつ書くのが楽しくてたまりません。HTMLとCSSなのに。

めんどくさいベンダープレフィックスのことはSASSで吸収すればなんの問題もなく。

アイコン画像を使うためだけにTwitter Bootstrapを使い、などなど。

可能性が広がります。

クロスブラウザという名のもとに犠牲になったWebデザイナーの胃の調子と髪の毛を救うことができます。

さらに、このタグを各サイトがみな設置してしまえば、どんどんIEからユーザーが撤退します。


最後に:より鬼畜に推し進めるなら

上記タグを全ページに設置すれば、IEでサイトにきているユーザーはリンクで画面が遷移するたびにアラートが表示されます。めんどくさくてページなんてみれられません。

おそらく、ページを見ることをやめるか、ダウンロードするかの二択になります。

リスクは高いが、リターンも大きい。

さぁ、IE対応がめんどくさいなら、いますぐ設置しよう。

WordPressなら、header.phpに設置してしまえば、もう全ページ対応完了さ!

Webデザイナーが一斉蜂起して全サイトに組み込まれだしたら、IEさん死滅やでぇ。