Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for yomotsu yomotsu
August 01, 2013
Programming
0
220

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

Avatar for yomotsu

yomotsu

August 01, 2013
Tweet

More Decks by yomotsu

See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
Avatar for yomotsu yomotsu
0
690
PBR in three.js
Avatar for yomotsu yomotsu
1
960
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1k
IE to Edge
Avatar for yomotsu yomotsu
1
360
A Camera Control Library for three.js
Avatar for yomotsu yomotsu
1
1.3k
Let’s try AR
 on mobile Web with <model-viewer>
Avatar for yomotsu yomotsu
0
560
WebXR: Beyond
 WebGL
Avatar for yomotsu yomotsu
2
1.8k
Non-DOM components with WebGL in Vue.js
Avatar for yomotsu yomotsu
5
13k
WebGL Libs for
 WebApp Frameworks
Avatar for yomotsu yomotsu
4
7.8k

Other Decks in Programming

See All in Programming
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
Avatar for Holly Cummins hollycummins
0
240
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
160
Foundation Modelsを実装日本語学習アプリを作ってみた！
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
120
技術的負債の正体を知って向き合う
Avatar for irof irof
0
200
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
27
33k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
7
490
フロントエンド開発のためのブラウザ組み込みAI入門
Avatar for Masashi Hirano masashi
6
3.1k
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
290
CSC509 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
iOSエンジニア向けの英語学習アプリを作る！
Avatar for yukawashouhei yukawashouhei
0
200
kiroとCodexで最高のSpec駆動開発を！！数時間で web3ネイティブなミニゲームを作ってみたよ！
Avatar for Haruki Kondo mashharuki
0
730
NixOS + Kubernetesで構築する自宅サーバーのすべて
Avatar for ichi-h ichi_h3
0
1.1k

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
980
Side Projects
Avatar for Sacha Greif sachag
455
43k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
190
55k

Transcript

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

  2. None

  3. 新しいIEで動かない？

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

  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

  13. None

  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Ͱ΋ՄೳͰ͢

  20. None

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

  22. Quirks Modeと IE独自拡張の延命

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

  24. None
  25. None
  26. None

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

    ... ...
  28. None

  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システム構築

  34. None
  35. None

  36. 最近のIE

  37. 0 2500 5000 7500 10000 IE7 IE8 IE9 IE10 IE11

    SunSpider JavaScript Benchmark Results

  38. 早くなった

  39. None

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

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

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

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

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

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

  59. 最近のJavaScriptに注目を

  60. まとめ

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

  62. www.codegrid.net

  63. Thank you @yomotsu