Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告

Internet ExplorerはIE特化アプリから
一時的に日本を救ってくれたけど
次回はもう助けてくれないよという警告

@kawada_hiroshi
2013.11.22

講演者紹介
NTTコムウェア株式会社

技術SE部

川田
寛

html5j Enterprise
コミュニティ部長

業務システムのための
HTML5勉強会主催(計6回)
人間中心設計推進機構正会員

IE6が優秀過ぎて
Perl, PHP, ASP, Java
企業システムの
Web化が加速した

強者はサーバサイドエンジニア
HTMLとかどうでもいいし！
ブラウザなんて書けば動く
IE6で動けばいい！！

IE6での動作が前提な
マークアップの嵐
あやしいコード・・・
思考の停止

思考の停止

テーブルレイアウト

<html>
<table>
<tr>
CSSでやってほしい・・・
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>

<h1>日本を支えるシステム</h1>
</td>
<td>
<tr><frameset><frame=hoge.html></frameset>

非推奨タグの利用

思考の停止

<html>
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>

</td>
<td>
スクロールバーが欲しいだけですよね・・・

<!DOCTYPE html>と書いてほしい・・・

<html>
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>

</td>
<td>

DOCTYPE宣言の不在

思考の停止

<head><body><title>と書いてほしい・・・
<html>
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>

</td>
<td>

思考の停止

作法無視のマークアップ

そして2014年4月・・・
とうとうWindowsXPの強引な延命が終了

IE6終了

SEがIE6に特化しWeb技術と向き合わない
失われた12年もここで終了

IE移行に戸惑う企業システム
ざわ…

ざわ…
ざわ…

ざわ…

ざわ…

日本の産業が窮地に立たされる！！

動いた！？

ビジネスが止まらずに済んだ
企業が、産業が、そして
国が守られた！！！！！

今回もなんとかなったし
これからもきっと大丈夫！！
The Department for Culture, Media and Sport

http://www.ﬂickr.com/photos/49429730@N08/

適当でいいんだよ
ブラウザ側なんて！！！

この時、誰もが平和を
自分たちの手によって勝ち取ったと
思い込んでいた…

しかしこのストーリーには
知られざる秘話があったのです

どうやって移行したのか？

ドキュメントモード
古いIEの動作をエミュレートする機能
IEは過去のレンダリングエンジンを持っている
IE8向け
HTMLドキュメント

Internet Explorer 10

5
7
8
9

Webページ

HTML3.2以下のWebシステム
(∼2002)

IE5


Internet Explorer 5

5

Webページ

IE5→IE5.5→IE6


Internet Explorer 6

Webページ

Quirks

6
HTML3.2以前専用の
レンダリングエンジン
(ドキュメントモード)

IE6→IE7


Internet Explorer 7

Webページ

Quirks

7

IE7→IE8


Internet Explorer 8

Webページ

Quirks

7
Standard


IE8→IE9


Internet Explorer 9

Webページ

Quirks

7
8
Standard


IE9→IE10



Webページ

5quirks
Quirks

7
8
9
Standard


Quirksモード

※ IE10ではIE5 quirksという

3.2以下のHTMLドキュメントに対して
IE5互換の動作を提供する機能
起動条件
・IE6∼10でDOCTYPE宣言が無い場合はQuirks
・IE6∼10でDOCTYPE宣言が3.2以下 or 4.01の一部はQuirks
・IE8∼11でX-UA-CompatibleがIE=IE5∼6はQuirks
・IE8∼11でF12開発者ツールのドキュメントモードでQuirks

あえてQuirksを指定することがある
IE7までは独自仕様色が強くバージョン依存。
IE7までは互換表示機能が無い。
IE6を含め1ソースで同一動作させる方法は？
Quirksモードがあるじゃないか！！

↑ Windows7が広がるまでの間横行していた。
だいたい2010年頃までのシステムに含まれるはず
↑ しかも設計書に書かれていない上テスト時にチェックして
いないことが多く、発注元が意識していない可能性がある

HTML4.01/XHTML1.0/HTML5
イントラネット内Webシステム
(2002∼)

IE6


Internet Explorer 6

6

Webページ

IE6→IE7


Internet Explorer 9

Quirks

7

Webページ

IE7→IE8


Internet Explorer 9

