一刻も早くInternet Explorer (以下 IE) の呪縛から解放されたい。

そこで、IEで訪れてきたユーザーに対してモダンブラウザへ誘導するアラートを実装してみました。

方法は簡単。ユーザーエージェントからIEを判定し、警告メッセージを表示するdiv要素を表示するだけです。
見た目はcssで好きに整えましょう。

私は当ブログにて少し大きめのアラートを表示させることにしました。(技術系のブログなので、IEで訪れるユーザーなんて今のところいないですが...)

IEアラート画面

さぁ、世界平和への一歩を踏み出しましょう。

目次

PHPでIE判定し、アラートを表示する

IE判定関数を作成しておく

function is_IE() {
    $ua = mb_strtolower($_SERVER['HTTP_USER_AGENT']);  //すべて小文字にしてユーザーエージェントを取得
    if (strpos($ua,'msie') !== false || strpos($ua,'trident') !== false) {
        return true;
    }
    return false;
}

アラート表示位置にて

<?php if (is_IE()) {
    echo '<div class="ie_alert">'
            .'<span>Internet Explorer、ダメ絶対!</span>'
            .'<p>あなたが使用している <b>Internet Explorer</b> というブラウザはとても古いものです。<br>'
            .'言ってしまえば、百害あって一利なしの老害です。<br>'
            .'世界中で、多くのWEB制作者があなたの <b>Internet Explorer</b> のせいで苦悩しています。<br><br>'
            .'どうか、<b>最新のモダンブラウザ(EdgeやChrom)</b>をお使いください。</p>'
            .'<a href="https://www.google.co.jp/chrome/index.html">Google Chromをダウンロード</a>'
        .'<div>';
} ?>

このようにして、ユーザーエージェントでIEを判定する関数を定義しておき、好きな場所で好きなアラートを表示させることができます。(もちろん、関数を分けなくても大丈夫です。)

JSでIE判定し、アラートを表示する

IE判定関数

function isIE(){
    let userAgent = window.navigator.userAgent.toLowerCase();
    if (userAgent.indexOf('msie') !== -1 || userAgent.indexOf('trident') !== -1) {
        return true;
    }
    return false;
}

アラート表示の挿入(例:footerに)

if (isIE()) {
    let footer = document.getElementById('footer');  //アラート表示を挿入する場所
    let ieDiv = document.createElement('div');      //div要素の生成
    ieDiv.classList.add('ie_alert');                //クラス名付与

    ieDiv.innerHTML = `<span>Internet Explorer、ダメ絶対!</span>
    <p>あなたが使用している <b>Internet Explorer</b> というブラウザはとても古いものです。
    <br>言ってしまえば、百害あって一利なしの老害です。<br>
    世界中で、多くのWEB制作者があなたの <b>Internet Explorer</b> のせいで苦悩しています。<br><br>
    どうか、<b>最新のモダンブラウザ(EdgeやChrom)</b>をお使いください。</p>
    <a href="https://www.google.co.jp/chrome/index.html">Google Chromをダウンロード</a>`;

    footer.appendChild(ieDiv);    //footerの最後の子要素として追加
}

この例ではid名「footer」を付与したフッター要素に挿入していますが、任意のid名に変更してください。

見た目はcssで調整

.ie_alert{
    position: fixed;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background: rgb(196, 52, 52); /* rgba未対応の古いIE用 */
    background: rgba(196, 52, 52, 0.95);
    text-align: center;
    padding: 10% 0;
    z-index: 1000;
    span,p,a{
        color: #fff;
    }
    span{
        display: block;
        font-size: 80px;
    }
    p{
        font-size: 20px;
    }
    a{
        display: inline-block;
        font-size: 16px;
        margin-top: 20px;
        padding: 8px 80px;
        border: solid 1px #fff;
        &:hover{
            background: rgba(255,255,255,0.1);
        }
    }
}

冒頭で載せている画像のような見た目になります。

好きにアレンジしてください。

おわりに

PHPとJSでの実装の2パターンのコードをメモしましたが、JavascriptだとIE未対応の記述によって他の位置でエラーが起きているとうまく動作しない可能性もあります。

PHPなどのサーバー側でIE判定とアラートの出力を行う方が無難かと思います。

- Thank you for reading. -

あなたの1クリックが励みになります\( ̄ー ̄)/

コメント

コメントする

CAPTCHA


TOPへ Top