読者です 読者をやめる 読者になる 読者になる

すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

古いOSとIEのサポートを考える 2017年1月版

TL;DR

2017年4月11日以降は、IE11のみ考えるようにしたい。
現時点ではWindows Vista で利用されているIE9が生きていることになっているので、JavaScriptでdatasetが使えるかを基準に判定して良いと思うやつ。

現時点で < 1% 程度です。

 

最近1ヶ月程度の Google Analytics データのうち、

  • PC、Windows Vista のみ
  • ブラウザの利用状況をグラフにする
  • IEは便宜上IE9とする
  • サンプル数は3,000,000程度

を抽出してみましょう。

2017年1月頃の Windows Vista でのブラウザ利用状況
はい。出ました。

全体の1.96%が Windows Vistaを利用していて、そのうち30.9%がIEを利用しているようです。
つまり、全体の0.61%のようですね。セッション数から新規ユーザーに切り替えても同じ程度の結果になる為、訪問者の200人に一人程度が該当するようです。

 

最近、はてなブログで色々できるやつのコードを書き直しているのですが、古いIEの対応をどうしましょうか。と確認したり、ちょっと何とかできるなら試してみましょうか。とやってみたやつでした。

 

例えば、共通して使えるところの一部として、試しにこんなコードにしてみたり。

Htnpsne.API.ts

    export let htmlTagData: any = (() => {
        let dataset: DOMStringMap | Object = document.getElementsByTagName("html")[0].dataset;
        // フォールバック IE 10 以下
        if (typeof dataset === "undefined") {
            let attr: NamedNodeMap = document.getElementsByTagName("html")[0].attributes;
            dataset = {};
            for (let i: number = 0; i < attr.length; i++) {
                if (attr[i].name.indexOf("data-") === 0) {
                    let keyName: string = attr[i].name.slice(5).replace(/-([a-z])/g,
                        function (all: string, letter: string): string {
                            return letter.toUpperCase();
                        });
                    dataset[keyName] = attr[i].value;
                }
            }
        }
        return dataset;
    })();

 

TypeScriptからJavaScriptに変換されると、このようなコードになります。(抜粋)

        API.htmlTagData = (function () {
            var dataset = document.getElementsByTagName("html")[0].dataset;
            // フォールバック IE 10 以下
            if (typeof dataset === "undefined") {
                var attr = document.getElementsByTagName("html")[0].attributes;
                dataset = {};
                for (var i = 0; i < attr.length; i++) {
                    if (attr[i].name.indexOf("data-") === 0) {
                        var keyName = attr[i].name.slice(5).replace(/-([a-z])/g, function (all, letter) {
                            return letter.toUpperCase();
                        });
                        dataset[keyName] = attr[i].value;
                    }
                }
            }
            return dataset;
        })();

API.htmlTagDataを参照する事で、IE10などでdatasetを扱う感覚でhtmlタグに含まれているデータ属性を読み取る事ができます。
※上記はjQueryを参考に書いたコードです。

 

datasetが使えれば、1行で済みます。

ちょっと試してみた というやつですが、数ヶ月で役割を終える上に、他にも調整しなければならない部分があるので、素直にIE10未満は諦めてもらう方向で良いとおもったやつでした。*1

 

くまやつ。

リズムだいすき こぐまのトンピー ぬいぐるみ

リズムだいすき こぐまのトンピー ぬいぐるみ

 

 

*1:IE9は生きている代わりに、IE10は終わったやつ。