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

Transcript

1. 新しいIEとHTML5JavaScriptで動く 最近のWebアプリケーション 小山田 晃浩 | @yomotsu | (株)ピクセルグリッド
3. 新しいIEで動かない？
8. •Quirks Modeで実装している •IE独自拡張を使っている •プラグインに頼っている •よくわからないけど動作保証できない
9. Quirks Mode
10. div{ width: 300px; padding: 100px; border: 3px solid #000; background: #EEEEEE; }
11. Standards Mode
12. Standards Mode Quirks Mode
14. 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
15. IE独自拡張
16. •ActiveXObject •VBScript •Data Binding •VML and others...
17. •ActiveXObject •VBScript •Data Binding •VML and others... •Data属性 •SVG •JavaScript ଟ͘͸)5.-Ͱ΋Ͱ͖·͢
18. 要プラグイン技術
19. ಈըετϦʔϛϯάͳͲ͸·ͩґଘͤ͟ΔΛಘ·ͤΜ͕ ଟ͘ͷ͜ͱ͸+BWB4DSJQUͰ΋ՄೳͰ͢
21. •Doctypeをしっかり宣言 •IE独自拡張に頼らない •プラグインに頼らない
22. Quirks Modeと IE独自拡張の延命
23. *&͸ݹ͍Τϯδϯ΋උ͍͑ͯ·͢
27. ... <head> ... <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title>...<title> ... </head> ... ... ...
29. http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx
30. •古いIEをほぼ再現できる •Tridentのバージョンは変わる •JScriptのバージョンは変わらない
31. 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
32. demo navigator.userAgent document.compatMode document.documentMode ScriptEngineMajorVersion() の比較
33. これからの Webシステム構築
36. 最近のIE
37. 0 2500 5000 7500 10000 IE7 IE8 IE9 IE10 IE11 SunSpider JavaScript Benchmark Results
38. 早くなった
40. 新技術をサポート (主にIE9以降)
45. ほぼ 標準技術だけで Webアプリケーションを作れる
51. •サーバーからはJSONを吐き出す •ブラウザーはJSONを受け取る •画面はJavaScriptで構築
59. 最近のJavaScriptに注目を
60. まとめ
61. 政府専用メールサービスを作ることになったとしても フロントエンドでは 標準の技術を使おう
62. www.codegrid.net
63. Thank you @yomotsu