新しいIEとHTML5JavaScriptで動く
最近のWebアプリケーション
小山田 晃浩 | @yomotsu | (株)ピクセルグリッド
Saturday, August 3, 13
Saturday, August 3, 13
新しいIEで動かない?
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
•Quirks Modeで実装している
•IE独自拡張を使っている
•プラグインに頼っている
•よくわからないけど動作保証できない
Saturday, August 3, 13
Quirks Mode
Saturday, August 3, 13
div{
width: 300px;
padding: 100px;
border: 3px solid #000;
background: #EEEEEE;
}
Saturday, August 3, 13
Standards Mode
Saturday, August 3, 13
Standards Mode
Quirks Mode
Saturday, August 3, 13
Saturday, August 3, 13
DOCTYPE宣言 モード
なし
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4...
IE独自拡張
Saturday, August 3, 13
•ActiveXObject
•VBScript
•Data Binding
•VML
and others...
Saturday, August 3, 13
•ActiveXObject
•VBScript
•Data Binding
•VML
and others...
•Data属性
•SVG
•JavaScript
多くはHTML5でもできます
Saturday, August 3, 13
要プラグイン技術
Saturday, August 3, 13
動画ストリーミングなどはまだ依存せざるを得ませんが
多くのことはJavaScriptでも可能です
Saturday, August 3, 13
Saturday, August 3, 13
•Doctypeをしっかり宣言
•IE独自拡張に頼らない
•プラグインに頼らない
Saturday, August 3, 13
Quirks Modeと
IE独自拡張の延命
Saturday, August 3, 13
IEは古いエンジンも備えています
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
...
<head>
...
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>...<title>
...
</head>
...
...
...
Satur...
Saturday, August 3, 13
http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx
Saturday, August 3, 13
•古いIEをほぼ再現できる
•Tridentのバージョンは変わる
•JScriptのバージョンは変わらない
Saturday, August 3, 13
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
Saturd...
demo
navigator.userAgent
document.compatMode
document.documentMode
ScriptEngineMajorVersion()
の比較
Saturday, August 3, 13
これからの
Webシステム構築
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
最近のIE
Saturday, August 3, 13
0
2500
5000
7500
10000
IE7 IE8 IE9 IE10 IE11
SunSpider
JavaScript Benchmark Results
Saturday, August 3, 13
早くなった
Saturday, August 3, 13
Saturday, August 3, 13
新技術をサポート
(主にIE9以降)
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
ほぼ標準技術だけで
Webアプリケーションを作れる
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
•サーバーからはJSONを吐き出す
•ブラウザーはJSONを受け取る
•画面はJavaScriptで構築
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
Saturday, August 3, 13
最近のJavaScriptに注目を
Saturday, August 3, 13
まとめ
Saturday, August 3, 13
政府専用メールサービスを作ることになったとしても
フロントエンドでは
標準の技術を使おう
Saturday, August 3, 13
www.codegrid.net
Saturday, August 3, 13
Thank you
@yomotsu
Saturday, August 3, 13
Upcoming SlideShare
Loading in …5
×

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

