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
580
PBR in three.js
Avatar for yomotsu yomotsu
1
910
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1k
IE to Edge
Avatar for yomotsu yomotsu
1
350
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
550
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
複数アプリケーションを育てていくための共通化戦略
Avatar for irof irof
10
4k
Webからモバイルへ Vue.js × Capacitor 活用事例
Avatar for Naoki Haba naokihaba
0
740
Java on Azure で LangGraph！
Avatar for Kohei Saito kohei3110
0
160
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
1
180
Cline指示通りに動かない？ AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
Avatar for 葦沢かもめ kamomeashizawa
1
560
SODA - FACT BOOK
Avatar for SODA inc. sodainc
1
1.1k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
Avatar for どすこい daisuketakeda
1
120
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
0
140
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
Avatar for 이가은 gaeun5744
3
300
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
150
CursorはMCPを使った方が良いぞ
Avatar for taiga taigakono
0
150
KotlinConf 2025 現地で感じたServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
220

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
920
Adopting Sorbet at Scale
Avatar for Ufuk Kayserilioglu ufuk
77
9.4k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
490
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
16
940
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
34k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k

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