internet...

Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど

次回はもう助けてくれないよという警告

@kawada_hiroshi2013.11.22

川田寛

html5j Enterprise　コミュニティ部長

業務システムのためのHTML5勉強会主催(計6回)

技術SE部NTTコムウェア株式会社

講演者紹介

人間中心設計推進機構正会員

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

強者はサーバサイドエンジニアHTMLとかどうでもいいし！

ブラウザなんて書けば動くIE6で動けばいい！！

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

思考の停止

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

思考の停止テーブルレイアウト

CSSでやってほしい・・・


非推奨タグの利用

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

思考の停止


DOCTYPE宣言の不在

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

思考の停止


作法無視のマークアップ

<head><body><title>と書いてほしい・・・

思考の停止

そして2014年4月・・・

とうとうWindowsXPの強引な延命が終了

IE6終了SEがIE6に特化しWeb技術と向き合わない

失われた12年もここで終了

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

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

ざわ…

ざわ…

ざわ…

ざわ…ざわ…

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

動いた！？

今回もなんとかなったしこれからもきっと大丈夫！！

http://www.flickr.com/photos/49429730@N08/The Department for Culture, Media and Sport

今回もなんとかなったしこれからもきっと大丈夫！！

http://www.flickr.com/photos/49429730@N08/

http://www.flickr.com/photos/49429730@N08/

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

ブラウザ側なんて！！！

めでたしめでたし！めでたしめでたし！

この時、誰もが平和を自分たちの手によって勝ち取ったと

思い込んでいた…

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

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

ドキュメントモード

古いIEの動作をエミュレートする機能IEは過去のレンダリングエンジンを持っている

5

Internet Explorer 10IE8向けHTMLドキュメント Webページ

8

7

9

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

5

Internet Explorer 5HTMLドキュメント Webページ

IE5

Quirks


IE5→IE5.5→IE6

6

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

Quirks


IE6→IE7


7

Quirks


IE7→IE8

Standard

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

7

Quirks


IE8→IE9


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

87

5quirks


IE9→IE10

8


7

9Standard


Quirks

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

※ IE10ではIE5 quirksという

あえてQuirksを指定することがある

IE7までは互換表示機能が無い。

Quirksモードがあるじゃないか！！

IE6を含め1ソースで同一動作させる方法は？

IE7までは独自仕様色が強くバージョン依存。

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

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

(2002～)

6


IE6

HTMLドキュメント Webページ

IE6→IE7

Internet Explorer 9

Quirks

7


IE7→IE8

Internet Explorer 9


[互換表示]IE独自実装を多く含むHTMLドキュメント専用レンダリングエンジン(ドキュメントモード)

Quirks

7

Standard


IE8→IE9

Internet Explorer 9



Quirks

87

Standard


IE9→IE10



Quirks

8

7

9Standard

5quirks

イントラネット互換表示

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

IE8+

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

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

6

89

7

10

55 6 7 8 9 10

各IE上でのドキュメントモード状況

6

89

7

10

55 6 7 8 9 10

Standard


6

89

7

10

55 6 7 8 9 10

Standard

QuirksStandard

QuirksStandard


6

89

7

10

55 6 7 8 9 10

Standard

QuirksStandard

QuirksStandard

QuirksStandard

QuirksStandard

IE5 quirksStandard

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


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

6

89

7

10

55 6 7 8 9 10

Standard

QuirksStandard

QuirksStandard

QuirksStandard

QuirksStandard

QuirksStandard


独自実装主義時代

標準準拠主義時代

ActiveXなど HTML5など

独自実装主義時代

標準準拠主義時代

ActiveXなど HTML5など

イントラネット上の企業システムは

技術者が移行したのではなく

保守的なIEによって守られていただけだった

イントラネット上の企業システムは

技術者が移行したのではなく

保守的なIEによって守られていただけだった

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

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

開発者とIT管理者による2段構えのレガシーIEジェイル構造

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

互換表示 ✕ Quirksモード

互換表示 ✕ Quirksモードこれで万事解決！

めでたしめでたし！めでたしめでたし！

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

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

available-for-consumers-and-businesses.aspx

http://blogs.msdn.com/b/ie/archive/2013/11/07/ie11-for-windows-7-globally-available-for-consumers-and-businesses.aspx




6

89

7

10

55 6 7 8 9 10

Standard

QuirksStandard

QuirksStandard

QuirksStandard

QuirksStandard

QuirksStandard

