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 ChromeFirefox または 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

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

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

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

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

この記事には目次がありません

関連記事

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

光回線は普通に申し込むと損をする!必ずキャッシュバックが多いネットから申し込もう!

格安SIMって実際どうなの?デメリットを知っておけば、メリットを最大限活かせる通信費の節約術