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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
880
PBR in three.js
Avatar for yomotsu yomotsu
1
1.3k
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
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
Avatar for r-kagaya rkaga
2
1.4k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
150
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
Avatar for Naoya Ito naoya
16
3.4k
信頼性について考えてみる（SRE NEXT 2026 miniLT）
Avatar for hayama hayama17
0
180
광주소프트웨어마이스터고등학교 DevFest 특강 - 바이브 코딩 시대에서 주니어 개발자로 살아남는 방법
Avatar for Chris Ohk utilforever
1
120
ローカルLLMでどこまでコードが書けるか -拡張版 /　How much code can be written on a local LLM Extended
Avatar for Naoki Kishida kishida
12
4.7k
【やさしく解説 設計編 #1】「ドメイン駆動」と「実装駆動」ってなに？ 〜設計の考え方を、たとえ話で学ぼう〜
Avatar for HideyukiKitao panda728
PRO
1
120
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
Avatar for HideyukiKitao panda728
PRO
2
130
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
260
エンジニアと一緒にテストコードの設計と実装を改善した話
Avatar for mototakatsu mototakatsu
0
260
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
Avatar for Estela Franco guaca
0
240
AIエージェントで 変わるAndroid開発環境
Avatar for takahirom takahirom
2
610

Featured

See All Featured
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
240
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
320
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
260
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
44k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
320
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
830
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.2k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
880
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
63
55k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
260

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