互換表示機能


6

89

7

10

55 6 7 8 9 10

11

11

！？Standard

QuirksStandard

QuirksStandard

QuirksStandard

QuirksStandard

QuirksStandard

互換表示機能


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

非推奨になりました！

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

非推奨になりました！

Quirksモード → 廃止

互換表示 → 機能制限化※次版以降から削除を仄めかしている

DOCTYPEスイッチ+X-UA-Compatibleという裏ワザあり。

イントラネットはOKギリ動作。互換表示ボタンはアウト。

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

http://furoshiki.hatenadiary.jp/entry/2013/11/27/203728参考:

http://furoshiki.hatenadiary.jp/entry/2013/11/27/203728


http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx

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




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

ざわ…

ざわ…

ざわ…

ざわ…



http://msdn.microsoft.com/ja-jp/library/dn384049.aspx

IE11 の互換性の変更点(MSDN)




IE11 の互換性の変更点(MSDN)

ざわ…

ざわ…ざわ…

ざわ…

ざわ…

ざわ…

ざわ…

ざわ…

ざわ…ざわ…

ざわ…

ざわ…

ざわ…

ざわ…

ざわ…



大切な、大切な、

レガシーIEシステムを

どうやって維持するのか？


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




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

要改修です・・・



レガシー＆IE特化システムを改修するために

残された時間はあと何年？

MicrosoftのN+1サポートから考えられるIE10が利用できる最長期間

Windows8(IE10) → 8.1(IE11)

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

- 2023.1.10(約9年2ヶ月)

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

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


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

Windows7(IE8)- 2020.1.14(約6年2ヶ月)

正解：約5年→ OS移行期間を1年とみなすと


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

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

5年で今度こそ

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

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

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

なので・・・

IE11=HTML5

エンタープライズで

HTML5特需が発生！

Microsoft酷くね？

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

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

Quirks

87

どうしよう、DOCTYPEスイッチがいくら頑張っても動かないの！

Quirks

EmulateIE5 EmulateIE7 EmulateIE8 EmulateIE9 EmulateIE10 Edge

Quirks Quirks Quirks 5quirks

Quirks

777Standard

Standard 8 89 9Standard

Standard 10Edge

http://furoshiki.hatenadiary.jp/entry/2013/11/25/014726参考 →



Microsoft的にはこうしたい

Edgeのみ！

Microsoftが守ろうとしているのはバッドプラクティスでなく

テクノロジーの正しい進化です。

可搬できるデスクトップ

それがWin8です。

企業システムを守るだけでなく

世の中へ適合させようとしている

Windows7 ＝デスクトップPC

Windows8～ ≒ デスクトップPCWindows8～ ≒ スマートデバイス

IEから見たWinOSの姿

IE8は標準準拠に力を入れたデスクトップ向けブラウザ

IE10～はモバイル環境下での利用も想定したブラウザ

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

仕事をやり方を変えたくない人

そんなOSになります。

ITの力でより最適化を行いたい人＝新しいプラットフォームとして活用

＝今までどおりに活用

IE11対応のガイドライン10秒で理解する忙しい人のための

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

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



書籍化の予定 → 未定書籍化の予定 → 未定

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

<<Appendix>>

お客様、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-internet-explorer-tutorial

IE11はドキュメントモードが非推奨になりましたhttp://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx

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

http://www.microsoft.com/ja-jp/windows/lifecycle/default.aspx#vista

http://www.microsoft.com/ja-jp/windows/lifecycle/default.aspx#vista

http://support.microsoft.com/gp/msl-Windows-81/ja

http://support.microsoft.com/gp/msl-Windows-81/ja

http://windows.microsoft.com/ja-jp/windows-8/browse-web-internet-explorer-tutorial






IE10からは、動作がバージョン依存では無くなります

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

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

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

http://msdn.microsoft.com/ja-jp/library/ie/ff986088(v=vs.85).aspx

http://msdn.microsoft.com/ja-jp/library/ie/hh920754(v=vs.85).aspx

http://msdn.microsoft.com/ja-jp/library/ie/hh920754(v=vs.85).aspx

http://windows.microsoft.com/ja-jp/windows-8/meet

http://windows.microsoft.com/ja-jp/windows-8/meet



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

<<Appendix>>

3行でわかる相互運用性

Compat Inspector

Fiddler

Modern.IE

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

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

そんなお話でした。

Thank You !

@kawada_hiroshi

internet...

Technology