x3.js JavaScript rapidly reloader release

x3.js というものを創ってみました。 http://code.google.com/p/x3-js/

JavaScript をキャッシュしておき、JavaScript ロード時に発生するボトルネック/ブロッキングやネットワークアクセスコストをゼロにしようという、ありそうでなかったライブラリです。

WebSQL が使える環境なら WebSQL を、だめなら WebStorage にキャッシュします。

• x3.js のターゲットは iPhone, Android です
  • PC ブラウザでも動作します。IE6 と IE7 対応は特別料金となっております
• 5MB までのファイルをキャッシュ可能です
• ページの読み込みが落ち着いてから、サーバにアクセスしキャッシュを更新する機能があります
• x3.js は Minified で 2.2kbyte。ページに直接埋め込んで使います
• js の一本化を強制します
  • 一本化は意図してデザインした仕様です。強制的に型にはめるのでフレームワークともいいますか
  • 一本化することで…
    • 読み込み順に起因する依存関係が存在しなくなります
    • ファイルの圧縮効率が最大化します
    • 同一ドメイン内では常にキャッシュされた状態になります。ものすごく効率がいいです
    • 「JavaScript の読み込みが遅いから～」という苦情が一切なくなります。そのような苦情が来たら「ちがうんじゃない?」と返す刀でバッサリ切り捨てられます
• 一本化した js は HTML と同じ場所に置く必要があります
  • 内部で XHRを使いサーバ上のファイルの更新をチェックしているため、XHR Lv2 に対応していないブラウザを考えるとスクリプトを別のドメインで配布することはできなくなります
    • CDN に js を設置するという発想は一旦捨ててください
• 一本化したことにより、あるページでは必要のないスクリプトも全て走ってしまうのでは? という心配があると思います
  • x3.ready という URL ディスパッチャ機能を提供しています。そのページに必要なコードを走らせる事ができます
  • JavaScript の初期化が遅くなるのでは? という心配があると思います
    • 初期化が遅いのは恐らく JavaScript のコードや重厚なライブラリ側の問題であり、ブラウザ側の問題ではなかったりします
    • 一本化したことにより JavaScript の初期化に 300ms 程度の余計な時間がかかったとしても、JavaScript がもたらすネットワークアクセスのボトルネックは、ページ全体で 1000ms 単位のオーダーだったりしませんか? そこだけではなく、全体を見るといいと思います
• キャッシュ後はページロード中のコネクション数が一本減ります。ネットワークアクセス周りが確実に改善します
• script defer や script async と結果よく似たコンセプトになりました
  • defer や async と比べると「今すぐ使える」「キャッシュされる」「コネクション数をさらに1本減らせる」「更新チェックを後回しにできる」というメリットがあります
    • これらメリットが特に不要なら x3.js を使わず、従来の方法で良いと思います
• x3.js は とてもシンプルな構造です
  • Hack 満載なスクリプトローダーや、<script src="..."></body> といった IE6, IE7 で危険な Hack を過去のものにします
• x3.js は WebSQL や WebStorage への基本的なアクセスも提供しています
  • 同じ土台を使って CSSスプライト用の画像をキャッシュしておくプラグインなども作れると思います
• ブラウザゲーム(ソーシャルゲーム等)では、Range ヘッダーなどをこちらの予想とは違う形で解釈するような(または叩き落とす)独特なProxyを経由する事が多々あります
  • そのようなアウトオブコントロールな環境においても、x3.js を使う事でリクエストをコントロールできる可能性が増えます
  • HTML5を使ったブラウザゲームなどはゲーム内イベントが頻繁に発生し、そのつどアップデートが必要になります
    • そのような環境においても x3.js を使う事でキャッシュの最大化とページアクセス時のボトルネックの最小化を両立する事が可能になります

といった感じです。

(ε・◇・)з えーとね…

