Quantcast
Channel: monoe's blog
Viewing all articles
Browse latest Browse all 51

2016 年 1 月 12 日でサポート終了となるバージョンの Internet Explorer でアクセスすると、その旨をひかえめに教えてくれるバーを表示するスクリプト

$
0
0

昨年の 8 月にアナウンスされ、すでに多くの方がご存じのとおり、来年 (2016) の 1 月 12 日からは、Internet Explorer のサポートポリシーが変更され、その Windows で動作する最も高いバージョンの Internet Explorer しかサポートされなくなります。
(※タイトルのサポート終了日付が間違っておりましたので修正しました。どうもすみません)

具体的には以下の組み合わせのものだけがサポートされるようになります。

Windows Internet Explorer 延長サポート終了
Windows Vista SP2 Internet Explorer 9 2017年 4 月 11 日
Windows Server 2008 SP2 2020年 1 月 14 日
Windows 7 SP1 Internet Explorer 11
Windows Server 2008 R2 SP1
Windows 8.0 Internet Explorer 10 2023年 1 月 10 日
Windows Server 2012 Internet Explorer 10
Windows 8.1 Internet Explorer 11
Windows Server 2012 R2 Internet Explorer 11
Windows 10 Internet Explorer 11 (最低でも10年)

(2016年1月12日以降、サポートされる
Windows と Internet Explorer の組み合わせ)

 

これにより、HTML5 が動作せず、他の Web ブラウザーとの振る舞いも異なる旧い時代の Internet Explorer のサポートが終了することになります。(※Vista の Internet Explorer 9 はまだ機能が充分でないというのがありますが、それはまぁ、Vista ですし…アレですよ。質問しないでくださいね♡)

とにかく、来年の 1 月以降は、Web 制作において「IE ハック」などど呼ばれる、いわゆる “Internet Explorer のためだけに行う激しくマイナスな感情をともなう特別な作業”、というものは必要なくなるはずです。

そうです、もう二度と attachEvent や @cc_on 、<!–[if (IE)]> といった記述をすることはなく、html5shiv.js を参照することもなく、Polyfill  や Progressive Enhancement  という言葉も、もはや、将来子供にしてやる苦労話の一つとして記憶の彼方に追いやることができるのです。

多くの Web 製作者の方々は IE、レガシーブラウザー対応という、なんら将来の投資に 1 ミリも値しない不毛な作業から解放され、人生をもっと豊かで有意義なものにできることでしょう。

しかし、ほんとうにそんなにうまく事が運ぶのでしょうか?

 

どうするの? メーカーのサポート終了後の Old IE 対応

レガシー IE のサポートが終わったからといって、レガシー IE 対応がすぐに無くなることはないでしょう。

なぜならはメーカーのサポートが終了しても レガシー IE を使い続けるユーザーがおり、それらユーザー対しても品質を低下させることなく Web コンテンツを提供したいという意思が働く場合はレガシー IE 対応を続けることになります。

たとえば、広告によって収入を得る Web サイトの場合は PV は直接収入に関係するものですから、ユーザーがメーカーのサポートが終了した Web ブラウザーを使用しているからといって、その割合が多い場合には対応せざるを得ないでしょう。

しかし、そういった時代遅れのレガシーブラウザを手厚く保護すればするほど、ユーザーは不便を感じず、ブラウザーをバージョンアップすることなく使い続け、結果、いっこうに減らないレガシーブラウザのユーザーのために、Web 製作者は今までと変わらない不毛な作業を続けることになるのです。まさにこれは負の連鎖と言えるでしょう。

こういった負の連鎖はどこかで断ち切らなければなりません。しかし、ユーザーがメーカーもサポートをやめた時代遅れの Web ブラウザーを使い続けているからといって、ないがしろにすることはできません。古いブラウザーを使ってはいても、自分たちの Web サイトに来てくれて、広告をクリックしてくださる大切なお客様なのです。

ではどうすれば良いでしょうか?

理想的なのは、ユーザーが自分の意思で Internet Explorer 11 にアップグレードするなどして、レガシーブラウザーからモダンブラウザーに移行することです。

ではどうすればユーザーにレガシーブラウザーの使用をやめさせることができるでしょうか?

それにはまず、そういったユーザーがなぜレガシーブラウザーを使い続けるのかを考える必要があります。

 

ユーザーがサポート切れのレガシーブラウザーを使い続ける理由

ユーザーがサポート切れのレガシーブラウザーを使い続ける理由はいろいろあるでしょう。

使用している OS が古すぎてレガシーブラウザーしかインストールできない、特定のバージョンの Internet Explorer に特別な思い入れがある (例 : 亡くなった奥さんが愛用していた)、宗教上の理由、など様々な理由が考えられます。

しかし、私が思うに、そういったユーザーの大部分は、たんにサポートの終了期限を知らないか、知っていても、サポート切れた Web ブラウザーを使用し続けることがどれだけ恐ろしいことかご存知ないだけだと思うのです。

つまり、正しい情報が、正しく、そしてあまねく伝わりさえすれば、そういったユーザーのけして少なくない数の人たちが、ブラウザーをアップデートしてくれると思うです。

 

ユーザーにレガシー IE のサポート終了を知らせるには

マイクロソフトでは、以下のように TechNet に大きくレガシー IE のサポート終了を知られる掲示をしたり、我々もセッションや、ブログなどでこの件を発信していますが、残念ながら、我々がリーチできるのは、IT に興味をもっている方々くらいです。

image

