Help us understand the problem. What is going on with this article?

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さん死滅やでぇ。

w7tree
インターネットがつなげた世界におけるシェア(共有)の完成形は初音ミクという文脈によってなされたと信じている。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした