今こそ知っておきたい、既存 Web コンテンツの最新

今こそ知っておきたい、
既存 Web コンテンツの
最新 Internet Explorer への
マイグレーション方法
日本マイクロソフト株式会社
デベロッパーエクスペリエンス&エバンジェリズム統括本部
物江修
Twitter:@osamum_MS
アジェンダ
• 最新の Internet Explorer へアップデートの
必要性
• Web ブラウザーのアップデートに伴う
Web コンテンツのマイグレーション作業
• ツールを使用したテストの管理と効率化
最新Internet Explorer への
アップデートの必要性
最新の Internet Explorer に
バージョンアップしなければならない理由
～ OS のバージョンアップ、サポートの終了～
• 2016
1
12
Internet Explorer
Windows
Windows Vista SP2
Windows Server 2008 SP2
Windows 7 SP1
Windows Server 2008 R2 SP1
Windows 8.1
Windows Server 2012
Windows Server 2012 R2
Windows OS
Internet Explorer 延長サポート終了
Internet Explorer 9
Internet Explorer 11
Internet Explorer 11
Internet Explorer 10
Internet Explorer 11
2017年 4 月 11 日
2020年 1 月 14 日
2023年 1 月 10 日
の寿命
Web ブラウザーのサポートはいずれ終了
2016 年
1 月 12 日
Windows Vista
Internet
Explorer 7
Windows 7
Internet
Explorer 8
Windows 8
Windows 8.1
2017 年
4 月 11 日
Enterprise mode (IE8)
Enterprise mode (IE8)
2020 年
1 月 14 日
2023 年
1 月 10 日
検証はなくならない
～ Web ブラウザーのアップデートのたびに検証は必要～
Web ブラウザーのアップデート頻度
サービスパック、OS リリースのタイミング
検証
サービスパック、
Mac OS のバージョンアップ(約 1 年)
検証
Mac OS のバージョ
約 6 週間ごと
検証
6 週間
検証
6 週間
約 6 週間ごと
検証
6 週間
検証
6 週間
検証にかかる工数の圧縮
～工数がかからなければ検証は負担にはならない～
ナレッジ
計画設計、方法、
手順についての
正しい知識
• Internet Explorer 11
移行ガイド
• 互換性クックブック
ツール
実施するための
ツールとリソース
•
•
•
•
Compat Inspector
Fiddler
modern.IE
自動 UI テスト
運用管理
作業、行程の
管理
• Team Foundation
Server
Web ブラウザーの
アップデートに伴う
マイグレーション計画と
作業
Internet Explorer
Internet
Explorer 8
Internet
Explorer 9
Internet
Explorer 7
Internet
Explorer 6
Windows Vista
Windows XP
Internet
Explorer 10
Internet
Explorer 11
Windows 8 Windows 8.1
Windows 7
既存資産の
情報収集
業務担当者、利用者、
インベントリ
開発者からの聞き取り
販売店、開発元に
問い合わせ
優先順位付け
• ビジネスインパクト
• 利用範囲
• 利用者数
優先順位
づけ
1.
2.
3.
4.
5.
重要ではない
あると便利
必要(クリティカルではない)
重要
ミッションクリティカル
計画と実施
• 暫定的な対応
プラン/
実行
• 後方互換機能
• 仮想化
• 中長期的な対応
• 修正
• 新規開発
既存資産の
情報収集
業務担当者、利用者、
開発者からの聞き取り
販売店、開発元に
問い合わせ
優先順位付け
• ビジネスインパクト
• 利用範囲
• 利用者数
1.
2.
3.
4.
5.
重要ではない
あると便利
必要(クリティカルではない)
重要
ミッションクリティカル
計画と実施
• 暫定的な対応
• 後方互換機能
• 仮想化
• 中長期的な対応
• 修正
• 新規開発
トリアージ
例)
影響の度合い (レベル)分け
a. 実運用に支障(データが入力/視認できない等)
影響調査
b. 入力/視認は可能であるものの意図しない動作
が発生
トリアージ
決定
実施
切り分けc. わずかなレイアウトの崩れなど
判断
トリアージ
影響調査
新しい IE に対応できるもの
できないものの切り分け
◆対応できない場合は理由を明らかに
例)
切り分け
a. 予算/工数がかかりすぎる
決定
b. 他社の作ったパッケージ
実施
c. その他 (ActiveX、Java ランタイム、etc..)
判断
トリアージ
影響調査
切り分け
判断
決定
対応させるサイト
/させないサイトを決定
実施
トリアージ
決定
マイグレーション方法
の決定
影響調査
方法
切り分け
優先順位
決定
判断
◆ソースの編集が可能
a. 新しい IE 向けに
Web サイトを修正
b. IE の後方互換機能を使用
実施
◆ソースの編集が不可
a. 作り直し
b. 仮想環境で旧い Windows
& 古い IEで運用
c. 廃棄
トリアージ
決定
影響調査
方法
切り分け
例)
優先順位
どの順序で作業を
すすめるか
実施
a. 必要性の高い
b. 影響が少ない
判断
c. 複数の方法の組み合わせ
トリアージ
決定
実施
影響調査
方法
書き換え
切り分け
優先順位
後方互換
実施
判断
仮想化
Web コンテンツのマイグレーション方法
～方法は 3 つに集約される～
書き換え
新しい IE 向けに
コンテンツを書き換え
後方互換
IE の後方互換機能を
使用する
仮想化
OS ごと環境を
仮想化して使用する
非推奨
• Compat Inspector
• Fiddler
• ドキュメントモード
• エンタープライズ
モード
• Hyper-V
• Remote App
• Windows XP モード
古い Internet Explorer 向けの
Web サイトを
そのまま継続して使用するには?
～以前のバージョンの描画ルールで表示～
設定値
EmulateIE10
10
EmulateIE9
9
EmulateIE8
8
EmulateIE7
7
5
edge
IE8
〇
〇
〇
〇
〇
〇
IE9
IE10
〇
〇
〇
〇
〇
〇
〇
〇
〇
〇
〇
〇
〇
〇
〇
IE11
〇
〇
〇
〇
〇
〇
〇
〇
〇
〇
～Internet Explorer 6
～
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN” "http://www.w3.org/TR/html4/loose.dtd">
(Standard)
• HTML 4.01
•
HTML 4.0
(Quirks)
• DOCTYPE
• HTML
DOCTYPE
「Strict」
～ Internet Explorer 11 上で Internet Explorer 8 をエミュレート～
エンタープライズ
モード
～使いやすいグループポリシーとレジストリキー～
• メニュー[ツール] – [エンタープライズモード] を選択
• エンタープライズモードの IE Web サイトリストを使用

