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

204,490 views
211,923 views

Published on

ドキュメントモード、もうだめみたい。
http://furoshiki.hatenadiary.jp/entry/2013/11/26/032352

Published in: Technology
5 Comments
248 Likes
Statistics
Notes
No Downloads
Views
Total views
204,490
On SlideShare
0
From Embeds
0
Number of Embeds
131,302
Actions
Shares
0
Downloads
241
Comments
5
Likes
248
Embeds 0
No embeds

No notes for slide

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

  1. 1. Internet ExplorerはIE特化アプリから 一時的に日本を救ってくれたけど 次回はもう助けてくれないよという警告 @kawada_hiroshi 2013.11.22
  2. 2. 講演者紹介 NTTコムウェア株式会社 技術SE部 川田 寛 html5j Enterprise  コミュニティ部長 業務システムのための HTML5勉強会 主催(計6回) 人間中心設計推進機構 正会員
  3. 3. IE6が優秀過ぎて Perl, PHP, ASP, Java  企業システムの Web化が加速した
  4. 4. 強者はサーバサイドエンジニア HTMLとかどうでもいいし! ブラウザなんて書けば動く IE6で動けばいい!!
  5. 5. IE6での動作が前提な マークアップの嵐 あやしいコード・・・ 思考の停止
  6. 6. 思考の停止 テーブルレイアウト <html> <table> <tr> CSSでやってほしい・・・ <td> <table> <tr> <td> <table> <tr> <td> <!-- システム名 --> <h1>日本を支えるシステム</h1> </td> <td> <tr><frameset><frame=hoge.html></frameset>
  7. 7. 非推奨タグの利用 思考の停止 <html> <table> <tr> <td> <table> <tr> <td> <table> <tr> <td> <!-- システム名 --> <h1>日本を支えるシステム</h1> </td> <td> <tr><frameset><frame=hoge.html></frameset> スクロールバーが欲しいだけですよね・・・
  8. 8. <!DOCTYPE html>と書いてほしい・・・ <html> <table> <tr> <td> <table> <tr> <td> <table> <tr> <td> <!-- システム名 --> <h1>日本を支えるシステム</h1> </td> <td> <tr><frameset><frame=hoge.html></frameset> DOCTYPE宣言の不在 思考の停止
  9. 9. <head><body><title>と書いてほしい・・・ <html> <table> <tr> <td> <table> <tr> <td> <table> <tr> <td> <!-- システム名 --> <h1>日本を支えるシステム</h1> </td> <td> <tr><frameset><frame=hoge.html></frameset> 思考の停止 作法無視のマークアップ
  10. 10. そして2014年4月・・・ とうとうWindowsXPの強引な延命が終了 IE6終了 SEがIE6に特化しWeb技術と向き合わない 失われた12年もここで終了
  11. 11. IE移行に戸惑う企業システム ざわ… ざわ… ざわ… ざわ… ざわ… 日本の産業が窮地に立たされる!!
  12. 12. 動いた!? ビジネスが止まらずに済んだ 企業が、産業が、そして 国が守られた!!!!!
  13. 13. 今回もなんとかなったし これからもきっと大丈夫!! The Department for Culture, Media and Sport http://www.flickr.com/photos/49429730@N08/
  14. 14. 適当でいいんだよ ブラウザ側なんて!!!
  15. 15. めでたしめでたし!
  16. 16. この時、誰もが平和を 自分たちの手によって勝ち取ったと 思い込んでいた…
  17. 17. しかしこのストーリーには 知られざる秘話があったのです
  18. 18. どうやって移行したのか?
  19. 19. ドキュメントモード 古いIEの動作をエミュレートする機能 IEは過去のレンダリングエンジンを持っている IE8向け HTMLドキュメント Internet Explorer 10 5 7 8 9 Webページ
  20. 20. HTML3.2以下のWebシステム (∼2002)
  21. 21. IE5 HTMLドキュメント Internet Explorer 5 5 Webページ
  22. 22. IE5→IE5.5→IE6 HTMLドキュメント Internet Explorer 6 Webページ Quirks 6 HTML3.2以前専用の レンダリングエンジン (ドキュメントモード)
  23. 23. IE6→IE7 HTMLドキュメント Internet Explorer 7 Webページ Quirks 7 HTML3.2以前専用の レンダリングエンジン (ドキュメントモード)
  24. 24. IE7→IE8 HTMLドキュメント Internet Explorer 8 Webページ Quirks 7 Standard ドキュメントモード HTML3.2以前専用の レンダリングエンジン (ドキュメントモード)
  25. 25. IE8→IE9 HTMLドキュメント Internet Explorer 9 Webページ Quirks 7 8 Standard ドキュメントモード HTML3.2以前専用の レンダリングエンジン (ドキュメントモード)
  26. 26. IE9→IE10 HTMLドキュメント Internet Explorer 10 Webページ 5quirks Quirks 7 8 9 Standard ドキュメントモード HTML3.2以前専用の レンダリングエンジン (ドキュメントモード)
  27. 27. 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
  28. 28. あえてQuirksを指定することがある IE7までは独自仕様色が強くバージョン依存。 IE7までは互換表示機能が無い。 IE6を含め1ソースで同一動作させる方法は? Quirksモードがあるじゃないか!! ↑ Windows7が広がるまでの間横行していた。  だいたい2010年頃までのシステムに含まれるはず ↑ しかも設計書に書かれていない上テスト時にチェックして  いないことが多く、発注元が意識していない可能性がある
  29. 29. HTML4.01/XHTML1.0/HTML5 イントラネット内Webシステム (2002∼)
  30. 30. IE6 HTMLドキュメント Internet Explorer 6 6 Webページ
  31. 31. IE6→IE7 HTMLドキュメント Internet Explorer 9 Quirks 7 Webページ
  32. 32. IE7→IE8 HTMLドキュメント Internet Explorer 9 Webページ Quirks 7 Standard ドキュメントモード [互換表示] IE独自実装を多く含む HTMLドキュメント専用 レンダリングエンジン (ドキュメントモード)
  33. 33. IE8→IE9 HTMLドキュメント Internet Explorer 9 Webページ Quirks 7 8 Standard ドキュメントモード [互換表示] IE独自実装を多く含む HTMLドキュメント専用 レンダリングエンジン (ドキュメントモード)
  34. 34. IE9→IE10 HTMLドキュメント Internet Explorer 10 Webページ Quirks 7 5quirks 8 9 Standard ドキュメントモード [互換表示] IE独自実装を多く含む HTMLドキュメント専用 レンダリングエンジン (ドキュメントモード)
  35. 35. イントラネット互換表示 イントラネットゾーン上のWebシステムへ IE7の動作を提供する機能 IE8+ → IT管理者は、大抵これを有効化する!!
  36. 36. 業務システムに対する ドキュメントモードの状態
  37. 37. 各IE上でのドキュメントモード状況 5 5 6 7 8 9 10 6 7 8 9 10
  38. 38. 各IE上でのドキュメントモード状況 5 5 Standard 6 7 8 9 10 6 7 8 9 10
  39. 39. 各IE上でのドキュメントモード状況 5 6 7 Standard 5 Quirks 6 7 8 9 10 Quirks Standard Standard 8 9 10
  40. 40. 各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以上へ進めない
  41. 41. 各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以上へ進めない
  42. 42. イントラネット上の企業システムは 技術者が移行したのではなく 保守的なIEによって守られていただけだった
  43. 43. 私たちは一体、何を移行したのでしょう!? 実は企業システムのIE移行 まだ終わってませんでした!
  44. 44. 互換表示 ✕ Quirksモード 開発者とIT管理者による 2段構えのレガシーIEジェイル構造 つまりIEが日本を救った!!
  45. 45. 互換表示 ✕ Quirksモード これで万事解決!
  46. 46. めでたしめでたし!
  47. 47. 本当の悪夢はここから始まる
  48. 48. IE11が1ヶ月前にリリースされました http://blogs.msdn.com/b/ie/archive/2013/11/07/ie11-for-windows-7-globallyavailable-for-consumers-and-businesses.aspx
  49. 49. 各IE上でのドキュメントモード状況 5 6 7 Standard 5 Quirks 6 7 8 9 10 Quirks Quirks Quirks Quirks 8 9 Standard Standard Standard Standard Standard 互換表示機能 10
  50. 50. 各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 !? 互換表示機能
  51. 51. IE11からドキュメントモード 非推奨 になりました!
  52. 52. Quirksモード → 廃止 DOCTYPEスイッチ+X-UA-Compatibleという裏ワザあり。 参考: http://furoshiki.hatenadiary.jp/entry/2013/11/27/203728 互換表示 → 機能制限化 イントラネットはOKギリ動作。互換表示ボタンはアウト。 ※次版以降から削除を仄めかしている ドキュメントモード、 次版から完全消滅かも。
  53. 53. ドキュメント モードの非推奨(Internet Explorer) http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx
  54. 54. ドキュメント モードの非推奨(Internet Explorer) http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx ざわ… ざわ… ざわ… ざわ…
  55. 55. IE11 の互換性の変更点(MSDN) http://msdn.microsoft.com/ja-jp/library/dn384049.aspx
  56. 56. IE11 の互換性の変更点(MSDN) http://msdn.microsoft.com/ja-jp/library/dn384049.aspx ざわ… ざわ… ざわ… ざわ… ざわ… ざわ… ざわ… ざわ… ざわ… ざわ… ざわ… ざわ… ざわ… ざわ… ざわ…
  57. 57. 大切な、大切な、 レガシーIEシステムを どうやって維持するのか?
  58. 58. ドキュメント モードの非推奨 http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx
  59. 59. ドキュメント モードの非推奨 http://msdn.microsoft.com/ja-jp/library/ie/dn384051(v=vs.85).aspx ・・・ 要改修です
  60. 60. レガシー&IE特化システムを 改修するために 残された時間はあと何年?
  61. 61. MicrosoftのN+1サポートから考えられる IE10が利用できる最長期間 Windows8(IE10) → 8.1(IE11) - 2023.1.10(約9年2ヶ月) 大抵の人はかなり後と… 後9年だと思っているが
  62. 62. MicrosoftのN+1サポートから考えられる IE10が利用できる最長期間 ✕ Windows8(IE10) → ⃝ Windows8.1(IE11) - 2023.1.10(約9年2ヶ月) ※Win8.1はWin8のサービスパック扱い。(ライフライクルポリシー)  リリース後2年以内にアップデート必須。つまりIE11へ強制アップグレード Win8は残り2年しか使えない 移行先はIE11+で確定です。
  63. 63. MicrosoftのN+1サポートから考えられる IE10が利用できる最長期間 ✕ Windows8(IE10) → ⃝ Windows8.1(IE11) - 2023.1.10(約9年2ヶ月) Windows7(IE8) - 2020.1.14(約6年2ヶ月) → OS移行期間を1年とみなすと 正解:約5年
  64. 64. 5年で今度こそ レガシーIEシステムの完全移行を 完了させなくてはいけません!!
  65. 65. エンタープライズの世界の5年とは? 概算で開発1年+運用5年の世界 なので・・・ 現在開発中のものも全部 IE11想定で開発が必要です。
  66. 66. IE11=HTML5
  67. 67. エンタープライズで HTML5特需が発生!
  68. 68. Microsoft酷くね?
  69. 69. これでも限界まで 引っ張った方です
  70. 70. 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
  71. 71. Microsoft的にはこうしたい Edgeのみ!
  72. 72. Microsoftが守ろうとしているのは バッドプラクティスでなく テクノロジーの正しい進化です。
  73. 73. 可搬できるデスクトップ それがWin8です。
  74. 74. 企業システムを守るだけでなく 世の中へ適合させようとしている
  75. 75. IEから見たWinOSの姿 Windows7 = デスクトップPC IE8は標準準拠に力を入れたデスクトップ向けブラウザ Windows8∼ ≒ デスクトップPC Windows8∼ ≒ スマートデバイス IE10∼はモバイル環境下での利用も想定したブラウザ ※RTとかそういうの、IEから見れば些細な問題です。
  76. 76. 仕事をやり方を変えたくない人 =今までどおりに活用 ITの力でより最適化を行いたい人 =新しいプラットフォームとして活用 そんなOSになります。
  77. 77. 10秒で理解する忙しい人のための IE11対応のガイドライン 1. HTLM5標準で作る 2. マルチデバイスに配慮する 3. NWは遅いという前提で作る
  78. 78. 互換性のガイドラインとベスト プラクティス http://msdn.microsoft.com/ja-jp/library/ie/gg130949(v=vs.85).aspx
  79. 79. Microsoftの公式ドキュメントが あまりSI向けじゃないので・・・ SI環境に合わせてアレンジしてみました
  80. 80. 私のブログですみません・・・。 今不眠でガイドライン作ってます http://furoshiki.hatenadiary.jp/entry/guideline
  81. 81. 書籍化の予定 → 未定
  82. 82. <<Appendix>> お客様説明時に使える Microsoft公式ドキュメント集
  83. 83. お客様、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/互換表示モードを使っていると要改修です。
  84. 84. 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最強です。ってあれ?
  85. 85. <<Appendix>> フロントエンドを正しく 作りたい人へ
  86. 86. 3行でわかる相互運用性 Compat Inspector Fiddler Modern.IE 発表時間が無いので、また今度!
  87. 87. HTML5使えるのか?じゃなく使わざる得なくなった そんなお話でした。
  88. 88. Thank You ! @kawada_hiroshi

×