LoginSignup
48
25

More than 3 years have passed since last update.

未だに Internet Explorer を使ってアクセスしてくる人を笑うスクリプト

Last updated at Posted at 2020-04-11

令和になってもInternet Explorer(以下 IE )を使っている人を笑うスクリプトを作った。

使い方

scriptタグのペースト / npm install の2パターンに対応している

scriptタグを使う方法

<script src="https://unpkg.com/laugh-at-ie/dist/index.js"></script>
<script>
var laugh = new LaughAtIE();
laugh.init();
</script> 

これをページに貼り付けるだけ

npm install する方法

npm install laugh-at-ie

して、

import LaughAtIE from 'laugh-at-ie'  

const laugh = new LaughAtIE()
laugh.init()

を貼り付ける。
当たり前だがクライアントサイドでしか動かないので注意。

カスタマイズ

new LaughAtIE() のオプション引数を設定することで、音源を変更したり、笑い声の再生時にお好みの関数を実行することができる。
下記はデフォルトの設定。

var laugh = new LaughAtIE({
    onLoad: {
        //ページ読み込み時の設定
        sound: 'https://laugh-at-ie.netlify.com/sound/laugh.mp3', //再生する音源
        callback: function(){} //再生時(ページロード時)に実行する関数
    },
    onError: {
        //ページでエラーが発生したときの設定
        sound: 'https://laugh-at-ie.netlify.com/sound/laugh2.mp3',
        callback: function(e){
            //エラー時はエラーメッセージを引数に取ることができる
            alert('Error!\n\n' + e)
        }
    }
});
laugh.init();



カスタムした設定はデフォルトの設定とマージされるので、例えばエラー時の音源だけを変えたい場合は

var laugh = new LaughAtIE({
    onError: {
        sound: './your-custom-sound.mp3',
    }
});
laugh.init();

とだけ指定すれば、デフォルトの設定を引き継ぎつつ、エラー時の音源だけを変更することができる。

サンプル

デモサイト の設定はこんな感じ。

function error(e) {
    var confirm = window.confirm('Error message: ' + e + '\n\nAn error occured. Do you want to get Chrome?');
    if (confirm) {
        location.href('https://www.google.com/chrome/')
    }
}

function welcome() {
    alert('Are you still using Internet Explorer???');
}

var laugh = new LaughAtIE({
    onLoad: {
        callback: welcome
    },
    onError: {
        callback: error //末尾に()をつけてしまわないように!
    }
});
laugh.init();

レガシーなWebアプリ、サイトを使い続けたいとい理由でIEを使い続ける人がいるのも重々承知していますが、IEはWeb開発者にとって長年悩みの種であるので、モダンブラウザへ移行してほしいですね。
当のMicrosoftも使うのやめて1って言ってますし。

あと、ライブラリっぽく公開するのは初めてなので何かあったら笑いながら指摘して下さい。

$Thank$ $you.$

48
25
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
48
25