Blog

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

2015.02.13 | jQuery | 2267views


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

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

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

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

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

現時点のブラウザシェア

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

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

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

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

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

20150213_01

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

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

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

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

20150213_02

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

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;
}

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

20150213_03

IE9以上、もしくはその他のモダンブラウザでページを閲覧している人にはアラートは出ずに、

20150213_04

 

IE6~8でページを開いた人にはこちらの画像のように見えるわけですね。

これでIE8以下でページにアクセスした場合にはページの最上部にアラートが表示されるようになります。

あえてバージョンアップをしない人もいる。

こういったものを表示させて、それでも頑なにバージョンアップしない人は、おそらく今の環境を変えたくないか変えられないのでしょう。

IE対応というものはWeb制作を行う上では本当に時間がかかります。

ブラウザチェックを行い、不具合を洗い出し、対応可能なものは対応し、原因がわからないものは調査して原因を見つけ出し、それでも対応できないものがあればGoogle非推奨の方法などを使わざるを得ません。

だからあえてバージョンアップをしない場合はもう仕方がありません。
仕方がありませんが、そこまでの対応を行う時間や余裕があるのなら、新しい技術をどんどん取り入れて、せっかく来てくれたユーザーの皆さんを感動させたほうがよっぽど有意義だと思いませんか?

以上、古いIEを使っているユーザーへバージョンアップを促すjQueryを使った対応策でした。

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

脇坂 基徳

著者:龍弥デザイン

岡山県でホームページ&ウェブサイト制作を承っている龍弥デザインは、
ホームページ&ウェブサイトのデザイン・コーディングなどの制作や修正・更新、
WordPressなどのCMSの導入・カスタマイズ、Facebookページの制作、
各種Flashの制作などを行っているフリーランスのWebデザイナーです。

LLC JIRIKI