Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新しい IE とJavaScript で動く最近の Web アプリケーション
Search
yomotsu
August 01, 2013
Programming
0
220
新しい IE とJavaScript で動く最近の Web アプリケーション
yomotsu
August 01, 2013
Tweet
Share
More Decks by yomotsu
See All by yomotsu
three.jsとRapierでレースゲームが3日でできた話
yomotsu
0
690
PBR in three.js
yomotsu
1
960
dialog要素でつくるモーダルダイアログ
yomotsu
0
1k
IE to Edge
yomotsu
1
360
A Camera Control Library for three.js
yomotsu
1
1.3k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
560
WebXR: Beyond WebGL
yomotsu
2
1.8k
Non-DOM components with WebGL in Vue.js
yomotsu
5
13k
WebGL Libs for WebApp Frameworks
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
hollycummins
0
240
理論と実務のギャップを超える
eycjur
0
160
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
120
技術的負債の正体を知って向き合う
irof
0
200
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
33k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
490
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
6
3.1k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
290
CSC509 Lecture 05
javiergs
PRO
0
300
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
730
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
GitHub's CSS Performance
jonrohan
1032
470k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Side Projects
sachag
455
43k
Building Adaptive Systems
keathley
44
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Transcript
新しいIEとHTML5JavaScriptで動く 最近のWebアプリケーション 小山田 晃浩 | @yomotsu | (株)ピクセルグリッド
None
新しいIEで動かない?
None
None
None
None
•Quirks Modeで実装している •IE独自拡張を使っている •プラグインに頼っている •よくわからないけど動作保証できない
Quirks Mode
div{ width: 300px; padding: 100px; border: 3px solid #000; background:
#EEEEEE; }
Standards Mode
Standards Mode Quirks Mode
None
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
IE独自拡張
•ActiveXObject •VBScript •Data Binding •VML and others...
•ActiveXObject •VBScript •Data Binding •VML and others... •Data属性 •SVG •JavaScript
ଟ͘)5.-ͰͰ͖·͢
要プラグイン技術
ಈըετϦʔϛϯάͳͲ·ͩґଘͤ͟ΔΛಘ·ͤΜ͕ ଟ͘ͷ͜ͱ+BWB4DSJQUͰՄೳͰ͢
None
•Doctypeをしっかり宣言 •IE独自拡張に頼らない •プラグインに頼らない
Quirks Modeと IE独自拡張の延命
*&ݹ͍Τϯδϯඋ͍͑ͯ·͢
None
None
None
... <head> ... <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <title>...<title> ... </head> ...
... ...
None
http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx
•古いIEをほぼ再現できる •Tridentのバージョンは変わる •JScriptのバージョンは変わらない
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
demo navigator.userAgent document.compatMode document.documentMode ScriptEngineMajorVersion() の比較
これからの Webシステム構築
None
None
最近のIE
0 2500 5000 7500 10000 IE7 IE8 IE9 IE10 IE11
SunSpider JavaScript Benchmark Results
早くなった
None
新技術をサポート (主にIE9以降)
None
None
None
None
ほぼ 標準技術だけで Webアプリケーションを作れる
None
None
None
None
None
•サーバーからはJSONを吐き出す •ブラウザーはJSONを受け取る •画面はJavaScriptで構築
None
None
None
None
None
None
None
最近のJavaScriptに注目を
まとめ
政府専用メールサービスを作ることになったとしても フロントエンドでは 標準の技術を使おう
www.codegrid.net
Thank you @yomotsu