1. No category

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