168
131

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2012-12-26

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

168
131
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
168
131

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?