10,178 views

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,178
On SlideShare
0
From Embeds
0
Number of Embeds
7,594
Actions
Shares
0
Downloads
0
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

  1. 1. 新しいIEとHTML5JavaScriptで動く 最近のWebアプリケーション 小山田 晃浩 | @yomotsu | (株)ピクセルグリッド Saturday, August 3, 13
  2. 2. Saturday, August 3, 13
  3. 3. 新しいIEで動かない? Saturday, August 3, 13
  4. 4. Saturday, August 3, 13
  5. 5. Saturday, August 3, 13
  6. 6. Saturday, August 3, 13
  7. 7. Saturday, August 3, 13
  8. 8. •Quirks Modeで実装している •IE独自拡張を使っている •プラグインに頼っている •よくわからないけど動作保証できない Saturday, August 3, 13
  9. 9. Quirks Mode Saturday, August 3, 13
  10. 10. div{ width: 300px; padding: 100px; border: 3px solid #000; background: #EEEEEE; } Saturday, August 3, 13
  11. 11. Standards Mode Saturday, August 3, 13
  12. 12. Standards Mode Quirks Mode Saturday, August 3, 13
  13. 13. Saturday, August 3, 13
  14. 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 Saturday, August 3, 13
  15. 15. IE独自拡張 Saturday, August 3, 13
  16. 16. •ActiveXObject •VBScript •Data Binding •VML and others... Saturday, August 3, 13
  17. 17. •ActiveXObject •VBScript •Data Binding •VML and others... •Data属性 •SVG •JavaScript 多くはHTML5でもできます Saturday, August 3, 13
  18. 18. 要プラグイン技術 Saturday, August 3, 13
  19. 19. 動画ストリーミングなどはまだ依存せざるを得ませんが 多くのことはJavaScriptでも可能です Saturday, August 3, 13
  20. 20. Saturday, August 3, 13
  21. 21. •Doctypeをしっかり宣言 •IE独自拡張に頼らない •プラグインに頼らない Saturday, August 3, 13
  22. 22. Quirks Modeと IE独自拡張の延命 Saturday, August 3, 13
  23. 23. IEは古いエンジンも備えています Saturday, August 3, 13
  24. 24. Saturday, August 3, 13
  25. 25. Saturday, August 3, 13
  26. 26. Saturday, August 3, 13
  27. 27. ... <head> ... <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title>...<title> ... </head> ... ... ... Saturday, August 3, 13
  28. 28. Saturday, August 3, 13
  29. 29. http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx Saturday, August 3, 13
  30. 30. •古いIEをほぼ再現できる •Tridentのバージョンは変わる •JScriptのバージョンは変わらない Saturday, August 3, 13
  31. 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 Saturday, August 3, 13
  32. 32. demo navigator.userAgent document.compatMode document.documentMode ScriptEngineMajorVersion() の比較 Saturday, August 3, 13
  33. 33. これからの Webシステム構築 Saturday, August 3, 13
  34. 34. Saturday, August 3, 13
  35. 35. Saturday, August 3, 13
  36. 36. 最近のIE Saturday, August 3, 13
  37. 37. 0 2500 5000 7500 10000 IE7 IE8 IE9 IE10 IE11 SunSpider JavaScript Benchmark Results Saturday, August 3, 13
  38. 38. 早くなった Saturday, August 3, 13
  39. 39. Saturday, August 3, 13
  40. 40. 新技術をサポート (主にIE9以降) Saturday, August 3, 13
  41. 41. Saturday, August 3, 13
  42. 42. Saturday, August 3, 13
  43. 43. Saturday, August 3, 13
  44. 44. Saturday, August 3, 13
  45. 45. ほぼ標準技術だけで Webアプリケーションを作れる Saturday, August 3, 13
  46. 46. Saturday, August 3, 13
  47. 47. Saturday, August 3, 13
  48. 48. Saturday, August 3, 13
  49. 49. Saturday, August 3, 13
  50. 50. Saturday, August 3, 13
  51. 51. •サーバーからはJSONを吐き出す •ブラウザーはJSONを受け取る •画面はJavaScriptで構築 Saturday, August 3, 13
  52. 52. Saturday, August 3, 13
  53. 53. Saturday, August 3, 13
  54. 54. Saturday, August 3, 13
  55. 55. Saturday, August 3, 13
  56. 56. Saturday, August 3, 13
  57. 57. Saturday, August 3, 13
  58. 58. Saturday, August 3, 13
  59. 59. 最近のJavaScriptに注目を Saturday, August 3, 13
  60. 60. まとめ Saturday, August 3, 13
  61. 61. 政府専用メールサービスを作ることになったとしても フロントエンドでは 標準の技術を使おう Saturday, August 3, 13
  62. 62. www.codegrid.net Saturday, August 3, 13
  63. 63. Thank you @yomotsu Saturday, August 3, 13

×