新しい IE とJavaScript で動く最近の Web アプリケーション

新しいIEとHTML5JavaScriptで動く最近のWebアプリケーション小山田晃浩 | @yomotsu | (株)ピクセルグリッド

新しいIEで動かない？

•Quirks Modeで実装している •IE独自拡張を使っている •プラグインに頼っている •よくわからないけど動作保証できない

Quirks Mode

div{ width: 300px; padding: 100px; border: 3px solid #000; background:
#EEEEEE; }

Standards Mode

Standards Mode Quirks Mode

DOCTYPE宣言モードなし <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html> Q Q S S S

IE独自拡張

•ActiveXObject •VBScript •Data Binding •VML and others...

•ActiveXObject •VBScript •Data Binding •VML and others... •Data属性 •SVG •JavaScript
ଟ͘͸)5.-Ͱ΋Ͱ͖·͢

要プラグイン技術

ಈըετϦʔϛϯάͳͲ͸·ͩґଘͤ͟ΔΛಘ·ͤΜ͕ ଟ͘ͷ͜ͱ͸+BWB4DSJQUͰ΋ՄೳͰ͢

•Doctypeをしっかり宣言 •IE独自拡張に頼らない •プラグインに頼らない

Quirks Modeと IE独自拡張の延命

*&͸ݹ͍Τϯδϯ΋උ͍͑ͯ·͢

... <head> ... <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title>...<title> ... </head> ...
... ...

http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx

•古いIEをほぼ再現できる •Tridentのバージョンは変わる •JScriptのバージョンは変わらない

Trident (MSHTML) JScript IE6 IE7 IE8 IE9 IE10 3.0? (6.0)
5.6 3.1? (7.0) 5.7 4.0 (8.0) 5.8 5.0 (9.0) 9 6.0 (10.0) 10

demo navigator.userAgent document.compatMode document.documentMode ScriptEngineMajorVersion() の比較

これからの Webシステム構築

新しい IE とJavaScript で動く最近の Web アプリケーション

新しい IE とJavaScript で動く最近の Web アプリケーション

yomotsu

More Decks by yomotsu

Other Decks in Programming

Featured

Transcript

新しいIEとHTML5JavaScriptで動く最近のWebアプリケーション小山田晃浩 | @yomotsu | (株)ピクセルグリッド

新しいIEで動かない？

•Quirks Modeで実装している •IE独自拡張を使っている •プラグインに頼っている •よくわからないけど動作保証できない

Quirks Mode

div{ width: 300px; padding: 100px; border: 3px solid #000; background:

Standards Mode

Standards Mode Quirks Mode

DOCTYPE宣言モードなし <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

IE独自拡張

•ActiveXObject •VBScript •Data Binding •VML and others...

•ActiveXObject •VBScript •Data Binding •VML and others... •Data属性 •SVG •JavaScript

要プラグイン技術

ಈըετϦʔϛϯάͳͲ͸·ͩґଘͤ͟ΔΛಘ·ͤΜ͕ ଟ͘ͷ͜ͱ͸+BWB4DSJQUͰ΋ՄೳͰ͢

•Doctypeをしっかり宣言 •IE独自拡張に頼らない •プラグインに頼らない

Quirks Modeと IE独自拡張の延命

*&͸ݹ͍Τϯδϯ΋උ͍͑ͯ·͢

... <head> ... <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title>...<title> ... </head> ...

http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx

•古いIEをほぼ再現できる •Tridentのバージョンは変わる •JScriptのバージョンは変わらない

Trident (MSHTML) JScript IE6 IE7 IE8 IE9 IE10 3.0? (6.0)

demo navigator.userAgent document.compatMode document.documentMode ScriptEngineMajorVersion() の比較

これからの Webシステム構築

最近のIE

0 2500 5000 7500 10000 IE7 IE8 IE9 IE10 IE11

早くなった

新技術をサポート (主にIE9以降)

ほぼ標準技術だけで Webアプリケーションを作れる

•サーバーからはJSONを吐き出す •ブラウザーはJSONを受け取る •画面はJavaScriptで構築

最近のJavaScriptに注目を

まとめ

政府専用メールサービスを作ることになったとしてもフロントエンドでは標準の技術を使おう

www.codegrid.net

Thank you @yomotsu