【jQuery】古いIEを使っているユーザーへバージョンアップを促すjQueryを使った対応策。

2015.2.13

どうも、龍弥デザインの脇坂です。

古いInternet Explorer（以下IE）の表示対応、とても面倒ですよね。
とっても不具合の多いブラウザの割にシェアはそこそこあるので、以前まではIE対応には毎回頭を悩ませていました。

龍弥デザインでもIE8以下のバージョンのブラウザにも対応自体は行ってきましたが、ちょっと早めにIE9以上の対応に切り替えました。というのも今回ご紹介する方法で対応は十分可能だと判断したためです。

今回は僕が行っている、古いIEを使っているユーザーへバージョンアップを促すjQueryを使った対応策をご紹介しますね。

古いInternet Explorerに対するバージョンアップを促す最善策

現時点のブラウザシェア

今まであまり経験したことがありませんが、クライアント様自らが「古いIEに表示対応してほしい」とご希望されることがあるかもしれません。

本来ならばこの時点で古いIEを使い続けることがどれだけ危険なのか説教をしなければいけないんですが、目に見えるデータを見せることで納得してくれるかもしれません。

そこで、現時点のブラウザシェアを見てみましょう。シェアが低ければ古いIEへの対応が必要かどうか、クライアント様にもご理解いただけるのではないでしょうか。

日本の現在のブラウザシェア

http://lhsp.s206.xrea.com/misc/browser-share-version.html

今僕が見ているのは計測期間が2013年10月1日から2014年10月1日までのものです。
現状ではIE11がトップで、次いでGoogle Chrome、Firefoxという結果になっていますね。

こちらで見る限りではIE8は3.83%と、どっちともとれない数字になっています。
ただ「日本国内でも4%弱しか使っている人がいないんですよ」という、けっこう説得力がある言い方をすることができるんじゃないでしょうか。

日本のブラウザシェアの推移グラフ

http://lhsp.s206.xrea.com/misc/browser-share.html

次にブラウザシェアの推移グラフです。

2014年4月にサポートが切れたWindows XPでは世界中で使われていたIE6からIE8までを使用することができました。さらにサポートが切れる直前でIE6 〜IE11までの全てのバージョンの脆弱性が見つかり、大きくシェアを落としました。

僕らの業界では脆弱性に対しての危機感を持った反面、IEのシェアが大きく落ち込んだことはとても喜ばしいことでもありました（笑）

その後シェアは一時的に回復の傾向を見せましたが、徐々に下がってきていますよね。
ここまでIEのシェアが下がれば、IE8以下のバージョンの対応の必要性はあまり感じられないのも事実です。

jQueryで数行追加するだけでアラートを表示する。

前述したように、もうIE8以下の対応はそれほど必要とされていないとも思うんですが、それでも対応してほしいと言われた場合、完全に表示対応を行うよりも、閲覧者自らにバージョンアップさせるよう促す対応をしたほうが将来的には有効なのではないかと思うわけです。

古いブラウザが危険なことを知らない閲覧者には注意喚起してブラウザの最新バージョンのダウンロードリンクを掲載してバージョンアップを促すのが考えうる中での最善策なのではないでしょうか。

jQuery.support

現在jQueryにはブラウザ判別が行える「jQuery.support」というAPIがあります。これを使ってIE6〜8までのバージョンのブラウザのみにブラウザのバージョンアップを促すアラートを表示させてみましょう。

なお、jQueryを<head></head>内に読み込んでいる前提で話を進めます。

アラート部分を表示させるHTMLファイルの<head></head>内に以下のコードをペーストしてください。

<!-- HTMLファイルの<head></head>内に以下をペースト -->
<script>
if(!jQuery.support.opacity){
  $('body').prepend('<div id="error"><p>あなたは古いInternet Explorerをご利用中であり、大変危険な脆弱性が確認されています。<br />セキュリティを向上させるため、またウェブサイトを快適に閲覧するために、<br />ブラウザの無料バージョンアップを強くお勧めします。</p><p>&rarr; <a href="http://www.google.com/chrome/intl/ja/landing.html" target="_blank">最も人気の高いブラウザ、Google Chromeのダウンロードはこちら</a><br />&rarr; <a href="http://www.microsoft.com/ja-jp/windows/products/winfamily/ie/function/default.aspx" target="_blank">最新版のInternet Explorerのダウンロードはこちら</a></p></div>');
}
</script>

!jQuery.support.opacityという条件分岐で他のモダンブラウザは除いてIE6・7・8だけを対象に「.prepend()」を使ってbody要素の直前にHTMLコードを追加しています。

JavaScriptを追加できたら、アラート部分のCSSの要素を指定していきましょう。

#error {
 padding: 20px 0;
 color: #000;
 background: #fc3;
}

#error p {
 font: bold 16px/30px Meiryo,sans-serif;
}

#error a {
 color: #f00;
 text-decoration: underline;
}

#error a:hover {
 color: #fff;
 background: #f00;
}

こちらを組み込んだ結果は以下のようになります。