今こそ知っておきたい 既存 Web コンテンツの最新 Internet Explorer へのマイグレーション方法 日本マイクロソフト株式会社デベロッパーエクスペリエンス & エバンジェリズム統括本部物江修 Twitter:@osamum_MS
アジェンダ 最新の Internet Explorer へアップデートの必要性 Web ブラウザーのアップデートに伴う Web コンテンツのマイグレーション作業 ツールを使用したテストの管理と効率化
最新 Internet Explorer へのアップデートの必要性
最新の Internet Explorer にバージョンアップしなければならない理由 ~ OS のバージョンアップ サポートの終了 ~ 2016 1 12 Windows OS Internet Explorer Windows Internet Explorer 延長サポート終了 Windows Vista SP2 Windows Server 2008 SP2 Internet Explorer 9 Windows 7 SP1 Internet Explorer 11 Windows Server 2008 R2 SP1 Windows 8.1 Internet Explorer 11 Windows Server 2012 Internet Explorer 10 Windows Server 2012 R2 Internet Explorer 11 2017 年 4 月 11 日 2020 年 1 月 14 日 2023 年 1 月 10 日
の寿命 Web ブラウザーのサポートはいずれ終了 2016 年 1 月 12 日 2017 年 4 月 11 日 2020 年 1 月 14 日 2023 年 1 月 10 日 Windows Vista Internet Explorer 7 Windows 7 Windows 8 Windows 8.1 Windows 10 Internet Explorer 8 Enterprise mode (IE8) Enterprise mode (IE8) Enterprise mode (IE8)
Windows 10 の Web ブラウザー ~ 搭載されている Web ブラウザーの使い分け ~ 後方互換性 Web 標準 / 相互運用性 IE にロックイン 既存 Web システム インターネットや 新規 Web システム
検証はなくならない Web ブラウザーのアップデートのたびに検証は必要 Web ブラウザーのアップデート頻度 検証 サービスパック 検証 Mac OS のバージョ サービスパック OS リリースのタイミング Windows 10 の Internet Explorer 11 移行 Mac OS のバージョンアップ(約 1 年) 約 6 週間ごと 検証 6 週間 検証 6 週間 約 6 週間ごと 検証 6 週間 検証 6 週間
Windows 10 の IE11 を推奨する理由 ~ 移行作業が一度 ~ Windows エンタープライズモード延長サポート終了 Windows 10 〇現状なし Windows 8.1 〇 2023 年 1 月 10 日 Windows 7 2010 年 1 月 14 日 Windows 8.1 or 7 +IE11 Windows 10 <IE11 Windows 10 + IE11
検証にかかる工数の圧縮 工数がかからなければ検証は負担にはならない ナレッジ 計画設計 方法 手順についての 正しい知識 Internet Explorer 11 移行ガイド 互換性クックブック ツール 実施するための ツールとリソース Site Scan Fiddler dev.modern.ie 自動 UI テスト 運用管理 作業 行程の 管理 Team Foundation Server
Web ブラウザーのアップデートに伴うマイグレーション計画と作業
Internet Explorer Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Internet Explorer 10 Windows 8 Internet Explorer 11 Windows 8.1 Windows 10 Internet Explorer 6 Windows Vista Windows 7 Windows XP
既存資産の情報収集 優先順位付け 計画と実施 インベントリ 業務担当者 利用者 開発者からの聞き取り 販売店 開発元に問い合わせ ビジネスインパクト 利用範囲優先順位 利用者数 づけ 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 つに集約される 書き換え Edge 向けに コンテンツを書き換え 新規 開発 Compat Inspector Fiddler 後方互換 IE の後方互換機能を 使用する 仮想化 OS ごと環境を 仮想化して使用する 非推奨 ドキュメントモード エンタープライズ モード Hyper-V Remote App Windows XP モード
Internet Explorer 11 の 後方互換機能を使用した マイグレーション方法 Edge と Internet Explorer 11 の 併用方法
Internet Explorer 11 の 後方互換機能を使用した マイグレーション方法
~ 以前のバージョンの描画ルールで表示 ~
設定値 IE8 IE9 IE10 IE11 EmulateIE10 〇 10 〇 EmulateIE9 〇 〇 9 〇 〇 〇 EmulateIE8 〇 〇 〇 〇 8 〇 〇 〇 〇 EmulateIE7 〇 〇 〇 〇 7 〇 〇 〇 〇 5 〇 〇 〇 〇 edge 〇 〇 〇 〇
~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 DOCTYPE HTML 4.0 Strict (Quirks) DOCTYPE HTML
~ 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 ( )ドキュメントモードの指定 エミュレーションではない
Edge と Internet Explorer 11 の 併用方法
Internet Explorer 11 への自動リダイレクト (1/2) ~ すべてイントラネットトラフィックを IE に ~
Internet Explorer 11 への自動リダイレクト (2/2) ~GPO とエンタープライズモードリストマネージャーを使用して任意の URL だけを IE に ~
指定によるリダイレクトページの違い ~GPO と CVList による指定では表示される内容が異なる ~ グループポリシー 互換表示リスト ( ) ( ) マイクロソフトがホストしているもの
Demo グループポリシーを使用した Internet Explorer へのリダイレクト
Microsoft Edge Dev で提供されているツール スクリーンショットの 取得 リモートIE 仮想マシン サイトスキャン パートナー提供のツール BrowserStack Kraken.io
Demo Microsoft Edge Dev ツール
検証作業の管理と効率化
検証の種類 自動化 2 つの検証 動作検証 プロパティの変化 演算結果 表現 表示検証 目視が必要なもの 表示崩れ 桁おち
マイグレーションと 既存サイトの検証作業 検証作業は何度も繰り返される 事前調査 新しいブラウザで正常に 動作/表示されるか 開発/修正 修正個所が正常に 動作/表示されるか リリース 全体が正常に 動作/表示されるか
のテストスイート Enterprise エディション以上 チーム開発機能の一部 開発の計画からソースコードの管理 テストまで一貫して管理
Visual Studio Online によるテストの管理 ~Web ブラウザからすぐに使用可能 ~ クラウドサービスで管理 Web ブラウザで使用可能 Visual Studio から接続可能 Git も使用可能
テスト管理機能を使用する意義 要件に沿った検証の完了を保障 テスト対象の 明確化と共有 環境構築 検証手順 再現手順 プロセス管理 再利用 いつ 誰が どのような 作業を行う /行ったか テストケース 手動 自動 その他 手順 設定 など
Online でのテスト管理 完了まで繰り返し プロジェクトの作成 修正作業 修正内容 テスト計画の作成 テストスイートの作成 テストケース実行 OK NG Bug 作成 再現手順 担当者アサイン 優先度 テストスケースの作成 完了
Demo Visual Studio Online での テストケースの作成と実行
Visual Studio の自動 UI テスト ~UI への入力と結果の検証を自動でおこなう ~ Window title 73533 Altea 4 Enterprise エディション以上 Visual Studio で作成 Internet Explorer 以外の Web ブラウザーにも対応
自動 UI テストについて 自動 UI テストに向いているもの 頻繁な回帰テスト テストケースの無限の反復実行 カスタムレポートの作成 人の手で見過ごされがちな不具合の発見 自動 UI テストに向いていないもの 短期間の開発 UI の変更が発生する
Demo Visual Studio 2015 コード化された UI テストの実行
テストツールを考慮したマイグレーションの流れ 自動 UI テスト OK 表示チェック OK 運用 NG NG 互換性クックブック 互換性クックブック ActiveX コントロールとプラグインの変更点 JavaScript の互換性の変更点 CSS とレイアウトの互換性の変更点
Visual Studio のテストの効率化 http://aka.ms/vs-test-jp
Appendix: 採用事例
Visual Studio の導入事例 : 株式会社ビービーシステム 導入の背景 導入効果と今後の展望 ビジネス推進上の要件 自社が提供する Office 365 向けオンラインサービス (AddressLook, ExLook, GroupLook) を安定的に稼働させる 維持現す状るはこ要と件がを困難 現状業務環境 頻繁な Web ブラウザアップデートがあり 都度検証 / 改修が必要 Office 365 も年に数回アップグレードされ検証が必要 導入効果 テスト内容の ぶれ や 漏れ がなくなり 品質が高まると共に均質化 テストの作業負担が 1/3 ~ 1/5 程度に大幅に削減 サービス正常性確認を毎朝自動で行えるようになり予防保守体制が確立 テスト自動化 / 継続的デリバリー体制強化ニーズの高まり IT での対応 : Visual Studio Ultimate 活用 利用製品 Visual Studio Ultimate ( 自動テスト機能 ) Team Foundation Server 導入理由 以前から Microsoft Technology を採用し SharePoint や Office 365 向けオンラインサービスを Visual Studio で開発 Visual Studio Ultimate に同梱されているテスト機能を活用することを決定 今後の展望 URL 他製品や SI 案件へのテスト自動化の展開を計画 テスト実施時の数パターンの環境を Team Foundation Server と System Center を組み合わせて自動展開 テスト駆動型のアジャイル開発へ移行 ( 開発期間短縮 ) テスト自動化ノウハウのサービス化と社外展開 http://www.microsoft.com/ja-jp/casestudies/bbsystem2.aspx 51
まとめ ドキュメントモード エンタープライズモードリストマネージャー グループポリシー
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.