(ε・ᴥ・)з『よくある「ロードを速くする10の方法」「ハイパフォーマンス○○」とか
(ε・ᴥ・)з 1～2年前に海外で流行った古くて中途半端な情報にちがいないよ!
(ε・ᴥ・)з まゆつば! まゆつば! ハナシ・ハンブン ってやつだよきっと!』

(ε・◇・)з って言われそうなので、わりと念入りに準備しておりました

(ε・◇・)з WebSQL は凍結された規格だけど、
(ε・◇・)з SQLite が搭載されている iPhone, Android では、この先もずっと使えそうな事がわかってるし、
(ε・◇・)з おかげで WebStorage とは別の領域に 5MB もの大容量の可処分領域が確保できるってメリットもあるよね
(ε・◇・)з Chrome for Android βでも WebSQL は使えるよ (Android Browser にあったバグも修正されてたし)

デプロイする段階で、JavaScript ファイルの結合と Minify(コンパイル)という作業が発生しますが、コードの文法チェックやエラーもある程度機械的に検出できるという嬉しい副作用もありますし、コードの結合はあまり大変な作業でもないはずです。
そのへんはサクッと乗り越えて、ぜひ試してみてください。

(ε・◇・)з バグや「こーするといいよー」などがありましたら @uupaa まで～
(ε・◇・)з (コメント欄はスルーなのです

x3 ってなんてよむの?

• (ε・◇・)з とりぷるえっくす
• (ε・◇・)з えっくす さん
• (ε・◇・)っ エクスリー
• (ε・◇・)з くわとろさん。お寿司おごってください

(ε・◇・)з のどれかだとおもいますー

簡単ログインの終焉 x ガラケーとCookie x そしてFlashLite

ガラケー(FP:フィーチャーフォン)周りの整理整頓と、ソーシャルカードゲーム界隈はいつまで FlashLite1.1 縛りなのかな? 調べ。

2009年当時は、FlashLite1.1 での開発がデファクト
Flash Lite入門講座　第1回　日本のFlash Liteの仕様 | デベロッパーセンター

(ε・◇・)з もう3年たってるし… そろそろ次にすすめるんじゃないの?

を探るのがこのエントリの目的。

FP や FlashLite を取り巻く幾つかの流れ

• FlashLite は Adobe のロードマップから(かなり以前に)完全消滅

• 2012-03-31 で mova停波, 過去3年で 600万回線が FOMA へ移行
  • 506i シリーズで mova は打ち止め。端末は2007年末に製造停止

• 2012-04-30 で Google が簡単ログインを廃止
  • Google のサービスを使いたければ Cookie が必須に
  • mixi などは以前から Cookie 必須
    • Cookie 対応は iモードブラウザ2.0 (2009夏モデル)以降から

• いまどきの端末は iモードブラウザ 2.0 / 2.1 がデフォルト
  • ページあたりのキャッシュサイズが 100kb(1.0) → 500kb(2.0) に
  • i-mode スペック一覧(pdf)

• いまどきの端末は FlashLite3.1 がデフォルト
  • Adobe Flash Lite * Flash Lite 2.x および 3.x の概要
  • FlashLite3.1 で出来ること
    • AS2.0
    • SharedObject (同じ領域を swf 間でシェア)
    • デバイス ビデオ/サウンド/キーの取得(上下左右キー,最大12のキー)
    • インラインテキスト入力
    • ビットマップスムージング
    • XMLSocket
    • Flash Media Server連携
    • FLV, H.264, 埋め込みなら500kbまで, プログレッシブなら10MBまで
    • MP3
    • FlashPlayer9用swfを再生可能(AS2なswfのみ、AS3は非対応)
    • fscommand()
    • HTML/CSSのサポート
    • wmode(透過)
    • scale, slign, align

docomo ガラケー Cookie, FlashLite 対応状況

機種	シーズン	Cookie	FlashLite
F-01A	2008冬	×	3.1
F-02A	2008冬	×	3.0
F-03A	2008冬	×	3.1
F-04A	2008冬	×	3.0
F-05A(キッズ)	2008冬	×	1.1
F-08A	2009夏	○	3.1
F-09A	2009夏	○	3.1
L-01A	2008冬	×	1.1
N-01A	2008冬	×	3.1
N-02A	2008冬	×	3.1
N-03A	2008冬	×	3.0
N-04A	2008冬	×	3.1
N-06A	2009夏	○	3.1
N-07A	2009夏	○	3.1
N-08A	2009夏	○	3.1
N-09A	2009夏	○	3.1
P-01A	2008冬	×	3.1
P-02A	2008冬	×	3.1
P-03A	2008冬	×	3.1
P-04A	2008冬	×	3.1
P-05A	2008冬	×	3.1
P-07A	2009夏	○	3.1
P-08A	2009夏	○	3.1
P-09A	2009夏	○	3.1
P-10A	2009夏	○	3.1
SH-01A	2008冬	×	3.1
SH-02A	2008冬	×	3.1
SH-03A	2008冬	×	3.1
SH-04A	2008冬	×	3.1
SH-05A	2009夏	○	3.1
SH-06A	2009夏	○	3.1
SH-07A	2009夏	○	3.1
HT-01A	2008冬	×	非対応
HT-02A	2008冬	×	非対応
HT-03A(Android)	2009夏	○	非対応
L-04A	2009夏	○	1.1
L-06A	2009夏	○	1.1
T-01A(Windows Mobile)	2009夏	○	3.1
らくらくホン ベーシックII	2009夏	×	非対応

docomo 2011年冬～2012年夏モデル

機種	シーズン	Cookie	FlashLite	i-mode ブラウザ	キッシュ
F-02D	2011冬	○	3.1	2.1	500
F-04D	2011冬	○	3.1	2.1	500
F-06D	2011冬	○	3.1	2.1	500
SH-03D	2011冬	○	3.1	2.1	500
SH-05D	2011冬	○	3.1	2.1	500
N-02D	2011冬	○	3.1	2.1	500
N-03D	2011冬	○	3.1	2.1	500
P-03D	2011冬	○	3.1	2.1	500

うーん

(ε・◇・)з FP そのものの絶滅カウントダウンが始まってるから
(ε・◇・)з リスク承知で FlashLite3.1 使おうなんて人はいないか…
(ε・◇・)з FlashLite3.1 とは何だったのか…

i-mode ブラウザ 2.1 とかも、「新機能搭載しました」というだけで、
シェアや利用可能な時期の指標となるようなデータが公表されないから、
開発者は「んで、それいつになったら利用できるの?」と、げんなり。

(ε・◇・)з シェアの非公開が開発者の興味を遠ざけ…
(ε・◇・)з スローな技術開発と端末価格の高騰が新機能の浸潤を阻害し…
(ε・◇・)з Cookie 非対応による障壁がガラパゴス化の要因…
(ε・◇・)з 時既にお寿司やね

関連リンク

• Flash Lite
  • Flash Lite入門講座　第1回　日本のFlash Liteの仕様 | デベロッパーセンター
  • Flash Lite入門講座　第2回　Flash Liteの再生環境から見た注意点 | デベロッパーセンター
  • Flash Lite入門講座　第3回　待ち受け時計を作ろう！ | デベロッパーセンター
  • Flash Lite
  • DoCoMoでCOOKIEに対応している機種の一覧 - それ図解で。・・・tohokuaikiのチラシの裏
  • ウノウラボ by Zynga Japan: iモードブラウザ 2.0まとめ
• au
  • CDMA 1X WIN - Wikipedia
  • KDDI au: 技術情報 > 機種別情報一覧
  • 800MHz帯の周波数再編に伴う「CDMA 1X」などのサービス終了等のお知らせ〈別紙〉 | 2010年 | KDDI株式会社
• docomo
  • モバイルユーザー傾向DATABOX（2012年2月） | Web担当者Forum - docomo 端末シェア(参考データ)
    • グラフに出てくる P905i(FlashLite3.0) や F-01A(FlashLite3.1) は Cookie 非対応
    • モバイルユーザー傾向DATABOX（2012年2月） | Web担当者Forum - FlashLite シェア(参考データ)

IE 6, IE7, IE 8 でキャッシュしておいた文字列を、動的に生成した script 要素に設定し、文字列を JavaScript として評価する方法

IE 8 で文字列から動的に script 要素を生成したい時もあると思います。
オフラインにキャッシュしておいた文字列を JavaScript として評価したい場合などです。

こうすると動作します

IE6 ～ IE8 専用です。

var script = document.createElement("script");

document.getElementsByTagName("head")[0]).appendChild(script);
script.outerHTML = '&nbsp;<script defer="defer">' + 
                   jsExpression + '</script>';