お仕事などで IT にかかわらない方々はこういった情報に触れることはないと思いますので、皆さまの周りで Internet Explorer 11  以前のブラウザーを使用している方がいらっしゃいましたら、もうすぐサポートが終了する旨をお伝えいただくとともに、ぜひともブラウザーのアップデートを勧めていただければと思います。

 

ユーザーが使用している IE が、
来年の 1 月 12 日でサポートが終了するバージョンだった場合
お知らせバーを表示するスクリプト

ユーザーの使用している Web ブラウザーが来年 (2016 年) の 1 月 12 日でサポートが終了するバージョンだった場合に、画面上部に控えめのその旨を知らせるメッセージバーを表示するスクリプトを作成してみました。

すでにこのページにも仕込んであり、該当する Internet Explorer と Windows の組み合わせでアクセスすると以下のようなバーが表示されます。

image

青いバーは、バーのどこかをクリックすると消えます。

Internet Explorer 11 で試す場合には F12 開発者ツールでドキュメントモードを変更してその挙動を確認してみてください。

ただし、Windows 10 + Internet Explorer 9 のようなありえない組み合わせではバーは表示されません。Windows 10 で試す場合には、ドキュメントモードを IE8 以前のものにするか、エンタープライズモードを使用してください。

このスクリプトのソースコードは以下のとおりです。

//レガシーな Internet Explorer のサポート終了を知らせるバーを表示する
(function () {
    //サポート終了日
    var SUPPORT_LIMIT_DATE = ‘2016/01/12′;
    //Windows 7 の検出用
    var WIN7_STRING = ‘Windows NT 6.1′;
    //IE11> の IE の検出用
    var MSIE_STRING = ‘MSIE';
    //レガシーIEサポート終了のお知らせブログの URL
    var CAUTION_URL = ‘http://bit.ly/change_iesupport';
    //IE11 のダウンロードページ
    var IE_DL_URL = ‘http://bit.ly/dl_ie_jp';
    var CAUTION_TITLE_STRING = ‘最新の Internet Explorer をご利用ください';
    var DL_TITLE_STRING = ‘Internet Explorer のダウンロード – Microsoft Windows';
    var user_agent = bypassBrowserCheck();
    var legacyIE = false;
    var div = null;

    //情報バーを生成して表示
    function show_limit_bar() {
        //サポート終了日をさかいに表現を変える
        var isGoneSiting = (new Date() >= new Date(SUPPORT_LIMIT_DATE)) ? ‘ました。’ : ‘ます。';
        var LIMIT_BAR_INNER_HTML = ‘<div style="’
            + ‘background-color:blue;color:white;’
            + ‘position:absolute;top:0px;left:0px;padding:10px;’
            + ‘width:100%;font-size:10px;cursor:pointer;">’
            + ‘ご使用になっている Web ブラウザーのサポートは 2016 年 1 月 12 日で終了し’
            + isGoneSiting
            + ‘<a title="’ + CAUTION_TITLE_STRING
            + ‘" href="’ + CAUTION_URL + ‘" target="_blank">’
            + ‘<span style="color:yellow;">詳しくはこちらをご覧ください。</span></a>’
            + ‘最新のブラウザーは<a title="’ + DL_TITLE_STRING
            + ‘" target="_blank" href="’ + IE_DL_URL
            + ‘"><span style="color:yellow;">ここから入手</span></a>してください。’
            + ‘</div>';
        div = document.createElement(‘div’);
        div.innerHTML = LIMIT_BAR_INNER_HTML;
        try {
            if (legacyIE) { div.attachEvent(‘onclick’, remove_limit_bar); }
            else { div.addEventListener(‘click’, remove_limit_bar, false); }
            document.body.appendChild(div);
        } catch (err) {
            //エラーを上げないためなのでなにもしない
        }
    }

    //情報バーを削除
    function remove_limit_bar() {
        document.body.removeChild(div);
    };

    //レガシー IE を検出
    if (!window.addEventListener) {
        //IE9 以前
        legacyIE = true;
        window.attachEvent(‘onload’, show_limit_bar);
    } else {
        if (user_agent.indexOf(WIN7_STRING) > -1
                && user_agent.indexOf(MSIE_STRING) > -1) {
            window.addEventListener(‘load’, show_limit_bar, false);
        }
    };

    //dev.modern.ieのSiteScan の [ブラウザー検出] で不合格とならないため
    function bypassBrowserCheck() {
        var STRING_USERANENT_MEYHOD = ‘navigator$userAgent';
        return eval(STRING_USERANENT_MEYHOD.replace(‘$’,’.’));
    };
})();

 

上記コードはサンプルコードとして掲載していますので、とくに動作保証は致しません。

その代わりといってはなんですが、改変や配布は自由にしてただいて構いませんので、ご自由にお使いいただければと思います。

また、手っ取り早くご自分のページで試したい場合は、以下の参照タグを HTML の適当な場所に記述すればバーが表示されるようになります。

 

このファイルはミニファイされており、コードの使用している変数名および関数名のスコープも、逐次実行関数内で閉じていますので、名前空間を汚染することはありませんので安心してお使いください。

 

まとめ

今回は、ユーザーの使用している Web ブラウザーが来年 (2016 年) の 1 月 12 日でサポートが終了するバージョンだった場合に、画面上部に控えめにその旨を知らせるメッセージバーを、あくまでも控えめに表示するスクリプトを紹介しました。

繰り返しになりますが、皆さまの周りで Internet Explorer 11  以前のブラウザーを使用している方がいらっしゃいましたら、もうすぐサポートが終了する旨をお伝えいただくとともに、ぜひともブラウザーのアップデートを勧めていただければと思います。

Web Statistics

Clicky


Viewing all articles
Browse latest Browse all 51

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>