HKLM¥SOFTWARE¥Policies¥Microsoft¥Internet Explorer¥Main
¥EnterpriseMode
[ツール] メニューを有効化: “Enable” = “” または “{URL}{:ポート}”
XML サイトリストを有効化: “SiteList” = “{ファイルパスまたは URL}”
Demo
Internet Explorer 11 の
エンタープライズモード
～ Internet Explorer 8 以外のバージョンが指定可能に～
IE5
～
IE10
(※)ドキュメントモードの指定、
エミュレーションではない。
Windows 10 の Web ブラウザー
～2 つの Web ブラウザーが搭載～
Windows 10
“Project Spartan,”
Windows 10 での Web ブラウザー
～2 つの描画エンジン～
Project Spartan
EdgeHTML.dll
MSHTML.dll
相互運用性
互換性
既定のブラウザ ★
モダン Web サイト向け
集中を妨げない画面、注
釈、Cortana 統合のような
ユニークなユーザー体験
IE11 IE10
IE9
IE8
IE7
IE5.5
主にイントラネットか
エンタープライズモードサイト
Project Spartan
～相互運用性を意識した新しいブラウザ～
〇クロスブラウザー
〇 Web 標準
X IE の後方互換性機能
X ドキュメントモード
X エンタープライズモード
X ActiveX
旧バージョンの Internet Explorer との互換性は皆無
検証のためのツール
バージョン間の非互換機能の調査と検出
？
互換性検証ツール
Compat Inspector
• ツールの js ファイルを参照させることで
非互換機能を検出
<script src="http://ie.microsoft.com/TestDrive/HTML5/CompatInspector/inspector.js">
</script>
ネットワークキャプチャツール
Fiddler
• Proxy 型の HTTP デバッガ
Fiddler の入手
• http://fiddler2.com/
• 本体、アドオン、チュートリアル
Demo
Compat Inspector と
Fiddler を使用した
Internet Explorer 非互換機能の検出
| modern.IE
http://modern.ie/
Web ページのスキャン
クロスブラウザーテスト
仮想マシンの提供
(※)Web ページのスキャン機能はイントラネットでホスト可能
Demo
modern.IE
検証作業の管理と
効率化
検証の種類
自動化
～2 つの検証～
動作検証
• プロパティの変化
• 演算結果
• 表現
表示検証
• 目視が必要なもの
• 表示崩れ
• 桁おち
マイグレーションと
既存サイトの検証作業
～検証作業は何度も繰り返される～
事前調査
新しいブラウザで正常に
動作/表示されるか
開発/修正
修正個所が正常に
動作/表示されるか
リリース
全体が正常に
動作/表示されるか
のテストスイート
• Professional エディション以上
• チーム開発機能の一部
• 開発の計画からソースコードの
管理、テストまで一貫して管理
Visual Studio Online によるテストの管理
~Webブラウザからすぐに使用可能～
• クラウドサービスで管理
• Web ブラウザで使用可能
• Visual Studio から接続可能
• Gitも使用可能
テスト管理機能を使用する意義
～要件に沿った検証の完了を保障～
テスト対象の
明確化と共有
• 環境構築
• 検証手順
• 再現手順
プロセス管理
再利用
• いつ
• 誰が
• どのような
作業を行う
/行ったか
• テストケース
• 手動
• 自動
• その他、
手順、設定
など
Online でのテスト管理
完了まで繰り返し
プロジェクトの作成
テスト計画の作成
テストケース
実行
テストスイートの作成
テストスケースの作成
OK
完了
修正作業
• 修正内容
Bug 作成
• 再現手順
• 担当者
アサイン
• 優先度
NG
Demo
Visual Studio Online での
テストケースの作成と実行
Visual Studio の自動UIテスト
～UI への入力と結果の検証を自動でおこなう～
Window title
73533
Altea 4|
• Premium エディション以上
• Visual Studio で作成
• Internet Explorer 以外の
Web ブラウザーにも対応
自動 UI テストについて
• 自動 UI テストに向いているもの
•
•
•
•
頻繁な回帰テスト
テストケースの無限の反復実行
カスタムレポートの作成
人の手で見過ごされがちな不具合の発見
• 自動 UI テストに向いていないもの
• 短期間の開発
• UI の変更が発生する
Demo
Visual Studio 2013
コード化された UI テストの実行
テストツールを考慮したマイグレーションの流れ
NG
自動 UI テスト
Compat Inspector
• 非互換性の検出
• デバッグ
OK
NG
表示チェック
OK
modern.IE スキャン
互換性クックブック
• 「CSS とレイアウトの互換性の変更点」
• 「クロスブラウザー開発標準と互換性
のベストプラクティス」
Visual Studio のテストの効率化
http://aka.ms/vs-test-jp
Appendix:採用事例
Visual Studio の導入事例：株式会社ビービーシステム
導入効果と今後の展望
導入の背景
ビジネス推進上の要件
自社が提供する Office 365
向けオンラインサービス
(AddressLook, ExLook,
GroupLook) を安定的に稼
働させる
現状業務環境
維
持現
す状
るは
こ要
と件
がを
困
難
頻繁なWeb ブラウザアップ
デートがあり、都度検証/改
修が必要
Office 365 も年に数回アッ
プグレードされ検証が必要
導
入
効
果
• テスト内容の”ぶれ”や”漏れ”がなくなり、品質が高まると共に均
質化
• テストの作業負担が 1/3 ～ 1/5 程度に大幅に削減
• サービス正常性確認を毎朝自動で行えるようになり予防保
守体制が確立
今
後
の
展
望
• 他製品や SI 案件へのテスト自動化の展開を計画
• テスト実施時の数パターンの環境を Team Foundation
Server と System Center を組み合わせて自動展開
• テスト駆動型のアジャイル開発へ移行（開発期間短縮）
• テスト自動化ノウハウのサービス化と社外展開
URL
http://www.microsoft.com/ja-jp/casestudies/bbsystem2.aspx
テスト自動化/継続的デリバリー体制強化ニーズの高まり
IT での対応： Visual Studio Ultimate 活用
利用製品
• Visual Studio Ultimate
（自動テスト機能）
• Team Foundation
Server
導入理由
• 以前から Microsoft Technology を採
用し SharePoint や Office 365 向けオ
ンラインサービスを Visual Studio で開
発
• Visual Studio Ultimate に同梱されて
いるテスト機能を活用することを決定
53
まとめ
• Compat Inspector
• Fiddler
| modern.IE
monoe’s blog
準備は OK? サポート終了までに知っておきたい
古い Internet Explorer 向けに作成された
Web コンテンツの最新 Internet Explorer への
マイグレーション方法
http://bit.ly/mig_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.

Download Report