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

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

Avatar for yomotsu yomotsu
August 01, 2013
Programming
230
0

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

Avatar for yomotsu

yomotsu

August 01, 2013

More Decks by yomotsu

See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
Avatar for yomotsu yomotsu
0
900
PBR in three.js
Avatar for yomotsu yomotsu
1
1.4k
dialog要素でつくるモーダルダイアログ
Avatar for yomotsu yomotsu
0
1.1k
IE to Edge
Avatar for yomotsu yomotsu
1
410
A Camera Control Library for three.js
Avatar for yomotsu yomotsu
1
1.5k
Let’s try AR
 on mobile Web with <model-viewer>
Avatar for yomotsu yomotsu
0
600
WebXR: Beyond
 WebGL
Avatar for yomotsu yomotsu
2
1.9k
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.9k

Other Decks in Programming

See All in Programming
Jindong: Introducing Declarative Haptics in Compose Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
120
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
550
SlackアプリとLambdaの 連携を構築した話
Avatar for pawn pawn_4_s
1
120
いまどきの Codex で開発する visionOS アプリの開発スタイルについて
Avatar for kazuhiro hara karad
0
150
Android CLI
Avatar for Sungyong An fornewid
0
220
Lean は証明の正しさを確認するためだけのツールって思ってませんか？
Avatar for 井上亜星 inoueasei
1
160
AIが無かった頃の素敵な出会いの話
Avatar for コドモン開発チーム codmoninc
1
440
今さら聞けない .NET CLI
Avatar for tkym htkym
0
200
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
1.8k
為什麼你並不需要ViewModel / No, you don't need a ViewModel
Avatar for Elvis Shi lovee
1
500
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
Avatar for Gota gotalab555
4
1.7k
「寝てても仕事が進む」Claude Codeで組む第二の脳
Avatar for t-fujita24 tomoyafujita2016
0
340

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
400
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
210
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
520
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
190
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
910
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
290
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
460
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.5k

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