Internet Explorerユーザーを判定して注意を促し、Chromeなどのモダンブラウザに誘導するWEBパーツ。

2018.03.14

WEBサイトを作った事のある人なら誰しもInternet Explorer(以下IE)に苦しめられた事があると思います。
一般的にIEは遅い・セキュリティが弱い等の悪名が高いですが、制作サイドから言わせてもらうと、W3C標準仕様と異なる挙動と、バグが多すぎるのが一番の問題。例えるなら、マニュアル通りに作っても決して組みあがらず、パーツの欠品も多いプラモデルのようなもの。
他のブラウザなら、W3C標準仕様の通りに作れば、ほぼ同じような表示が可能ですが、最後にIEで確認すると動かなかったり表示の崩れがあって、そのためにアニメーションや機能を削ったり、IEのためだけに再調整したりと、無駄な手間が増えます。

そんなIEも最近では開発ストップに加え、今後のサポート終了もアナウンスされており、世界シェアは順調に減ってきております。2018年現在ではChromeの60%に対して、IEはわずか3%！喜ばしい限りです。
ところが困ったことに、日本ではまだ15%ほどの人が未だにIEを使っており、その多くが役所や大手企業だと言われております。これは無視できない状況ですね・・・。一度組んだシステムの都合上(そもそもIEでしか見られないシステムなんか作るなよ！)や、スペックの低いPCを使い続けなければいけない等の課題があるとは思いますが(実際スペックの低いPCでも、IEより他のブラウザの方が快適ですが・・・)、役所や大企業ほどセキュリティに大きな問題があるIEは使わないで欲しい所。
(余談ですが、ちょっと前のPCサポートの仕事でウィルスやマルウェアに感染して困った方のPCを調べると、ほとんどの原因がIEにありました)

そこで当サイトではIEゼロを目指して、IEユーザーを判定して注意を促し、Chromeなどのモダンブラウザに誘導するWEBパーツを作ってみました。

HTML

    
このサイトは Internet Explorer 10 以下には対応しておりません
    
    
あなたがお使いの Internet Explorer はセキュリティ問題と表示の不具合を多く抱える古いブラウザのため、開発元のMicrosoft社でも移行を勧めております。
WEB閲覧には安全上の問題や、快適性を考慮して、現在主流となっている Google Chrome や Firefox または Opera 等の最新ブラウザをご利用ください。
    
Chromeのダウンロード

CSS

#alertie{
	width: 100%;
	position: fixed;
	bottom: 0px;
	left: 0px;
	color: #333;
	background-color: #fff;
	padding: 0.25em 0.75em;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
	display:flex;
	flex-wrap:no-wrap;
	justify-content:space-between;
	align-items:center;
	align-content:center;
	opacity:0;
	transition: all 0.8s ease-in-out;
	transform: translate3d(0,100%,0);
	z-index:9999;
	
	display:block\9; 
	height:100%\9; 
	top: 0px\9; 
	bottom: auto\9; 
	transform: translate3d(0,0%,0)\9; 
	opacity:1\9; 
}

#alertie.visible{
	will-change: transform;
	transform: translate3d(0,0%,0);
	opacity:1;
}

#alertie h2{
	display:none;
	display:block\9; 
}

#alertie h5{
	padding: 0.25em 0.75em;
}

#alertie b{
	color: #999;
}

#alertie a{
	color: #BF3335;
}

#buttonie{
	text-align: center;
	color: #BF3335;
	background-color: #fff;
	border: 1px solid #BF3335;
	transition: all 0.3s ease-in-out;
	transform: scale(1);
	display:inline-block;
}

#buttonie:hover{
	color: #fff;
	background-color: #BF3335;
	will-change: transform;
	transform: scale(0.98);
}

#closeie{
	width: 2vw;
	height: 2vw;
	transform: scale(1) rotate(45deg);
	transition: all 0.2s ease-in-out;
	cursor:pointer;
	
	display:none\9; 
}

#closeie:hover{
	will-change: transform;
	transform: scale(0.8) rotate(45deg);
}

#closeie:before{
	content: "";
	display: block;
	position: absolute;
	width: 2px;
	height: 2vw;
	top: 0vw;
	left: 1vw;
	background: #000;
}

#closeie:after{
	content: "";
	display: block;
	position: absolute;
	width: 2vw;
	height: 2px;
	top: 1vw;
	left: 0vw;
	background: #000;
}

JavaScript

let userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf('msie') !== -1 || userAgent.indexOf('trident') !== -1) {
	document.getElementById("alertie").classList.add("visible");
}

var clickElement = document.getElementById("closeie");
clickElement.addEventListener("click", function(event) {
	document.getElementById("alertie").classList.remove("visible");
},false);

JQueryは使っておりませんので、ライブラリ等の読み込みは不要です。

RESULT

実行結果をご覧になりたい場合は、上の「アラートを表示する」ボタンを押してみて下さい。
このサイトの場合は一応IE11でも見られるように作っておりますので、IE11の場合は下部にアラートのバーが表示され、閉じるボタンで消すことができます。IE10以下の場合は表示が崩れるので、見られないように全画面にアラートが表示されます。バーと全画面の切り替えはCSSのIEハックで行っておりますので、ご自分のホームページに合わせて適宜変更して下さい。

それでは、IEで閲覧する人がいなくなる事を願って、ぜひこのパーツを使ってみて下さい！

Copyright © 2018, Mo-ja.net All Rights Reserved.