Internet Explorer 11 への移行移行のポイントと非互換事例 Internet Explorer 移行のガイダンス長期的には、Web アプリケーションをモダンな標準にアップグレードすることをお勧めします短期的には、既存 Web アプリヘの後方互換性はコスト効率に優れた手段になり得ます 2 本日セッションの内容検証に入る前に互換機能を知る現状を知る適切な設定を行う方針検討のポイント事例）互換性問題と差異互換性問題 IE8 と IE11 との差異検証時に利用可能な各種ツール 3 検証に入る前に 4 IE の移行でご相談をいただく場合によくある会話御社の PC の標準機の構成はどうなっていますでしょうか？会社の標準機は Win7 + IE8 が展開されています。では、御社の Web アプリケーションですが、どの IE 向けに開発されていますでしょうか？ IE8 ですね。 (さっき、標準機が Win7 + IE8 って言ってるのに…) 検証に入る前の準備事前準備なしで OS や IE のデフォルト設定のままで検証を開始すると… 多くのレイアウト崩れスクリプトエラー動作検証の実施改修対象としてそのまま登録莫大なシステム改修事前に準備をした上で検証を開始すると… 互換機能を知る現在の状態を知る動作検証の実施適切な設定レイアウト崩れスクリプトエラー互換機能でエラーを回避最小限のシステム改修 IE の差異を理解業務への影響を判断 6 方針検討のポイント 7 互換機能を知る従来の動作とは異なる Internet Explorer 11 の２大非互換ポイントドキュメントモードの追加と判定ロジックの変更 • 特にドキュメントモードの指定が無かった場合、IE11標準モードになる • IE5 Quirks と HTML5 Quirks • 旧バージョンの IE とは異なるモードになり、レイアウト崩れやスクリプトエラーが発生 User-Agent の変更 • サーバーへ送信するブラウザーの種類、バージョンを表す文字列の変更 • サーバー側で「 IE かどうか」を判定している場合、「 IE では無い」と判定されるため動作が変わる互換機能を知る 8 IE11のドキュメントモード判定の違い原因：ドキュメントモードの判定 IEはバージョンを重ねるごとにそのバージョンに対応したドキュメントモードを搭載特に指定の無い場合、新しいバージョンのドキュメントモードを使用 IE11 と IE8 とで使用するドキュメントモードが異なる IE11 事象：ドキュメントモードが異なる際に発生する事象レイアウト崩れボタンが押せない、画面が進まない HTML5 Quirks モード互換機能を知る DTD 判定のみの定義で遷移するモード DTD 判定のみの定義で遷移するモード IE10標準モード対応策：ドキュメントモードの指定 HTML META タグ HTTP Response ヘッダー互換表示設定エンタープライズモード IE11標準モード IE8 IE9 標準モード IE8 標準モード IE8 標準モード IE7 標準モード IE7 標準モード IE5 Quirks モード IE5 Quirks モード 9 IE11のドキュメントモード判定の違い対応策 IE設定（ユーザー、管理者）エンタープライズモードサイトリストメニューから有効化アプリ設定（開発者） HTTP Response ヘッダー追加 Web サーバーへの設定設定例： X-UA-Compatible : IE=EmulateIE8 ※メニューに表示させるためにレジストリ設定が必要互換表示設定設定画面から追加ドメイン単位指定またはイントラネットサイト互換機能を知る HTML METAタグ HTMLファイルへの設定設定例： <meta http-equiv=“X-UA-Compatible” content="IE=EmulateIE8"> 10 ドキュメントモード判定・User-Agentの変更－概要－クライアント Web Server リクエスト HTTP Request User-Agent ブラウザーの種類・バージョン情報の提供ドキュメントモードの決定レスポンス Header HTML etc 業務ロジック HTTP Response サーバーの処理結果でドキュメントモード指定が可能（ヘッダー or HTML） “MSIE”が含まれていたら・・・のような処理レンダリング／スクリプト処理 JavaScriptで、“MSIE”が含まれていたら・・・のような処理互換機能を知る 11 現状を知る現行のIE設定確認 IE8 互換表示設定インターネットオプションセキュリティオプションセキュリティゾーン設定詳細設定互換表示設定移行対象のアプリケーション規模認識したセキュリティゾーンドキュメントモードパッケージ（アドイン含む）の使用有無現状を知る 12 適切な設定 IE11 のインストールインターネットオプションの一部は IE11 の既定値になるため、IE8 へ合わせるグループポリシー IEメンテナンスポリシーは、IE10 以降で廃止別の方法を検討要グループポリシー管理用テンプレートグループポリシー基本設定インターネット設定ショートカットレジストリドキュメントモード互換機能を利用し、ドキュメントモードを合わせる現状を知る 13 互換表示設定の利用互換表示設定の利用 IE8で互換表示設定を利用している場合は、引き続きIE11でも互換表示設定を利用エンタープライズモードとの併用も可能 IE8の互換表示設定と同等の動作検討事項既定ではプロキシを経由しないサーバーは互換表示設定となるため、意図せず利用しているケースがあるドメイン指定は細かくできない適切な設定 14 その他の設定に関連する検討事項ゾーンの検討ローカルイントラネットの利用ナチュラルメトリックが無効になる（IE8と同等）既定で互換表示設定が有効になるプロキシが設定されている環境でプロキシを経由しない場合ローカルイントラネットとなる CSS Expression 信頼済みサイト、ローカルイントラネットゾーンで有効複数のゾーンに合致した場合より具体的な条件に合致した方が優先例1）信頼済み= *.contoso.com / ローカル= www.contoso.com の場合、ローカル例2）信頼済み= *.contoso.com / プロキシを経由しない接続の場合、信頼済み Windows 10 のIE (予定) 以下のいずれかのみでX-UA-Compatible が有効となるローカルイントラネット互換表示設定エンタープライズモードパッケージ製品パッケージ製品は開発元の意向に従う適切な設定 15 エンタープライズモードの利用エンタープライズモードを利用すべきかどうかエンタープライズモードの運用面の特徴を理解して判断運社外などドメインの外のユーザーの利用が困難用エンタープライズモードの設定は、グループポリシーまたはレジス面トリ設定であるため、その管理外の利用者に使ってもらうのは困難でのサイトリストは１つのみ注全社のWebアプリケーションを一つのサイトリストで管理できるかどうか意 IE9以降のドキュメントモードを指定できないポ METAタグ等で、IE9以降のドキュメントモードを指定しても、エンイタープライズモードがONでは無視されるため、ン新しいWebアプリケーションで、IE11標準モード等を使用する場合トには、エンタープライズモードをOFFにする必要がある適切な設定 16 事例）互換性問題と差異 17 事例１プロファイル Windows 7 32-bit & IE8 から、Windows 7 32-bit & IE11 への移行 200以上のWebアプリケーションパッケージは個別対応社外者が使用するアプリケーションが存在予算規模を把握するため、部分抽出したアプリケーションを簡易検証検証期間は約１か月検証方針社内向けアプリケーションは、エンタープライズモードを利用社外向けアプリケーションは、一旦、エンタープライズモードを使わずに検証互換性問題が発生した際に、他の互換機能が利用可能かを調査 IE8で互換表示設定を使用しているアプリケーションは、IE11でも引き続き互換表示設定を利用発生した問題 200件近くの問い合わせ、問題が発生事例２プロファイル Windows 7 32-bit & IE8 から、Windows 7 32-bit & IE11 への移行 10以上の社内向けWebアプリケーションすべて信頼済みサイトで運用パッケージは対象外予算規模を把握するため、部分抽出したアプリケーションを簡易検証検証期間は約２か月検証方針エンタープライズモードを利用ローカルイントラネットゾーンで検証ナチュラルメトリックを無効化するため発生した問題 50件近くの問い合わせ、問題が発生検証で発生した互換性問題と差異互換性問題 • アドインが実行できない • ナチュラルメトリックの仕様変更によるレイアウト崩れ • フォントの種類の相違 • ハイパーリンクのリンク先URLのポップアップ IE8とIE11との差異 • ユーザーインターフェースの相違 • コントロール部品のデザインの相違 • ファイルダウンロードの際のUIの相違 20 互換性問題 21 アドインが実行できないアドインの動作に関する問題拡張保護モードにより、32-bit アドインが動作しない IE11におけるメモリ保護関連のセキュリティ強化により、一部アドインが動作しない対応方法 32-bit アドインエンタープライズモード有効時に拡張保護モードがOFFになるため実行可能セキュリティゾーンローカルイントラネット、信頼済みサイトいずれかに入っていれば実行可能メモリ保護互換機能では対応できないアドインのバージョンアップが必要 22 ナチュラルメトリックの仕様変更１／２非互換の概要レイアウト崩れ IE8 と IE11とで文字の大きさが異なり、文字の折り返し位置が変わったり、行数が増えたりする場合があるテキストボックスの長さにも差異が発生する場合がある IE8 IE11 原因既定でナチュラルメトリック機能が有効になっていることによる IE8にはナチュラルメトリック機能が無いエンタープライズモードでは回避できない対応方法次スライドに記載 23 ナチュラルメトリックの仕様変更２／２対応方法対応方法設定箇所設定内容 HTTPヘッダー Web サーバー X-UA-TextLayoutMetrics: gdi METAタグ HTML <meta http-equiv="X-UA-TextLayoutMetrics" content="gdi" /> セキュリティゾーン IE設定ローカルイントラネットゾーン ※信頼済みサイトに登録している場合は登録削除要 24 フォントの種類の相違非互換の発生条件フォント指定なし＋文字エンコードが UTF → 互換性問題例 IE11 IE8 差異の例 UIフォント IE8とは異なるフォントの選定 IE8 IE11 英語フォント対応方法フォントを明示的に指定 25 リンク先URL のポップアップ非互換の概要ハイパーリンクのリンク先URLがブラウザーの左下にポップアップするステータスバーを表示している場合は、ステータスバーにリンク先URLが表示される IE9からステータスバーを既定で非表示にした際に合わせて変更した動作ポップアップの例ステータスバーが非表示の場合にリンク先がポップアップ問題となる状況リンク先URLを隠す目的でステータスバーを非表示にしていたWebアプリケーションで、URLが表示されてしまう対応方法リンク先をJavaScriptに変更 26 IE8 と IE11 との差異 27 ユーザーインターフェースの相違タイトルバー、ステータスバーのデフォルト非表示化メニューバーは既定で表示ステータスバーは既定で表示メニューバーは既定で非表示ステータスバーは既定で非表示タイトルバーの製品名からWindowsを削除（クラッシックテーマ時のみ） IE8 IE11 28 コントロール部品のデザインの相違非互換の概要同じドキュメントモードでも、コントロール部品のデザインにIE8とIE11で差異がある差異の例コントロール部品のデザインが3Dからフラットに変更になったことによる IE8 IE11 入力時に入力ボックスに“×”が表示される（“×”は、入力した文字列を削除するためのボタン）対応方法この差異をIE8に戻す方法はありません 29 コントロール部品のデザインの相違（続き）差異の例（ドロップダウンリストボックス）選択肢の表示方法 IE11では選択している項目の上のアイテムも表示対応方法 IE8 IE11 この差異をIE8に戻す方法はありません 30 ファイルダウンロードの際のUIの相違非互換の概要 IE9以降でダウンロード時に通知バーが表示されるようUIが変更されたダウンロードUI HTTPヘッダーによって、通知バーを表示するか、ダイヤログとなるかが決定されるヘッダーに Content-Disposition: attachment が含まれる、または拡張子が登録されていない場合通知バーが表示ヘッダーが Content-Disposition: inline 、またはヘッダーなしの場合で拡張子が登録されている場合ダイヤログが表示対応方法この差異をIE8に戻す方法はありません 31 検証時に利用可能な各種ツール 32 Enterprise Site Discovery Toolkit 1/2 IEがアクセスしたWebサイトのドキュメントモード等の情報を収集するツール Collect data using Internet Explorer Site Discovery https://technet.microsoft.com/en-us/library/dn833204.aspx ツールの構成テレメトリ機能有効化 Powershell スクリプト SCCM 用テレメトリ情報収集インベントリ定義ファイル SCCM 用テレメトリ情報レポートテンプレートテレメトリ機能が有効化されると、IEでアクセスした情報が蓄積される蓄積した情報を WMI を介して取り出すことが可能 SCCM のハードウェアインベントリで収集するほか、Powershell など WMI へのコマンドが実行できる環境からデータを抽出することも可能各サイトごとのアクセス時の状態が収集可能セキュリティゾーンドキュメントモードドキュメントモードの判定理由実行例 Get-WmiObject -namespace root/cimv2/IETelemetry -query "Select * from IESystemInfo" 33 Enterprise Site Discovery Toolkit 2/2 収集可能なシステム要件 Internet Explorer 11 2014年10月以降の累積的な更新プログラム 2015年3月以降の累積的な更新プログラムを推奨 Internet Explorer 8,9,10 2015年3月以降の累積的な更新プログラム収集項目収集項目 URL Domain ActiveX GUID ドキュメントモードドキュメントモード判定理由ブラウザーモードハング回数クラッシュ回数直近のエラー訪問回数ゾーン IE11 IE10 IE9 IE8 説明 X X X X 閲覧したサイトのURL（パラメーター含む） X X X X 閲覧したサイトのドメイン X X X X ロードしたActiveXコントロールのGUID X X X X ドキュメントモードの判定結果ドキュメントモードの判定理由 X X 現在のブラウザー状態の理由 X X X X X X このサイトでブラウザーがハングした回数 X X X X このサイトでブラウザーがクラッシュした回数直近のナビゲーションエラー(404 bad request 、または 500 internal server error 等) 、 X X X X およびその回数 X X X X このサイトを訪問した回数 X X X X このサイトのセキュリティゾーン 34 まとめ互換機能を使用することでアプリケーションの改修規模を削減検証時、業務に影響する問題なのか、無視できる差異なのかを意識し、修正すべきかどうかを検討 IE の後方互換機能を最大限に活用互換機能を知る現在の状態を知る互換機能でエラーを回避最小限のシステム改修動作検証の実施 IE の差異を理解業務への影響を判断適切な設定検証ツールの活用により効率的な情報収集業務に影響する問題かどうかを意識した検証 35 Appendix ドキュメントモード判定・User-Agentの変更エンタープライズモードの利用ドキュメントモード判定・User-Agentの変更－概要－クライアント Web Server リクエスト HTTP Request User-Agent ブラウザーの種類・バージョン情報の提供ドキュメントモードの決定レスポンス Header HTML etc 業務ロジック HTTP Response サーバーの処理結果でドキュメントモード指定が可能（ヘッダー or HTML） “MSIE”が含まれていたら・・・のような処理レンダリング／スクリプト処理 JavaScriptで、“MSIE”が含まれていたら・・・のような処理互換機能を知る 38 ドキュメントモード判定・User-Agentの変更－対応方法のまとめ－クライアント Web Server Request User-Agent User-Agent 通常モード：Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko 互換表示設定：Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/7.0; ・・・ Enterprise Mode： Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; ・・・ドキュメントモードの特定処理 IE11 標準モード業務ロジック Response Header HTML CSS JavaScript HTML5 Quirksモード IE10 標準モード “MSIE”が含まれていたら・・・のような処理 IE9 標準モード IE8 標準モード IE7 標準モードドキュメントモードを指定可能 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> （HTML METAタグとして設定） IE5 Quirks モード通常モード互換機能を知る Enterprise Mode （優先度：高）ドキュメントモードを指定可能 X-UA-Compatible : IE=EmulateIE8 （Web Server 側で指定）互換表示設定（優先度：低） 39 User-Agent の変更１／２原因：User-AgentがIE8とIE11とで異なるブラウザーの種類やバージョンを示す情報がIE11で変更になったため User-Agent の取得方法には２種類あり、対応方法がそれぞれ異なるサーバーへ送信する User-Agent クライアントのブラウザー内のJavaScriptで取得する User-Agent 事象：User-Agentに依存しているアプリで発生する主な事象バージョンチェックエラー対応方法サーバーへ送信する User-Agent エンタープライズモード互換表示設定 JavaScriptで取得するUser-Agent ドキュメントモードの指定互換機能を知る 40 User-Agent の変更２／２ 2種類のUser-Agentの具体例方式サーバー送信内容 HTTP Request Header IE11では削除 IE8 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; ・・・ IE11 Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko JavaScript ドキュメントモードで対応可能 window.navigator.userAgent IE11では削除 IE8 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; ・・・ IE11 Mozilla/5.0 (Windows NT 6.1; Trident/7.0; ・・・ navigator.appName IE8：Microsoft Internet Explorer IE11：Netscape 互換機能を知る 41 エンタープライズモードの利用エンタープライズモードの利用方法特定のページを表示時にメニューから有効化管理者指定したURLを自動的に有効化（サイトリスト）エンタープライズモード設定グループポリシー、またはレジストリで設定メニューに表示させるかどうかサイトリストの場所適切な設定「ツール」メニューに「エンタープライズモード」の項目が追加エンタープライズモードが有効なサイトをアイコンで可視化サイトリスト作成ツール 42 IE11 の互換機能の比較エンタープライズモード IE11 互換表示設定対応するドキュメントモード IE8/7/5 (IE8 相当の動作) 特に指定が無ければ IE7/5 指定があれば指定したモード優先有効化の方法メニュー／サイトリスト GPOまたはレジストリ設定要ユーザー手動 GPO/IE の既定値の設定設定できる単位 URL ドメイン（TLD＋α）クライアントが送信する User-Agent 文字列 IE8 の UA 文字列を送信 IE7 の UA 文字列を送信拡張保護モードの無効化対象のサイトのみ無効化が可能 ✕ (インターネットオプションに従う) 事前レンダリングの無効化 ○ ✕ 事前キャッシュの無効化 ○ ✕ CSS Expressionsのサポート ○ (IE8 相当の動作) △ (信頼済み、イントラゾーンで動作) Client Capsのサポート ○ (IE8 相当の動作) ✕ Script Versionのサポート ○ (IE8 相当の動作) ✕ 適切な設定 ■ 早わかり！エンタープライズモード: http://blogs.technet.com/b/jpieblog/archive/2014/08/08/3635654.aspx