1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

「数億規模スタートアップのCTO講師」と「エンジニアキャリア専門のポテパン」が贈る、実践型Rubyスクール。

ウェブ開発で必要になるクロスブラウザテストにVirtualBoxを活用しよう

Pocket

はじめに

どうやってクロスブラウザテストを行っていますか?

一般的に、ウェブ開発では複数のブラウザをサポートしなければならないため、ウェブサイトの互換性を保つためにクロスブラウザテストが必要です。

しかし、バージョンの異なる複数のブラウザを用意するのは結構大変です。
特に、IE(Internet Explorer)やEdgeはWindows OSに統合されているため、基本的にブラウザ単体では用意できません。

この記事では、ウェブ開発者の方のために、クロスブラウザテストに「VirtualBox」を活用する方法を説明していきます。

クロスブラウザテストでやっかいなこと

クロスブラウザテストの対象になる主なブラウザは、Google Chrome・Firefox・IE・Edgeなどです。
現在はこれらのブラウザが大きなシェアを占めており、ほとんどの環境をカバーできるでしょう。

ChromeやFirefoxは基本的に最新バージョンでテストすれば問題ないでしょうが、IEとEdgeは複数のバージョンでテストする必要があります。なぜならIEとEdgeはOSごとに最新バージョンが異なっており、複数のバージョンが混在しているからです。

しかし、ここでやっかいなのがIEとEdgeはWindows OSに統合されており、単体ではインストールできないことです。
そのため、クロスブラウザテストのためにOSごと用意する必要があります。

なぜVirtuaBoxを使うのか?

普通に複数のバージョンのWindowsを用意しようと思うと、ライセンス費用がかかってしまいます。
できればクロスブラウザテストのためにお金はかけたくないですよね。
そこで「VirtualBox」が役に立ちます。

VirtualBoxは、無料で使えるオープンソースの仮想環境ソフトウェアで、データベースで有名なOracleが開発しています。

Windowsの他LinuxやMacもサポートしており、32ビットでも64ビットでもインストールできます。
OSをひとつのアプリケーションのように扱えるため、メモリの許す限り複数のOSを起動でき、クロスブラウザテストが簡単に実行できます。
ホストOSと違うOSでも起動できますから、Mac上でWindowsを動かす、またはその逆も可能です。

そして、VirtualBoxを使う一番の理由は、マイクロソフトからVirtualBox用の仮想マシンイメージが提供されていることです。
仮想マシンイメージとは、OSごとパッケージングされた仮想マシンのことで、VirtualBoxにインポートするだけで起動できます。

期限付きのライセンスではありますが、フル機能のWindowsが実行でき、OSも7・8.1・10と用意されており、各バージョンのIEとEdgeがインストールされています。
また、ChromeやFirefoxも任意でインストールできるため、いっしょにテストが行なえます。
仮想マシンイメージは、下記のURLからダウンロード可能です。

仮想マシンイメージダウンロード:

https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

インポートは簡単で、ZIPファイルの中のOVAファイルを開くだけでOKです。
なお、VirtualBoxは事前にインストールしておいて下さい。

スマートフォンでのクロスブラウザテストも必要

近年ではスマートフォンが広く普及し、一般的なウェブサイトでもスマートフォンからのアクセスが半数を超えることも少なくありません。
そのため、従来のデスクトップブラウザに加えて、スマートフォンブラウザもクロスブラウザテストの対象に加える必要があるでしょう。

スマートフォンのクロスブラウザテストは、エミュレーターや実機で行います。AndroidやiOS(iPhone・iPad)のエミュレーターは無償で提供されていますので、それを利用しましょう。
双方ともAndroid Studio・Xcodeという開発環境に組み込まれています。

または、オンラインのクロスブラウザテストサービスを使う方法もあります。
無料で使える範囲は限られていますが、デスクトップ・スマートフォン・タブレットの非常に幅広いブラウザ環境が用意されているため、綿密なテストができるでしょう。

ひとつ例を挙げておくので、気になる方はチェックしてみて下さい。

BrowserStack:https://www.browserstack.com/#

まとめ

現在のブラウザシェアはChrome・Firefox・IE・Edgeがほとんどを占めており、当分はこの状況が続くでしょう。
今後もブラウザ環境が統一されることは期待できないでしょうから、引き続きクロスブラウザテストを行う必要があります。
面倒なことですが、互換性を保つためにもできるだけ効率的な方法でテストを行いましょう。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る