お知らせ

お知らせ NEWS

WINDOWS10でIE8やIE9を使う方法

2016年4月27日 /マージBLOG、WEB制作
WEBデザイナーの弓削です。
WINDOWS10にてIE9やIE8を使ってホームページのデザインチェックを行おうと思った際に、
めちゃくちゃ困ったのでメモしておきます。

古いIEは厄介

過去、その癖の多さから、
WEB制作者に数多ものトラウマを植え付けてきた(現在進行形)
インターネットエクスプローラー。

その中でもIE9以下は、特に癖が強く、
他のブラウザでは問題なく表示しているのにも関わらず、
IEでは全く異なる表示をしてしまう・・なんてことが多々ありました。

多々ありました。

その上、IE利用者の割合は日本ではダントツTOPだったため、多くの場合においてユーザーに見えている画面は「IE」だと想定して制作する必要がありました。

それも最近ではスマホの普及のお陰もあってか、この縮図が大きく変わってきていますが、
依然としてPCユーザーにとってはIEもしくはWINDOWS10標準のEDGEの割合は少なくないでしょう。

ただし、WINDOWS7は自動アップデートでIE11にバージョンアップする点や、
WINDOWS8以上には「IE9以下はインストールできない」といった環境の変化も手伝い、
IE9以下のブラウザの割合は急激に減少傾向にあります。



IE8は以下は、全てのOSでサポートが終了しているため、
上表で見る限りでも想定される一番古いバージョンのIEは「VISTAのIE9」となります。
こちらのサポート期間も残り1年を切っていますので、近い未来にIE9以下は完全に切って問題ない状況になるとは思います。

ただそれでも、「とはいっても対応してほしい」というケースはあるとは思います。
しかし、こういう場合になった時困るのが先ほども書いたWINDOWS8以上には、IE9以下はインストールできないという問題です。

もし制作者のPCがWINDOWS8.1やWINDOWS10だった場合、IE9以下を利用できないという問題に直面します。なので、真っ先に考える対応策として・・・

IEテスターや・・・
01

最新のIEに標準装備されているエミュレーション機能が思いつきますが・・・
02

・・どちらの機能も、本物のIE9と同じ挙動はしてくれません。

大体は同様の動きをしますが、細かい部分の仕様が異なるのか、
テスターやエミュレーションでは綺麗に表示されていても、本物のIEで見たら表示が異なる可能性があるという問題が残ります。
かといって、昔のOSを手に入れるのは面倒な上に、IE9や8のテストだけのためにコストを掛けるというのも・・・。

・・と思っていたら、
思わぬ救済措置をマイクロソフトさんが用意していました。

IE8や9のための専用WINDOWS OS

実際のIE8や9を起動する事が出来るOSを公式でダウンロードし、VitualBoxなどの仮想化ソフトでOSを立ち上げることができます。
そのため、新しいPCが必要になるわけでは無く、お使いのWINDOWS10の中に仮想IE8入りWINDOWS XPみたいな感じで作ることができます。

しかも、MAC OS用の仮想化ソフト向けのWINDOWS OSまで用意されています!
つまり、MACユーザーでもIE8やIE9のチェックが可能になります!

何より無料!これ大事!!

出来ればその親切を旧IEの設計に向けてほしかった

ということで早速導入してみましょう。

私はWINDOWS10ユーザなので、今回の説明はそのケースとなります。
他のOSでも似たような方法にはなるのではないかと思いますが・・ご了承ください。

1.まず仮想化ソフトパッケージの用意(今回はVirtualBox)

最初に、OSを動かすための仮想化ソフトパッケージをインストールします。
このソフトの中でOSが動くというイメージです。

VirtualBox
https://www.virtualbox.org/

20160502_002
↑のURLより最新のVirtualBoxをダウンロードしましょう。
(例の場合はv5.0.20(2016年5/2現在))

20160502_004

20160502_005
特に変更せずに「NEXT」をクリックしてください。

20160502_009
オプションは以下の意味になります。
好きなオプションを選んで「NEXT」をクリックしてください。
「Create a shortcut on the desktop」デスクトップにショートカットを作る
「Create a shortcut in the Quick Launch Bar」クイックランチャーにショートカットを作る
「Register file associations」ファイルタイプの関連付けを登録する

20160502_006
VirtualBox のネットワーク機能をインストール際に一時的にネットワークが切断されるという旨の警告です。現在継続的にネット接続していて、急にそれが切断されると困るようなものがある場合は、終わるまで待つか終了させておいて「NEXT」をクリックしましょう。

20160502_007
これまでの設定で特に問題がなければ「INSTALL」をクリックしてください。インストールが開始されます。インストール中に確認画面が出る場合がありますが「インストール」をクリックして対応してください。

20160502_008
これでインストール完了です「FINISH」をクリックしてください。


VirtualBoxがインストールされました。

2.仮想WINDOWS7 IE9を準備する

次にIE9が使えるWINDOWS7の仮想データをダウンロードします。



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

こちらにアクセスすると、WINDOWS、MAC、Linuxそれぞれの仮想データがダウンロード可能です。
今回は、Windows環境でVirtualBoxを利用しているのでそれぞれ選択して「Download.zip」をクリックしデータをダウンロードしましょう。


中には「IE8 - Win7.ova」というファイルが入っています。これが仮想データです。
※ファイルサイズが大きいので空き容量とかにはご注意くださいね。
解凍した「IE8 - Win7.ova」ファイルをダブルクリックして開いてください。


VirtualBoxのインポート画面が現れます。
基本的には特に設定を弄る必要はないと思います。
「インポート」をクリックしてください。

あとは自動でインポート作業が行われ・・・


VIrtualBoxに「IE8 - Win7」という項目が現れました。


電源オフとなっていますが、項目をダブルクリックするか、
中央上部の「起動」という項目をクリックすればWINDOWS7が起動します。


Windows7の見慣れた起動画面が表示されましたね。
暫く待つと、デスクトップ画面になりますので、そこからIEを立ち上げてみましょう。


ちゃんとブラウザでページを閲覧できます。ただキーボードが英語配列なのかな?記号系統の場所とかちょこちょこ違ってすごく打ちにくいです。。
そこさえ気にしなければ全く問題なく使用できます。

また、自分のPCのipを調べて自分のPCの仮想環境のwebサイトを見る事も可能なので、態々FTPでファイルアップしてテストという手間もかかりません。
ネックはマシンのリソースを多く使ってしまう事ですね。私のノートは立ち上げた直後からファンが常時回り続けます・・・。
それでもチェック用としてはかなり良い選択しなのではないかと思います。

お試しあれ。
弓削篤史(デザイナー/撮影/広報)
写真・動画撮影、サイトデザイン・コーディング、CMS導入やPHPを使ったWEBプログラミングに携わっています。
[ like ] 写真撮影、革鞄づくり、カレーづくり、キャンプ、カラオケ 等