今 こそ 知 っておきたい 既 存 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 Internet Explorer 8 Enterprise mode (IE8) Enterprise mode (IE8)
検証はなくならない 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 7 Internet Explorer 8 Internet Explorer 9 Internet Explorer 10 Windows 8 Internet Explorer 11 Windows 8.1 Internet Explorer 6 Windows Vista Windows 7 Windows XP
既 存 資 産 の 情 報 収 集 優 先 順 位 付 け 計 画 と 実 施 インベントリ 業 務 担 当 者 利 用 者 開 発 者 からの 聞 き 取 り 販 売 店 開 発 元 に 問 い 合 わせ ビジネスインパクト 利 優 用 範 先 囲 順 位 利 用 者 数 づけ 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 サイトを そのまま 継 続 して 使 用 するには?
~ 以 前 のバージョンの 描 画 ルールで 表 示 ~
設 定 値 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 ( )ドキュメントモードの指定 エミュレーションではない
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 NG Bug 作 成 再 現 手 順 担 当 者 アサイン 優 先 度 テストスケースの 作 成 完 了
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 テストの 実 行
テストツールを 考 慮 したマイグレーションの 流 れ 自 動 UI テスト OK 表 示 チェック OK NG NG Compat Inspector 互 換 性 クックブック 非 互 換 性 の 検 出 デバッグ CSS とレイアウトの 互 換 性 の 変 更 点 modern.ie スキャン クロス ブラウザー 開 発 標 準 と 互 換 性 のベスト プラクティス
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 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.