その web サイト、その web アプリを最新の ie11 に対応しよう

43
The Microsoft Conference 2014 ROOM C

Upload: osamu-monoe

Post on 02-Jul-2015

5.572 views

Category:

Technology


7 download

DESCRIPTION

Microsoft Conference 2014 でのセッションスライドです。 古い Internet Exolorer 向けに作られた Web コンテンツを Web 標準に準拠した Internet Explorer 11 用に移行する手順と方法について紹介します。

TRANSCRIPT

Page 1: その Web サイト、その Web アプリを最新の IE11 に対応しよう

The Microsoft Conference 2014

ROOM C

Page 2: その Web サイト、その Web アプリを最新の IE11 に対応しよう

Web Internet Explorer 11

Internet Explorer Web

Page 3: その Web サイト、その Web アプリを最新の IE11 に対応しよう
Page 4: その Web サイト、その Web アプリを最新の IE11 に対応しよう

The Microsoft Conference 2014

Page 5: その Web サイト、その Web アプリを最新の IE11 に対応しよう

企業のニーズ

Web~新旧アプリ対応をめぐるジレンマ~

既存資産との互換性 最新の Web 標準への対応

現行の Web アプリ 新規構築するWeb アプリ

Web 標準への対応パフォーマンスの向上セキュリティの強化

信頼性の向上

既存アプリの有効活用テスト費用の削減アップグレードに伴う作業の軽減

Page 6: その Web サイト、その Web アプリを最新の IE11 に対応しよう

Internet Explorer

~それまでの機能を強化し、できなかったことが可能に~

Web /HTML5

Page 7: その Web サイト、その Web アプリを最新の IE11 に対応しよう

Internet Explorer

2016 1 12 Windows OSInternet Explorer

Windows Internet Explorer 延長サポート終了

Windows Vista SP2Internet Explorer 9

2017年 4 月 11 日

Windows Server 2008 SP2

2020年 1 月 14 日Windows 7 SP1Internet Explorer 11

Windows Server 2008 R2 SP1

Windows 8.1 Internet Explorer 11

2023年 1 月 10 日Windows Server 2012 Internet Explorer 10

Windows Server 2012 R2 Internet Explorer 11

Page 8: その Web サイト、その Web アプリを最新の IE11 に対応しよう

The Microsoft Conference 2014

Page 9: その Web サイト、その Web アプリを最新の IE11 に対応しよう

Internet Explorer

Internet Explorer 7

Internet Explorer 8

Internet Explorer 9

Internet Explorer 10

Internet Explorer 11

Internet Explorer 6

Windows XP

Windows Vista Windows 7

Windows 8 Windows 8.1

Page 10: その Web サイト、その Web アプリを最新の IE11 に対応しよう

既存資産の情報収集

優先順位付け 計画と実施

業務担当者、利用者、開発者からの聞き取り

販売店、開発元に問い合わせ

• ビジネスインパクト

• 利用範囲

• 利用者数

1. 重要ではない

2. あると便利

3. 必要(クリティカルではない)

4. 重要

5. ミッションクリティカル

• 暫定的な対応• 後方互換機能

• 仮想化

• 中長期的な対応• 修正

• 新規開発

インベントリ優先順位づけ

プラン/

実行

Page 11: その Web サイト、その Web アプリを最新の IE11 に対応しよう

既存資産の情報収集

優先順位付け 計画と実施

業務担当者、利用者、開発者からの聞き取り

販売店、開発元に問い合わせ

• ビジネスインパクト

• 利用範囲

• 利用者数

1. 重要ではない

2. あると便利

3. 必要(クリティカルではない)

4. 重要

5. ミッションクリティカル

• 暫定的な対応• 後方互換機能

• 仮想化

• 中長期的な対応• 修正

• 新規開発

優先順位づけ

プラン/

実行

Page 12: その Web サイト、その Web アプリを最新の IE11 に対応しよう

既存資産の情報収集

優先順位付け 計画と実施

業務担当者、利用者、開発者からの聞き取り

販売店、開発元に問い合わせ

• ビジネスインパクト

• 利用範囲

• 利用者数

1. 重要ではない

2. あると便利

3. 必要(クリティカルではない)

4. 重要

5. ミッションクリティカル

• 暫定的な対応• 後方互換機能

• 仮想化

• 中長期的な対応• 修正

• 新規開発

プラン/

実行

Page 13: その Web サイト、その Web アプリを最新の IE11 に対応しよう

既存資産の情報収集

優先順位付け 計画と実施

業務担当者、利用者、開発者からの聞き取り

販売店、開発元に問い合わせ

• ビジネスインパクト

• 利用範囲

• 利用者数

1. 重要ではない

2. あると便利

3. 必要(クリティカルではない)

4. 重要

5. ミッションクリティカル

• 暫定的な対応• 後方互換機能

• 仮想化

• 中長期的な対応• 修正

• 新規開発

Page 14: その Web サイト、その Web アプリを最新の IE11 に対応しよう

実施決定

トリアージ

影響調査

切り分け

判断

トリアージ

影響の度合い (レベル)分け例)a. 実運用に支障(データが入力/視認できない等)

b. 入力/視認は可能であるものの意図しない動作が発生

c. わずかなレイアウトの崩れなど

Page 15: その Web サイト、その Web アプリを最新の IE11 に対応しよう

実施決定

トリアージ

影響調査

切り分け

判断

新しい IE に対応できるものできないものの切り分け

◆対応できない場合は理由を明らかに例)a. 予算/工数がかかりすぎる

b. 他社の作ったパッケージ

c. その他 (ActiveX、Java ランタイム、etc..)

Page 16: その Web サイト、その Web アプリを最新の IE11 に対応しよう

