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

3c557c6103a4addc52f7b76ffd0a0f27?s=47 yomotsu
August 01, 2013
Programming
0
120

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

3c557c6103a4addc52f7b76ffd0a0f27?s=128

yomotsu

August 01, 2013
Tweet

Want more?

3c557c6103a4addc52f7b76ffd0a0f27?s=48 yomotsu
0
240
3c557c6103a4addc52f7b76ffd0a0f27?s=48 yomotsu
0
310
3c557c6103a4addc52f7b76ffd0a0f27?s=48 yomotsu
2
860
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
4
210
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
110
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
87
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
5
190
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
5
170
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
230
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
3
460
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
120
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
210

Transcript

  1. 1.

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

  2. 2.
    None
  3. 3.

    新しいIEで動かない？

  4. 4.
    None
  5. 5.
    None
  6. 6.
    None
  7. 7.
    None
  8. 8.

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

  9. 9.

    Quirks Mode

  10. 10.

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

    #EEEEEE; }
  11. 11.

    Standards Mode

  12. 12.

    Standards Mode Quirks Mode

  13. 13.
    None
  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
  15. 15.

    IE独自拡張

  16. 16.

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

  17. 17.

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

    ଟ͘͸)5.-Ͱ΋Ͱ͖·͢
  18. 18.

    要プラグイン技術

  19. 19.

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

  20. 20.
    None
  21. 21.

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

  22. 22.

    Quirks Modeと IE独自拡張の延命

  23. 23.

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

  24. 24.
    None
  25. 25.
    None
  26. 26.
    None
  27. 27.

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

    ... ...
  28. 28.
    None
  29. 29.

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

  30. 30.

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

  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
  32. 32.

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

  33. 33.

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

  34. 34.
    None
  35. 35.
    None
  36. 36.

    最近のIE

  37. 37.

    0 2500 5000 7500 10000 IE7 IE8 IE9 IE10 IE11

    SunSpider JavaScript Benchmark Results
  38. 38.

    早くなった

  39. 39.
    None
  40. 40.

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

  41. 41.
    None
  42. 42.
    None
  43. 43.
    None
  44. 44.
    None
  45. 45.

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

  46. 46.
    None
  47. 47.
    None
  48. 48.
    None
  49. 49.
    None
  50. 50.
    None
  51. 51.

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

  52. 52.
    None
  53. 53.
    None
  54. 54.
    None
  55. 55.
    None
  56. 56.
    None
  57. 57.
    None
  58. 58.
    None
  59. 59.

    最近のJavaScriptに注目を

  60. 60.

    まとめ

  61. 61.

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

  62. 62.

    www.codegrid.net

  63. 63.

    Thank you @yomotsu