Webページ

Quirks

7
Standard

[互換表示]

IE独自実装を多く含む
HTMLドキュメント専用

IE8→IE9


Internet Explorer 9

Webページ

Quirks

7
8
Standard

[互換表示]


IE9→IE10



Webページ

Quirks

7
5quirks

8
9
Standard

[互換表示]


イントラネット互換表示
イントラネットゾーン上のWebシステムへ
IE7の動作を提供する機能
IE8+

→ IT管理者は、大抵これを有効化する！！

業務システムに対する
ドキュメントモードの状態

各IE上でのドキュメントモード状況
5
5
6
7
8
9
10

6

7

8

9

10

5

5

Standard

6
7
8
9
10

6

7

8

9

10

5

6

7

Standard

5 Quirks

6

7
8
9
10

Quirks

Standard
Standard

8

9

10

5

6

7

Standard

5 Quirks

6

7
8
9
10

8

9

10

Standard

Quirks
Quirks
Quirks
IE5 quirks

Standard
Standard
Standard
Standard

イントラネット互換表示の利用で
IE8以上へ進めない

5

6

7

Standard

5 Quirks

6

Standard

独自実装
Standard
7
主義時代
Quirks
Standard
8
Quirks
ActiveXなど
Standard
9

10

Quirks

Quirks

Standard

8

9

10

標準準拠
主義時代
HTML5など
イントラネット互換表示の利用で
IE8以上へ進めない

イントラネット上の企業システムは
技術者が移行したのではなく
保守的なIEによって守られていただけだった

私たちは一体、何を移行したのでしょう！？

実は企業システムのIE移行
まだ終わってませんでした！

互換表示 ✕ Quirksモード
開発者とIT管理者による
2段構えのレガシーIEジェイル構造

つまりIEが日本を救った！！

互換表示 ✕ Quirksモード

これで万事解決！

本当の悪夢はここから始まる

IE11が1ヶ月前にリリースされました
http://blogs.msdn.com/b/ie/archive/2013/11/07/ie11-for-windows-7-globallyavailable-for-consumers-and-businesses.aspx

5

6

7

Standard

5 Quirks

6

7
8
9
10

Quirks
Quirks
Quirks
Quirks

8

9

Standard
Standard
Standard
Standard
Standard

互換表示機能

10

5

6

7

Standard

5 Quirks

6

7
8
9
10
11

Quirks
Quirks
Quirks
Quirks

Standard
Standard
Standard
Standard
Standard

8

9

10

11

！？
互換表示機能

IE11からドキュメントモード

非推奨

になりました！

Quirksモード → 廃止

DOCTYPEスイッチ+X-UA-Compatibleという裏ワザあり。
参考: http://furoshiki.hatenadiary.jp/entry/2013/11/27/203728

互換表示 → 機能制限化
イントラネットはOKギリ動作。互換表示ボタンはアウト。
※次版以降から削除を仄めかしている

ドキュメントモード、
次版から完全消滅かも。

ドキュメントモードの非推奨(Internet Explorer)
http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx

ドキュメントモードの非推奨(Internet Explorer)

ざわ…

ざわ…

ざわ…

ざわ…

IE11 の互換性の変更点(MSDN)
http://msdn.microsoft.com/ja-jp/library/dn384049.aspx

IE11 の互換性の変更点(MSDN)
http://msdn.microsoft.com/ja-jp/library/dn384049.aspx

ざわ…
ざわ…

ざわ…
ざわ…

ざわ…
ざわ…

ざわ…

ざわ…

ざわ…

ざわ…

ざわ…
ざわ…

ざわ…

ざわ…

ざわ…

大切な、大切な、
レガシーIEシステムを
どうやって維持するのか？

ドキュメントモードの非推奨

ドキュメントモードの非推奨

・・・
要改修です

レガシー＆IE特化システムを
改修するために
残された時間はあと何年？

MicrosoftのN+1サポートから考えられる
IE10が利用できる最長期間
Windows8(IE10) → 8.1(IE11)
- 2023.1.10(約9年2ヶ月)

大抵の人はかなり後と…
後9年だと思っているが

✕ Windows8(IE10) → ⃝ Windows8.1(IE11)
- 2023.1.10(約9年2ヶ月)