実施決定

トリアージ

影響調査

切り分け

判断 対応させるサイト/させないサイトを決定

Page 17: その Web サイト、その Web アプリを最新の IE11 に対応しよう

実施

決定

方法

優先順位

トリアージ

切り分け

判断

決定

マイグレーション方法の決定

◆ソースの編集が可能a. 新しい IE 向けに

Web サイトを修正b. IE の後方互換機能を使用

◆ソースの編集が不可a. 作り直しb. 仮想環境で旧い Windows

& 古い IEで運用c. 廃棄

影響調査

Page 18: その Web サイト、その Web アプリを最新の IE11 に対応しよう

実施

決定トリアージ

切り分け

判断

方法

優先順位

どの順序で作業をすすめるか

例)a. 必要性の高い

b. 影響が少ない

c. 複数の方法の組み合わせ

影響調査

Page 19: その Web サイト、その Web アプリを最新の IE11 に対応しよう

決定 実施トリアージ

切り分け

判断

方法

優先順位

アップデート

後方互換

仮想化

影響調査

Page 20: その Web サイト、その Web アプリを最新の IE11 に対応しよう

実施

アップデート

後方互換

仮想化

Compat Inspector

F12

Fiddler

modern.IE

最新 IE に対応

そのまま使用

Hyper-V

(VDI)

WindowsXP Mode, MED-V(Windows 7 )

そのまま使用

Page 21: その Web サイト、その Web アプリを最新の IE11 に対応しよう

The Microsoft Conference 2014

Internet Explorer

Web

Page 22: その Web サイト、その Web アプリを最新の IE11 に対応しよう

Internet Explorer

(※) Internet Explorer 11

Page 23: その Web サイト、その Web アプリを最新の IE11 に対応しよう

~以前のバージョンの描画ルールで表示~

Page 24: その Web サイト、その Web アプリを最新の IE11 に対応しよう
Page 25: その Web サイト、その Web アプリを最新の IE11 に対応しよう

設定値 IE8 IE9 IE10 IE11

EmulateIE10 〇

10 〇

EmulateIE9 〇 〇

9 〇 〇 〇

EmulateIE8 〇 〇 〇 〇

8 〇 〇 〇 〇

EmulateIE7 〇 〇 〇 〇

7 〇 〇 〇 〇

5 〇 〇 〇 〇

edge 〇 〇 〇 〇

Page 26: その Web サイト、その Web アプリを最新の IE11 に対応しよう

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” "http://www.w3.org/TR/html4/loose.dtd">

~Internet Explorer 6 ~

(Standard) • HTML 4.01 DOCTYPE

• HTML 4.0 「Strict」

(Quirks) • DOCTYPE

• HTML

Page 27: その Web サイト、その Web アプリを最新の IE11 に対応しよう

~ Internet Explorer 11 上で Internet Explorer 8 をエミュレート~

エンタープライズモード

Page 28: その Web サイト、その Web アプリを最新の IE11 に対応しよう

HKLM¥SOFTWARE¥Policies¥Microsoft¥Internet Explorer¥Main

¥EnterpriseMode

[ツール] メニューを有効化: “Enable” = “” または“{URL}{:ポート}”

XML サイトリストを有効化: “SiteList” = “{ファイルパスまたはURL}”

~使いやすいグループポリシーとレジストリキー~

• メニュー[ツール] – [エンタープライズモード] を選択

• エンタープライズモードの IE Web サイトリストを使用

Page 29: その Web サイト、その Web アプリを最新の IE11 に対応しよう

The Microsoft Conference 2014

DEMOInternet Explorer 11

Page 30: その Web サイト、その Web アプリを最新の IE11 に対応しよう

2016 年1 月 12 日

2020 年1 月 14 日

2023 年1 月 10 日

Windows Vista

Windows 7

Windows 8

Windows 8.1

2017 年4 月 11 日

InternetExplorer 7

Enterprise mode (IE8)

Enterprise mode (IE8)

InternetExplorer 8

Page 31: その Web サイト、その Web アプリを最新の IE11 に対応しよう

The Microsoft Conference 2014

Page 32: その Web サイト、その Web アプリを最新の IE11 に対応しよう

Page 33: その Web サイト、その Web アプリを最新の IE11 に対応しよう

Compat Inspector

<script src="http://ie.microsoft.com/TestDrive/HTML5/CompatInspector/inspector.js"></script>

Page 34: その Web サイト、その Web アプリを最新の IE11 に対応しよう

• Proxy HTTP

Page 35: その Web サイト、その Web アプリを最新の IE11 に対応しよう

Fiddler

•http://fiddler2.com/

Page 36: その Web サイト、その Web アプリを最新の IE11 に対応しよう

The Microsoft Conference 2014

DEMOCompat Inspector

Fiddler

Page 37: その Web サイト、その Web アプリを最新の IE11 に対応しよう

| modern.IE

http://modern.ie/

Page 38: その Web サイト、その Web アプリを最新の IE11 に対応しよう

| modern.IE

Page 39: その Web サイト、その Web アプリを最新の IE11 に対応しよう

The Microsoft Conference 2014

DEMO

Page 40: その Web サイト、その Web アプリを最新の IE11 に対応しよう

2013

UI

詳しくは Visual Studio ブースで!

Page 41: その Web サイト、その Web アプリを最新の IE11 に対応しよう

| modern.IE

• Compat Inspector

• Fiddler• F12

InternetExplorer

Page 42: その Web サイト、その Web アプリを最新の IE11 に対応しよう

monoe‘s blog

de:code 2014 セッションDE-016 資料

http://bit.ly/de-016

Page 43: その Web サイト、その Web アプリを最新の IE11 に対応しよう

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.