テストツールで効率化 Internet Explorerバージョンアップに伴う Webコンテンツの移行作業
12 likes•8,413 views
旧バージョンの Internet Explorer 向けに作られた Web コンテンツを最新の Internet Explorer に移行する作業をツールを使って、どのように工数を削減していくか紹介します。
テストツールで効率化 Internet Explorerバージョンアップに伴う Webコンテンツの移行作業
- 2. アジェンダ • 最新の Internet Explorer へアップデートの 必要性 • Web ブラウザーのアップデートに伴う Web コンテンツの検証作業 • ツールを使用したテストの管理と効率化
- 4. 最新の Internet Explorer に バージョンアップしなければならない理由 ～ OS のバージョンアップ、サポートの終了 ～ • 2016 1 12 Windows OS Internet Explorer Windows Internet Explorer 延長サポート終了 Windows Vista SP2 Internet Explorer 9 2017年 4 月 11 日 Windows Server 2008 SP2 2020年 1 月 14 日Windows 7 SP1 Internet Explorer 11 Windows Server 2008 R2 SP1 Windows 8.1 Internet Explorer 11 2023年 1 月 10 日Windows Server 2012 Internet Explorer 10 Windows Server 2012 R2 Internet Explorer 11
- 5. 2016 年 1 月 12 日 2020 年 1 月 14 日 2023 年 1 月 10 日 Windows Vista Windows 7 Windows 8 Windows 8.1 2017 年 4 月 11 日 の寿命 Web ブラウザーのサポートはいずれ終了 Internet Explorer 7 Enterprise mode (IE8) Enterprise mode (IE8) Internet Explorer 8
- 6. 検証はなくならない ～ Web ブラウザーのアップデートのたびに検証は必要～ Web ブラウザーのアップデート頻度 サービスパック、リリースのタイミング 検証 約 6 週間ごと 約 6 週間ごと 検証 検証 Mac OS のバージョンアップ(約 1 年) 検証 6 週間 6 週間 6 週間 検証 6 週間 検証 Mac OS のバージョ サービスパック、
- 7. 検証にかかる工数の圧縮 ～工数がかからなければ検証は負担にはならない～ ナレッジ 計画設計、方法、 手順についての 正しい知識 ツール 実施するための ツールとリソース 運用管理 • Internet Explorer 11 移行ガイド • 互換性クックブック • Compat Inspector • Fiddler • modern.IE • 自動 UI テスト 作業、行程の 管理 • Team Foundation Server
- 8. 検証にかかる工数の圧縮 ～工数がかからなければ検証は負担にはならない～ ナレッジ 計画設計、方法、 手順についての 正しい知識 ツール 実施するための ツールとリソース 運用管理 • Internet Explorer 11 移行ガイド • 互換性クックブック • Compat Inspector • Fiddler • modern.IE • 自動 UI テスト 作業、行程の 管理 • Team Foundation Server 今日は やりません
- 10. Web コンテンツのマイグレーション方法 ～方法は 3 つに集約される～ 書き換え 後方互換 仮想化 • Compat Inspector • Fiddler 新しい IE 向けに コンテンツを書き換え IE の後方互換機能を 使用する OS ごと環境を 仮想化して使用する • ドキュメントモード • エンタープライズ モード • Hyper-V • Remote App • Windows XP モード
- 11. Web コンテンツのマイグレーション方法 ～方法は 3 つに集約される～ 書き換え 後方互換 仮想化 • Compat Inspector • Fiddler 新しい IE 向けに コンテンツを書き換え IE の後方互換機能を 使用する OS ごと環境を 仮想化して使用する • ドキュメントモード • エンタープライズ モード • Hyper-V • Remote App • Windows XP モード 非推奨
- 12. 自動化 検証の種類 ～2 つの検証～ 表示検証動作検証 • プロパティの変化 • 演算結果 • 表現 • 目視が必要なもの • 表示崩れ • 桁おち
- 14. 検証のためのツール
- 16. CompatInspector 互換性検証ツール • ツールの js ファイルを参照させることで 非互換機能を検出 <script src="http://ie.microsoft.com/TestDrive/HTML5/CompatInspector/inspector.js"> </script>
- 17. Fiddler • Proxy 型の HTTP デバッガ ネットワークキャプチャツール
- 19. Demo Compat Inspector と Fiddler を使用した Internet Explorer 非互換機能の検出
- 20. | modern.IE http://modern.ie/ 仮想マシンの提供 クロス ブラウザー テスト Web ページのスキャン (※)Web ページのスキャン機能はイントラネットでホスト可能
- 21. Demo modern.IE
- 23. のテストスイート • Professional エディション以上 • 無償の Express エディション、 オンラインの Visual Studio Online もある (使用人数と機能制限あり) • チーム開発機能の一部 • 開発の計画からソースコードの 管理、テストまで一貫して管理
- 24. Visual Studio Online によるテストの管理 ~Webブラウザからすぐに使用可能～ • クラウドサービスで管理 • Web ブラウザで使用可能 • 5 人まで無償 • Visual Studio から接続可能 • Gitも使用可能
- 25. テスト管理機能を使用する意義 ～要件に沿った検証の完了を保障～ テスト対象の 明確化と共有 プロセス管理 再利用 • 環境構築 • 検証手順 • 再現手順 • いつ • 誰が • どのような 作業を行う /行ったか • テストケース • 手動 • 自動 • その他、 手順、設定 など
- 26. Online でのテスト管理 プロジェクトの作成 テスト計画の作成 テストスイートの作成 テストスケースの作成 テストケース 実行 OK NG 完了 Bug 作成 • 再現手順 • 担当者 アサイン • 優先度 修正作業 • 修正内容 完了まで繰り返し
- 27. Demo Visual Studio Online での テストケースの作成と実行
- 28. Visual Studio の自動UIテスト ～UI への入力と結果の検証を自動でおこなう～ Window title 73533 Altea 4| • Premium エディション以上 • Visual Studio で作成 • Internet Explorer 以外の Web ブラウザーにも対応
- 29. 自動 UI テストについて • 自動 UI テストに向いているもの • 頻繁な回帰テスト • テストケースの無限の反復実行 • カスタムレポートの作成 • 人の手で見過ごされがちな不具合の発見 • 自動 UI テストに向いていないもの • 短期間の開発 • UI の変更が発生する
- 30. Demo Visual Studio 2013 コード化された UI テストの実行
- 31. テストツールを考慮したマイグレーションの流れ 自動 UI テスト NG 表示チェック OK NG OK 互換性クックブック • 「CSS とレイアウトの互換性の変更点」 modern.IE スキャン • 「クロス ブラウザー開発 標準と互換性 のベスト プラクティス」 Compat Inspector • 非互換性の検出 • デバッグ
- 33. Appendix:採用事例
- 34. 36 Visual Studio の導入事例：株式会社ビービーシステム 導入効果と今後の展望導入の背景 IT での対応： Visual Studio Ultimate 活用 ビジネス推進上の要件 現状業務環境 自社が提供する Office 365 向けオンライン サービス (AddressLook, ExLook, GroupLook) を安定的に稼 働させる 頻繁なWeb ブラウザ アップ デートがあり、都度検証/改 修が必要 Office 365 も年に数回アッ プグレードされ検証が必要 現 状 は 要 件 を 維 持 す る こ と が 困 難 テスト自動化/継続的デリバリー体制強化ニーズの高まり 利用製品 導入理由 • Visual Studio Ultimate （自動テスト機能） • Team Foundation Server • 以前から Microsoft Technology を採 用し SharePoint や Office 365 向けオ ンラインサービスを Visual Studio で開 発 • Visual Studio Ultimate に同梱されて いるテスト機能を活用することを決定 導 入 効 果 • テスト内容の”ぶれ”や”漏れ”がなくなり、品質が高まると共に均 質化 • テストの作業負担が 1/3 ～ 1/5 程度に大幅に削減 • サービス正常性確認を毎朝自動で行えるようになり予防保 守体制が確立 今 後 の 展 望 • 他製品や SI 案件へのテスト自動化の展開を計画 • テスト実施時の数パターンの環境を Team Foundation Server と System Center を組み合わせて自動展開 • テスト駆動型のアジャイル開発へ移行（開発期間短縮） • テスト自動化ノウハウのサービス化と社外展開 URL http://www.microsoft.com/ja-jp/casestudies/bbsystem2.aspx
- 35. まとめ | modern.IE • Compat Inspector • Fiddler
- 36. monoe’s blog de:code 2014 セッション DE-016 資料 http://bit.ly/de-016
- 37. © 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.