※Win8.1はWin8のサービスパック扱い。(ライフライクルポリシー)
リリース後2年以内にアップデート必須。つまりIE11へ強制アップグレード

Win8は残り2年しか使えない
移行先はIE11+で確定です。

✕ Windows8(IE10) → ⃝ Windows8.1(IE11)
- 2023.1.10(約9年2ヶ月)

Windows7(IE8)
- 2020.1.14(約6年2ヶ月)
→ OS移行期間を1年とみなすと

正解：約5年

5年で今度こそ

レガシーIEシステムの完全移行を
完了させなくてはいけません！！

エンタープライズの世界の5年とは？

概算で開発1年＋運用5年の世界
なので・・・

現在開発中のものも全部
IE11想定で開発が必要です。

エンタープライズで
HTML5特需が発生！

これでも限界まで
引っ張った方です

IE11のドキュメントモードが悲鳴を上げる
EmulateIE5
Quirks

EmulateIE7 EmulateIE8 EmulateIE9 EmulateIE10
Quirks

Quirks

Quirks

Edge

5quirks
Quirks

Standard

7
Standard

7
8
Standard

どうしよう、DOCTYPEスイッチが

Quirks

7
8
9

7
8
9
10

Standard

いくら頑張っても動かないの！
参考 → http://furoshiki.hatenadiary.jp/entry/2013/11/25/014726

Edge

Microsoft的にはこうしたい

Edgeのみ！

Microsoftが守ろうとしているのは
バッドプラクティスでなく
テクノロジーの正しい進化です。

可搬できるデスクトップ

それがWin8です。

企業システムを守るだけでなく
世の中へ適合させようとしている

IEから見たWinOSの姿
Windows7 ＝デスクトップPC
IE8は標準準拠に力を入れたデスクトップ向けブラウザ

Windows8∼ ≒ デスクトップPC
Windows8∼ ≒ スマートデバイス
IE10∼はモバイル環境下での利用も想定したブラウザ

※RTとかそういうの、IEから見れば些細な問題です。

仕事をやり方を変えたくない人
＝今までどおりに活用
ITの力でより最適化を行いたい人
＝新しいプラットフォームとして活用

そんなOSになります。

10秒で理解する忙しい人のための

IE11対応のガイドライン
1. HTLM5標準で作る
2. マルチデバイスに配慮する
3. NWは遅いという前提で作る

互換性のガイドラインとベストプラクティス
http://msdn.microsoft.com/ja-jp/library/ie/gg130949(v=vs.85).aspx

Microsoftの公式ドキュメントが
あまりSI向けじゃないので・・・

SI環境に合わせてアレンジしてみました

私のブログですみません・・・。
今不眠でガイドライン作ってます

http://furoshiki.hatenadiary.jp/entry/guideline

<<Appendix>>
お客様説明時に使える
Microsoft公式ドキュメント集

お客様、Windows7のサポートはあと６年です！
http://www.microsoft.com/ja-jp/windows/lifecycle/default.aspx#vista

そして、次のOSはWindows8.1以上が確定です
http://support.microsoft.com/gp/msl-Windows-81/ja

Windows8.1の場合、IEのバージョンは11になります
http://windows.microsoft.com/ja-jp/windows-8/browse-web-internetexplorer-tutorial

IE11はドキュメントモードが非推奨になりました

→ Quirks/互換表示モードを使っていると要改修です。

Win8からデスクトップにもタブレットにもなります
http://windows.microsoft.com/ja-jp/windows-8/meet

IE10からは、動作がバージョン依存では無くなります
http://msdn.microsoft.com/ja-jp/library/ie/ff986088(v=vs.85).aspx

Web技術なら高いポータビリティで解決できます
http://msdn.microsoft.com/ja-jp/library/ie/hh920754(v=vs.85).aspx

→ つまり、HTML5最強です。ってあれ？

<<Appendix>>
フロントエンドを正しく
作りたい人へ

3行でわかる相互運用性

Compat Inspector
Fiddler
Modern.IE

発表時間が無いので、また今度！

HTML5使えるのか？じゃなく使わざる得なくなった

そんなお話でした。

Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告

Recommended

Recommended

More Related Content

Similar to Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告

Similar to Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告 (20)

Recently uploaded

Recently uploaded (9)

Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告