[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
SlideShare a Scribd company logo
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>
<!-- システム名 -->
<h1>日本を支えるシステム</h1>
</td>
<td>
<tr><frameset><frame=hoge.html></frameset>
スクロールバーが欲しいだけですよね・・・
<!DOCTYPE html>と書いてほしい・・・

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

DOCTYPE宣言の不在

思考の停止
<head><body><title>と書いてほしい・・・
<html>
<table>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td>
<!-- システム名 -->
<h1>日本を支えるシステム</h1>
</td>
<td>
<tr><frameset><frame=hoge.html></frameset>

思考の停止

作法無視のマークアップ
そして2014年4月・・・
とうとうWindowsXPの強引な延命が終了

IE6終了

SEがIE6に特化しWeb技術と向き合わない
失われた12年もここで終了
IE移行に戸惑う企業システム
ざわ…

ざわ…
ざわ…

ざわ…

ざわ…

日本の産業が窮地に立たされる!!
動いた!?

ビジネスが止まらずに済んだ
企業が、産業が、そして
国が守られた!!!!!
今回もなんとかなったし
これからもきっと大丈夫!!
The Department for Culture, Media and Sport

http://www.flickr.com/photos/49429730@N08/
適当でいいんだよ
ブラウザ側なんて!!!
めでたしめでたし!
この時、誰もが平和を
自分たちの手によって勝ち取ったと
思い込んでいた…
しかしこのストーリーには
知られざる秘話があったのです
どうやって移行したのか?
ドキュメントモード
古いIEの動作をエミュレートする機能
IEは過去のレンダリングエンジンを持っている
IE8向け
HTMLドキュメント

Internet Explorer 10

5
7
8
9

Webページ
HTML3.2以下のWebシステム
(∼2002)
IE5

HTMLドキュメント

Internet Explorer 5

5

Webページ
IE5→IE5.5→IE6

HTMLドキュメント

Internet Explorer 6

Webページ

Quirks

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

HTMLドキュメント

Internet Explorer 7

Webページ

Quirks

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

HTMLドキュメント

Internet Explorer 8

Webページ

Quirks

7
Standard
ドキュメントモード

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

HTMLドキュメント

Internet Explorer 9

Webページ

Quirks

7
8
Standard
ドキュメントモード

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

HTMLドキュメント

Internet Explorer 10

Webページ

5quirks
Quirks

7
8
9
Standard
ドキュメントモード

HTML3.2以前専用の
レンダリングエンジン
(ドキュメントモード)
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

HTMLドキュメント

Internet Explorer 6

6

Webページ
IE6→IE7

HTMLドキュメント

Internet Explorer 9

Quirks

7

Webページ
IE7→IE8

HTMLドキュメント

Internet Explorer 9

Webページ

Quirks

7
Standard
ドキュメントモード

[互換表示]

IE独自実装を多く含む
HTMLドキュメント専用
レンダリングエンジン
(ドキュメントモード)
IE8→IE9

HTMLドキュメント

Internet Explorer 9

Webページ

Quirks

7
8
Standard
ドキュメントモード

[互換表示]

IE独自実装を多く含む
HTMLドキュメント専用
レンダリングエンジン
(ドキュメントモード)
IE9→IE10

HTMLドキュメント

Internet Explorer 10

Webページ

Quirks

7
5quirks

8
9
Standard
ドキュメントモード

[互換表示]

IE独自実装を多く含む
HTMLドキュメント専用
レンダリングエンジン
(ドキュメントモード)
イントラネット互換表示
イントラネットゾーン上のWebシステムへ
IE7の動作を提供する機能
IE8+

→ IT管理者は、大抵これを有効化する!!
業務システムに対する
ドキュメントモードの状態
各IE上でのドキュメントモード状況
5
5
6
7
8
9
10

6

7

8

9

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

5

Standard

6
7
8
9
10

6

7

8

9

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

6

7

Standard

5 Quirks

6

7
8
9
10

Quirks

Standard
Standard

8

9

10
各IE上でのドキュメントモード状況
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以上へ進めない
各IE上でのドキュメントモード状況
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
各IE上でのドキュメントモード状況
5

6

7

Standard

5 Quirks

6

7
8
9
10

Quirks
Quirks
Quirks
Quirks

8

9

Standard
Standard
Standard
Standard
Standard

互換表示機能

10
各IE上でのドキュメントモード状況
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)
http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx

ざわ…

ざわ…

ざわ…

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

ざわ…
ざわ…

ざわ…
ざわ…

ざわ…
ざわ…

ざわ…

ざわ…

ざわ…

ざわ…

ざわ…
ざわ…

ざわ…

ざわ…

ざわ…
大切な、大切な、
レガシーIEシステムを
どうやって維持するのか?
ドキュメント モードの非推奨
http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx
ドキュメント モードの非推奨
http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx

・・・
要改修です
レガシー&IE特化システムを
改修するために
残された時間はあと何年?
MicrosoftのN+1サポートから考えられる
IE10が利用できる最長期間
Windows8(IE10) → 8.1(IE11)
- 2023.1.10(約9年2ヶ月)

大抵の人はかなり後と…
後9年だと思っているが
MicrosoftのN+1サポートから考えられる
IE10が利用できる最長期間
✕ Windows8(IE10) → ⃝ Windows8.1(IE11)
- 2023.1.10(約9年2ヶ月)

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

Win8は残り2年しか使えない
移行先はIE11+で確定です。
MicrosoftのN+1サポートから考えられる
IE10が利用できる最長期間
✕ 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想定で開発が必要です。
IE11=HTML5
エンタープライズで
HTML5特需が発生!
Microsoft酷くね?
これでも限界まで
引っ張った方です
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のサポートはあと6年です!
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はドキュメントモードが非推奨になりました
http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx

→ 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使えるのか?じゃなく使わざる得なくなった

そんなお話でした。
Thank You !
@kawada_hiroshi

More Related Content

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