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
600
PBR in three.js
yomotsu
1
920
dialog要素でつくるモーダルダイアログ
yomotsu
0
1k
IE to Edge
yomotsu
1
350
A Camera Control Library for three.js
yomotsu
1
1.3k
Let’s try AR on mobile Web with <model-viewer>
yomotsu
0
550
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
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
140
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
140
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
540
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
ニーリーにおけるプロダクトエンジニア
nealle
0
870
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.2k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
6k
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
NPOでのDevinの活用
codeforeveryone
0
860
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.1k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Bash Introduction
62gerente
613
210k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Six Lessons from altMBA
skipperchong
28
3.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
Building Applications with DynamoDB
mza
95
6.5k
For a Future-Friendly Web
brad_frost
179
9.8k
Writing Fast Ruby
sferik
628
62k
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