document.createElement("script") でダミーの(プレースホルダの) script 要素を作り、そのあとで outerHTML で上書きしています。

これでも良いようです

script.text に文字列を代入すると、JavaScript として評価されます。

var script = document.createElement("script");

document.getElementsByTagName("head")[0]).appendChild(script);
script.text = jsExpression;

モダンブラウザなら

IE6～IE8 以外のブラウザならこれでいけます。IE9 でも動きます。
document.head がない環境では、document.getElementsByTagName("head")[0]) から head 要素を取ってください。

var script = document.createElement("script");

script.charset = "utf-8";
document.head.appendChild(script);
script.textContent = jsExpression;

x3.js では調査した全てのブラウザで動作する script.text = ... を採用しています。

参考リンク

• floatingdays: JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い
• innerHTMLでscriptする - Thousand Years
• script要素のtextプロパティ - Thousand Years
• 動的な JavaScript の生成と読み込み＆入れ替え: Script雑感

ライブラリをキャッシュし読み込み速度 x3.js にするライブラリを書いてみた (書きかけ

(ε・◇・)з きえまみた
(ε・◇・)っ x3.js JavaScript rapidly reloader release - latest log

関数の引数を増やすことでバグを生み出してしまう事がある。 という話

(ε・◇・)з いつも JavaScript のローレベルな話題をお届けしています～
(ε・◇・)з このブログは今日も平常運転です～

さて、引数を1つしか持たない単純な関数は不便なのでしょうか? 便利なのでしょうか?

このエントリでは、

• 引数を1つしか持たない単機能な関数は、Array#map などのイテレータと相性が良い
• イテレータと組み合わせて使える関数に、うかつに引数を追加するとバグを生み出してしまう事がある

という例をご紹介します。

引数を1つしか取らない関数にできること

引数を1つしか持たず、与えられた文字列の先頭を大文字化する関数(例: toUpper)は、Array#map などのイテレータと組み合わせる事でスッキリと記述する事ができます。

function toUpper(str) { // @param String:
                        // @return String:
    return str.charAt(0).toUpperCase() + str.slice(1);
}

["abc", "def"].map(toUpper); // -> ["Abc", "Def"]

(ε・◇・)з 単純ってすばらしいね

既存の関数を拡張し引数を増やすとバグを生み出してしまう事がある

あるとき、

(ε・◇・)з toUpper に引数(pos)を追加して場所を指定できると便利じゃない!?
(ε・◇・)з よーし、拡張しちゃうぞー

と、あまり深く考えずにノリで動作を変更してしまうと…

function toUpper(str,   // @param String:
                 pos) { // @param Number(= 0):
                        // @return String:
    pos = pos || 0;
//  return str.charAt(0).toUpperCase() + str.slice(1);
    return str.slice(0, pos) + str[pos].toUpperCase() +
           str.slice(pos + 1);
}

たしかに toUpper の汎用性と機能性は向上するのですが、
その代償として、イテレータと組み合わせて記述する事ができなくなってしまいます。

["abc", "def"].map(toUpper); // -> ["Abc", "dEf"]
                             // 既存のコードの結果が変わってしまう

Array#map + toUpper を既に利用しているユーザにしてみればこれはバグであり、ハタ迷惑な話です。

引数を一個しか取らない限定された関数は意外と便利

イテレータ用に引数を1つしか持たない単純な関数を用意しておくと、それらを組み合わせてスッキリと記述できたりします。

複雑な機能を持った関数を生み出さず、引数の数と型はライブラリ全体のバランスを見て、設計段階から練り込んでおくべき

必須の引数が3つ以上あり、かつ引数の数が可変で、引数の順番と型の組み合わせで関数の挙動が大きく変化するような I/F の設計は控えるべきです。
そのような、全てを飲み込むファサードパータンのような I/F は、好ましくありません。

おそらくそのような関数は、関数本来の動作とは無関係な(引数の型の検査や引数の並べ替え)処理に、毎回コストを支払うような構造になってしまいます。

ぱっと見の分かりやすさや実行速度を犠牲にして得られるのが、ソースコードよりはるかに長い説明文と自己満足ぐらいだとしたら、そのような I/F の設計は今一度考えなおすべきかと思われます。

機能の多重化と分かりやすさのバランスを間違えると、リファレンスを見なければコードが書けないライブラリになってしまいます。

(ε・◇・)з ボクタチはこれを高機能化の罠と呼んでいるんだ
(ε・◇・)з タチコマ・タチコマ

mofmof.js の Future でシンプルに非同期処理を記述する

以下は、画像を3つ読み込み全て読み込み後に canvas でまとめて描画するコードです。

http://mofmof-js.googlecode.com/svn/trunk/test/base.js.htm に行き、コンソールに以下のコードを貼り付けると動作します。

(function() {
    var images = [
            "http://www.google.co.jp/images/nav_logo102.png",
            "http://k.yimg.jp/images/top/sp/logo.gif",
            "http://www.bing.com/fd/s/a/sw3.png"
        ];

    var canvas = document.createElement("canvas");

    canvas.width  = 800;
    canvas.height = 800;

    document.body.appendChild(canvas);

    var ctx = canvas.getContext("2d");


    // 3個の画像全てを読み込み終わったら drawCanvas を呼びます
    var future = drawCanvas.every(images.length);

    images.each(function(url, index) {

        // mm.Class.Image に future を bind すると
        // 画像の読み込み完了/失敗のたびに
        // future.pass(node) や future.miss(node) を呼びます

        new mm.Class.Image(url, future, index);
    });

    function drawCanvas(result) { // { ok: Boolean,
                                  //   args: NodeArray,
                                  //   state: Number }
        if (result.ok) { // ok = 完了
            result.args.each(function(node) {
                ctx.drawImage(node, node.index * 200,  // sx
                                    node.index * 200); // sy
            });
        }
    }
})();

全ての画像の読み込みを待たず、読み込みが終わったものから canvas で次々描画するには以下のようにします。

(function() {
    var images = [
            "http://www.google.co.jp/images/nav_logo102.png",
            "http://k.yimg.jp/images/top/sp/logo.gif",
            "http://www.bing.com/fd/s/a/sw3.png"
        ];

    var canvas = document.createElement("canvas");

    canvas.width  = 800;
    canvas.height = 800;

    document.body.appendChild(canvas);

    var ctx = canvas.getContext("2d");

    // 3個の画像全てを読み込み終わったら drawCanvas を呼びます
//  var future = drawCanvas.every(images.length);

    // 画像を1つ読み込む毎に drawCanvas を呼びます。これを3回くり返します
    // 全て読み込み終了で mm.nop (何もしない関数) を呼びます
    var future = mm.nop.every(images.length, drawCanvas);

    images.each(function(url, index) {

        // mm.Class.Image に future を bind すると
        // 画像の読み込み完了/失敗のたびに
        // future.pass(node) や future.miss(node) を呼びます

        new mm.Class.Image(url, future, index);
    });

    function drawCanvas(result) { // { ok: Boolean,
                                  //   args: NodeArray,
                                  //   state: Number }
//      if (result.ok) { // ok = 完了
//          result.args.each(function(node) {
//              ctx.drawImage(node, node.index * 200,  // sx
//                                  node.index * 200); // sy
//          });
//      }
        // 100(継続中) または 200(読み込み完了) で描画します
        if (result.state < 400) {

            // 最後のimg要素(読み込みが終わったimg要素)を参照します
            var node = result.args.tail();

            ctx.drawImage(node, node.index * 200,  // sx
                                node.index * 200); // sy
        }
    }
})();

このように、Future と連携する機能をもった mm.Class.Image を使うことで本来のロジックに注力できます。

IE 6, IE 7, IE 8 が退場した未来

Internet Explorer の自動アップグレードについて | TechNet

長かった… 本当に長かった…
やっと、IE 6, IE 7 が居なくなるのですね…

uupaa.js ver 0.8 に埋まっている処理から情報を抜き出し IE 6, IE 7, IE 8 が居なくなった未来では何が可能になるのか抜粋してみました。

IE8 でやっと使えるようになる機能

一部は IE 6 や IE 7 でも使えるのですが、対応が限定的だったり不具合が多かったりと、安心して使えなかった機能も含まれています。

• display: inline-block
• display: table, table-cell など
• position: fixed;
• E:active {...}
• E:focus {...}
• E::first-child {...}
• E:lang(C) {...}
• E::after
• E::before
• 透過png
• postMessage Internet Explorer 8 のクロス ドキュメント メッセージングの概要
• XDomainRequest ドメイン間要求 (XDR) の概要
• window.JSON
• window.console
• 属性セレクタ ［attr］［attr=value］［attr|=value］［attr~=value］［attr^=value］［attr*=value］［attr$=value］
• 隣接セレクタ E + F
• 兄弟セレクタ E ~ F
• 子セレクタ E > F
• list-style-type: ...
• border-spacing: ...
• outline: ...
• box-sizing: ...
• CSS counter, counters method

a::before {
  content: counter(article) ". ";
  counter-increment: article;
}

• CSS attr method

a::before {
   content: attr(title) ": ";
}

• CSS auto value
• CSS inherit value
• WebStorage (localStorage, sessionStorage)
• HashChange Event
• querySelector, querySelectorAll (ただし Selectors Level 3 で追加された pseudo-class は未サポート)
  • IE8 の querySelector は E:not(...), E:last-child, E:nth-child(...) 等が実装されていない
• dataURI
• WAI-ARIA
• 最大接続数を window.maxConnectionsPerServer で確認可能に (maxConnectionsPerServer は IE だけの独自プロパティ)
  • HTTP 1.1 なら最大同時接続数が 4 → 6 に
    • HTTP 1.0 は 4 のまま
    • ダイヤルアップなら 2 のまま
    • レジストリの改変で最大接続数を制御可能に

IE 8 で改善された/仕様が変更された機能

• String[indexer] で文字列の一部にアクセス可能に (IE8 からは "abc"[1] === "b") (IE7 までは "abc"[1] === undefined)
• position: absolute; (IE6でも使えるがテキストが選択できなくなるバグがあった)
• E:hover {...} (a要素以外にも適用可能に)
• max-width: ..., min-width: ..., max-height: ..., min-height: ... (一部はIE7から)
• 強化された XMLHttpRequest Internet Explorer 8 における XMLHttpRequest の強化
  • XMLHttpRequest#abort()
  • XMLHttpRequest#timeout
  • XMLHttpRequest progress event
• !important 宣言 (IE6では解釈にバグがあった)
• border-color: transparent; (background: transparent は IE6 から利用可能)
• 3つ以上のクラスセレクタを同時に指定可能に .E .F .G { ... }
• readyState が他のブラウザと同じく "complete" を返すように

IE 8 で不要になる(意味がなくなる/使えなくなる)機能

• zoom: 1 (hasLayout)
• document.execCommand("BackgroundImageCache", false, true) (IE6)
• CSS::expression
• CSS Hack
• node.getAttribute("className") (IE6, IE7 は "class" ではなく "className" にする必要があった)
• ActiveXObject("Microsoft.XMLHTTP")
• object.method = null; (クリティカルなメモリリーク対策)
• node.tagindex, node.colspan を文字列ではなく数値として配慮する処理
• node.checked と node.disabled の特殊処理
• node.getAttribute(attr, 2) で <a href="relative/dir/file.ext"> をフルパスに変換する処理
• [0,].length === 1 (IE6, IE7 では 2)

IE 9 でやっと使えるようになる機能

• DOM Lv2 Event Model
  • document.addEventListener("DOMContentLoaded")
  • node.addEventListener(), node.removeEventListener()
  • event.target, event.pageX, event.pageY
  • event.stopPropagation(), event.preventDefault()
  • Capture Phase が使用可能に

node.addEventListener("click", callback, true)

• color: transparent;
• node.getElementsByClassName()
• window.getComputedStyle()
• window.innerWidth, window.innerHeight, window.pageXOffset, window.pageYOffset
• node.textContent
• CSS3セレクタ全般
• opacity:
• rgb(,,), rgba(,,,), hsl(,,), hsla(,,,)
• multiple-background
• background-clip:
• background-size:
• background-origin:
• border-radius:
• box-shadow:
• canvas
• SVG の一部機能 (IE9 ではフィルタがなく,DOMイベントに一部しか対応しておらず、他のブラウザとの差異や細かな不具合がある)
• window.HTMLBodyElement などの HTML***Element 系 interface
• window.Node interface
• Array.isArray や Array#map 等のECMAScript 262-5th edition の機能
• setter, getter Defining Getters and Setters - MDN

IE 9 で改善された/仕様が変更された機能

• Selectors API Level 1 (querySelector, querySelectorAll) をフルサポートし:notなどが利用可能に Selectors API Level 1
• document や window などの HostObject が Object を継承するように仕様が変更された
  • for (i in document) { document.hasOwnProperty(i) } で例外が発生しなくなった
• filter: progid:DXImageTransform.Microsoft.{{filterName}}({{values}})
  • 透過画像にフィルタを重ねてもジャギらないように実装が変更されている
• Array.prototype.slice.call(NodeList) で NodeList を Array に変換可能に
  • Array.prototype.slice.call(arguments) で arguments を Array に変換するのは IE6, IE7, IE8 でも可能
• node.innerHTML = "<style></style>"
• node.cloneNode() (IE8まではクローンした <div> の参照がクローン元とクローンされた要素で共有されてしまい、クローン前にattachEventされているイベントハンドラも、クローン元とクローンされた要素で共有されてしまっていた)

IE 9 で不要になる(意味がなくなる/使えなくなる)機能

• uuCanvas.js, uuAltCSS.js などの黒魔術
• IE Event Model
  • event.srcElement, fromElement, toElement, cancelBubble, returnValue
  • window.event
• querySelector polyfill (:not() などを自作の querySelector で処理する)
• IE 専用の DOMContentLoaded 処理
• getElementsByTagName("*") でコメントノードが列挙される事を配慮した処理
• node.attributes の列挙処理への特別な配慮
• innerHTML Hack
• document.createElement("section") などの HTML5 shiv
• Host Object が hasOwnProperty 等を持たず、アクセスすると例外を吐く事への特別な配慮
• window.onunload でメモリの解放
• node.cloneNode() Hack
• document overwrite Hack 2011-02-11 - latest log

/*@cc_on var doc = document; eval('var document = doc'); @*/

• 関数スコープの解釈がECMA準拠になり、同一スコープを汚染しなくなっている 2011-02-11 - latest log

var fn = function fnName() {};

if (typeof fnName === "function") {
    alert( "maybe legacy JScript(IE6, IE7, IE8)" );
} else {
    alert( "ECMAScript standard" );
}

• イベントハンドラが受け取る event オブジェクトが DOM Level3 Event対応に
  • event.button の値が変化し、0(left click), 1(mid click), 2(right click) に
    • IE8 まての event.button とは値が変化している
      • IE8 では event.button & 0x1 が true なら left click
      • IE8 では event.button & 0x4 が true なら mid click
      • IE8 では event.button & 0x2 が true なら right click

IE 10 でやっと使えるようになる機能

• text-shadow:
• multiple columns
• gradients
• transforms
• transitions
• outline-offset:
• resize
• WebWorkers
• WebSockets
• Geolocation
• Application Cache (Offline Cache)
• node.style.userSelect = "none"
• StyleSheet#insertRule, StyleSheet#deleteRule
• XMLHttpRequest Level2 XMLHttpRequest - Wikipedia
• File API
• Indexed Database
• Web Navigation Timing
• Typed Array

IE 10 で使えるかもしれない機能

• border-image:
• WebRTC の一部
  • Video Captioning
  • Media Capture API
• ES.next の一部
  • String#startsWith, endsWith, contains, repeat, toArray, reverse
  • Array.of, Array#from
  • Math.cosh, sinh, tanh, acosh, asinh, atanh, log1p, log2, log10, trunc
  • Number.isFinite, isNaN, isInteger, toInteger

IE 10 で不要になる(意味がなくなる/使えなくなる)機能

• ビヘイビア (htc)

body {
  behavior: url(hoge.htc);
}

• node.attachEvent, node.detachEvent
• コンディショナルコメント HTML5 Parsing in IE10 - IEBlog - Site Home - MSDN Blogs

<!--[if IE]>
 ...
<![endif]-->

• XDomainRequest (XMLHttpRequest Level2 を使いましょう)
• えーと… いっぱい

IE 10 でも使えない機能

• Function#name (関数名を取得)
• XPath

参考リンク

• Site Compatibility and IE8 - IEBlog - Site Home - MSDN Blogs
• CSS Compatibility and Internet Explorer
• ［さらに気になる］JSONの守り方 − ＠IT
• When can I use... Support tables for HTML5, CSS3, etc ブラウザ毎の HTML5 / CSS3 対応状況
• HTML5, きちんと。
• Internet Explorer 9 (IE9) 影響調査報告書 | TechNet

IE 8 は 2014年4月8日で終了

IE 8 (Windows XP) は、2014年4月8日で終了します。あと2年です。

http://www.microsoft.com/ja-jp/windows/lifecycle/sp3eos.aspx

IE 6, IE 7 や IE 8 が退場した未来では "クロスブラウザ" という言葉は死語になり、
IE 6 全盛の時代に雨後の竹の子のように生まれたクロスブラウザなJavaScriptライブラリ達も、このまま死滅していく運命にあるのでしょうね。

「IE6を使い続けるほうがコストが低い」という理由で更新をOFFにしてきた企業に対しては、
「IE6を使い続けると逆にコスト高になる」という分岐点が来た事を提示して差し上げるべきかと。

「IE6, IE7 対応が不要なら割引料金」と提示するか、
「IE6, IE7 対応が必要なら割増料金」と提示するかですが、前者が良いかなと。
# 追加料金の書き方をちょっと変えるとずいぶん印象が違う - 頭ん中

(ε・◇・)з 間違いや抜けがありましたら @uupaa までお願いします