internet...
Post on 24-May-2015
160.573 Views
Preview:
DESCRIPTION
TRANSCRIPT
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でやってほしい・・・
<html> <table> <tr> <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宣言の不在
<!DOCTYPE html>と書いてほしい・・・
思考の停止
<html> <table> <tr> <td> <table> <tr> <td> <table> <tr> <td> <!-- システム名 --> <h1>日本を支えるシステム</h1> </td> <td> <tr><frameset><frame=hoge.html></frameset>
作法無視のマークアップ
<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
今回もなんとかなったしこれからもきっと大丈夫！！
適当でいいんだよブラウザ側なんて！！！適当でいいんだよ
ブラウザ側なんて！！！
めでたしめでたし！めでたしめでたし！
この時、誰もが平和を自分たちの手によって勝ち取ったと
思い込んでいた…
しかしこのストーリーには知られざる秘話があったのです
どうやって移行したのか？
ドキュメントモード
古いIEの動作をエミュレートする機能IEは過去のレンダリングエンジンを持っている
5
Internet Explorer 10IE8向けHTMLドキュメント Webページ
8
7
9
HTML3.2以下のWebシステム(～2002)
5
Internet Explorer 5HTMLドキュメント Webページ
IE5
Quirks
Internet Explorer 6HTMLドキュメント Webページ
IE5→IE5.5→IE6
6
HTML3.2以前専用のレンダリングエンジン(ドキュメントモード)
Quirks
Internet Explorer 7HTMLドキュメント Webページ
IE6→IE7
HTML3.2以前専用のレンダリングエンジン(ドキュメントモード)
7
Quirks
Internet Explorer 8HTMLドキュメント Webページ
IE7→IE8
Standard
ドキュメントモードHTML3.2以前専用のレンダリングエンジン(ドキュメントモード)
7
Quirks
Internet Explorer 9HTMLドキュメント Webページ
IE8→IE9
ドキュメントモード
StandardHTML3.2以前専用のレンダリングエンジン(ドキュメントモード)
87
5quirks
Internet Explorer 10HTMLドキュメント Webページ
IE9→IE10
8
ドキュメントモード
7
9Standard
HTML3.2以前専用のレンダリングエンジン(ドキュメントモード)
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
Internet Explorer 6HTMLドキュメント Webページ
IE6
HTMLドキュメント Webページ
IE6→IE7
Internet Explorer 9
Quirks
7
HTMLドキュメント Webページ
IE7→IE8
Internet Explorer 9
ドキュメントモード
[互換表示]IE独自実装を多く含むHTMLドキュメント専用レンダリングエンジン(ドキュメントモード)
Quirks
7
Standard
HTMLドキュメント Webページ
IE8→IE9
Internet Explorer 9
ドキュメントモード
[互換表示]IE独自実装を多く含むHTMLドキュメント専用レンダリングエンジン(ドキュメントモード)
Quirks
87
Standard
Internet Explorer 10HTMLドキュメント Webページ
IE9→IE10
ドキュメントモード
[互換表示]IE独自実装を多く含むHTMLドキュメント専用レンダリングエンジン(ドキュメントモード)
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
各IE上でのドキュメントモード状況
6
89
7
10
55 6 7 8 9 10
Standard
QuirksStandard
QuirksStandard
各IE上でのドキュメントモード状況
6
89
7
10
55 6 7 8 9 10
Standard
QuirksStandard
QuirksStandard
QuirksStandard
QuirksStandard
IE5 quirksStandard
イントラネット互換表示の利用でIE8以上へ進めない
各IE上でのドキュメントモード状況
イントラネット互換表示の利用でIE8以上へ進めない
6
89
7
10
55 6 7 8 9 10
Standard
QuirksStandard
QuirksStandard
QuirksStandard
QuirksStandard
QuirksStandard
各IE上でのドキュメントモード状況
独自実装主義時代
標準準拠主義時代
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
6
89
7
10
55 6 7 8 9 10
Standard
QuirksStandard
QuirksStandard
QuirksStandard
QuirksStandard
QuirksStandard
互換表示機能
各IE上でのドキュメントモード状況
6
89
7
10
55 6 7 8 9 10
11
11
！？Standard
QuirksStandard
QuirksStandard
QuirksStandard
QuirksStandard
QuirksStandard
互換表示機能
各IE上でのドキュメントモード状況
IE11からドキュメントモード
非推奨になりました！
IE11からドキュメントモード
非推奨になりました！
Quirksモード → 廃止
互換表示 → 機能制限化※次版以降から削除を仄めかしている
DOCTYPEスイッチ+X-UA-Compatibleという裏ワザあり。
イントラネットはOKギリ動作。互換表示ボタンはアウト。
ドキュメントモード、次版から完全消滅かも。
http://furoshiki.hatenadiary.jp/entry/2013/11/27/203728参考:
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
ドキュメント モードの非推奨(Internet Explorer)
ざわ…
ざわ…
ざわ…
ざわ…
http://msdn.microsoft.com/ja-jp/library/dn384049.aspx
IE11 の互換性の変更点(MSDN)
http://msdn.microsoft.com/ja-jp/library/dn384049.aspx
IE11 の互換性の変更点(MSDN)
ざわ…
ざわ…ざわ…
ざわ…
ざわ…
ざわ…
ざわ…
ざわ…
ざわ…ざわ…
ざわ…
ざわ…
ざわ…
ざわ…
ざわ…
大切な、大切な、
レガシー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)
大抵の人はかなり後と…後9年だと思っているが
- 2023.1.10(約9年2ヶ月)
✕ Windows8(IE10) → ◯ Windows8.1(IE11) - 2023.1.10(約9年2ヶ月)
※Win8.1はWin8のサービスパック扱い。(ライフライクルポリシー) リリース後2年以内にアップデート必須。つまりIE11へ強制アップグレード
MicrosoftのN+1サポートから考えられるIE10が利用できる最長期間
Win8は残り2年しか使えない移行先はIE11+で確定です。
Windows7(IE8)- 2020.1.14(約6年2ヶ月)
正解：約5年→ OS移行期間を1年とみなすと
MicrosoftのN+1サポートから考えられるIE10が利用できる最長期間
- 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/互換表示モードを使っていると要改修です。
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
フロントエンドを正しく作りたい人へ
<<Appendix>>
3行でわかる相互運用性
Compat Inspector
Fiddler
Modern.IE
発表時間が無いので、また今度！
HTML5使えるのか？じゃなく使わざる得なくなった
そんなお話でした。
Thank You !
@kawada_hiroshi
top related