読者です 読者をやめる 読者になる 読者になる

ハウテレビジョン開発者ブログ

『外資就活ドットコム』を日夜開発している技術陣がプログラミングネタ・業務改善ネタ・よしなしごとについて記していきます。

MacでWindows XP & IE6の環境を構築するまでの壮大なYak Shaving

@artifactsauce です。今日は東急東横線が大幅に遅延していて朝からすでに萎えています。今からリポビタンDを買いに行こうと思っています。

皆さんのWebサービスはInternet Explorer(以下IE)6でも快適に利用できますか?Microsoft自体がWindows XPのサポートを終了した今では、IE6での動作を保証したWebサービスを作る理由はかなり少ないと言わざるを得ません。しかし一方で、企業や学校などを中心に、Windows XP & IE6などの古い環境を使っていらっしゃる方はそれなりの数がいらっしゃいます。そのようなユーザー様からサイトの不具合の報告を頂いた場合、皆さんはどのように対応しているでしょうか?「お客様の環境が古すぎるのが悪いんじゃないですか?」なんて調査もしないで答えている人はいませんよね?そのサービスがIE6をサポートしていないことを謳っていても、原因がユーザー様の環境であることを明確にするために調査が必要なこともあるでしょう。今日はそんなお話です。

確実に再現するためのModern.ie

複数のWebブラウザでの検証は最近の話ではありません。IEとNetscapeとのWebブラウザ戦争の時代から続いてきた必要な作業でした。Firefoxの登場によってW3C標準に準拠すべしとの機運が高まりましたがIEは独自路線をやめず、さらにはバージョンが上がる度に中途半端に仕様を変更してみたりと、Web開発者の混乱と怒りを買っていました。Web開発者は広くユーザーにリーチするために、多く種類の環境を用意し、検証することを余儀なくされていたのです。

そのような批判に応えてMicroscoftは、誰でも様々なバージョンのIEの検証ができる環境の提供を始めました。それがmodern.IEです。

f:id:artifactsauce:20141030215635p:plain

modern.IEでは、ブラウザ上でのスクリーンショットを取得したりするサービスを提供したり、様々なバージョンのWindowsおよびIEがインストールされた仮想マシンを配布したりしています。仮想マシンは入手しうるほとんどの仮想化プラットフォーム向けに提供されており、Microsoftの本気を感じます。今度は本気みたいです。

ちなみに、GitHub上にInternet Expoloerのページがあったりするので、これを機に覗いてみるのも良いかもしれませんね。

Virtualbox

今回想定している環境はMacです。その理由は私の開発環境がMacだということ以外にはありません。Mac環境に対しては VirtualBoxVMware FusionParallels向けの仮想マシンが提供されています。今回は当方がVagrant環境を構築していることもあり、既にインストールされているVirtualBox向けの仮想マシンを使用します。静的な見た目の確認だけでしたらスクリーンショットでも良いのですが、Javascriptの挙動も確認したいという場合には適切な方法ではありません。仮想マシン上でWindowsを起動するのが最も確実な方法でしょう。

90日間でログインできなくなる

私はすでにmodern.IEの仮想マシンを使っていたので、まずは起動してみます。しかし無念。アクティベーションしていないので利用できなくなっています。と言うより、そもそもサポートが切れているのでUpdateできるはずもありません。

f:id:artifactsauce:20141030215728p:plain

尚、このmodern.IEはアクティベーションすることができないので、Windowsをアクティベーションしないで利用できる期間である90日間を過ぎると、ログインすらできなくなるのです。オーマイガー!

仮想マシンのダウンロードと起動

というわけで、再度modern.IEのサイトに行き、仮想マシンをダウンロードしましょう。前述のmodern.IEのトップ画面から「仮想マシン」のページへ遷移します。

ここでは例として当方の環境である、MacとVirtualBoxを選択します。

f:id:artifactsauce:20141030215756p:plain

表示されるリストの中からWindows XP IE6を選択します。

f:id:artifactsauce:20141030215836p:plain

XPを捨て去りたいMicrosoftさんの必死さが伝わってきますね。仕事中なのでこのゲームはプレイしていませんが、きっと面白いことでしょう。

XP & IE6の仮想マシンはファイル1つなので問題ありませんが、他の環境では複数のファイルに分割されています。そこで、1回で取得できるように curl コマンドによる取得方法が提示されています。ここでは例として、XP & IE6の取得コマンドを示しておきますが、サイトで確認することをお勧めします。

$ curl -O -L "https://www.modern.ie/vmdownload?platform=mac&virtPlatform=virtualbox&browserOS=IE6-WinXP&parts=0&filename=VMBuild_20131127/VirtualBox/IE6_WinXP/Mac/IE6.WinXP.For.MacVirtualBox.sfx"

取得したファイルの中に、少なくとも1つは .sfx という拡張子のファイルがあります。 .sfx はあまり見かけない拡張子だとは思いますが、自己解凍形式の圧縮ファイルでして、その解凍方法は下記のように実行権限を付与して実行するという形です。

$ chmod 755 IE6.WinXP.For.MacVirtualBox.sfx
$ ./IE6.WinXP.For.MacVirtualBox.sfx

RAR SFX archive

Extracting from ./IE6.WinXP.For.MacVirtualBox.sfx

Extracting  IE6 - WinXP.ova                                           OK
All OK

実行すると、上記のように.ova という拡張子のついたファイルが生成されます。ここで生成したOVA形式のファイルは何度でも利用できるので、このような検証作業が再び発生するようでしたら、保存しておくと良いでしょう。

このファイルをダブルクリックすれば自動でVirtualBoxが起動し、「インポート」ボタンを押すことでインポートが始まります。

f:id:artifactsauce:20141030215913p:plain

インポートが完了したら仮想マシンを起動します。

日本語が表示できない

起動した画面がこちらです。

f:id:artifactsauce:20141030215928p:plain

やったね!

それではまず、「外資就活ドットコム」を閲覧してみましょう。

f:id:artifactsauce:20141030215948p:plain

ガーン!!日本語出てないやんけー!これはmodern.IEで配布されているWindows XP版には日本語フォントがインストールされていない英語版であることが原因です。それではどうすれば日本語フォントをインストールできるのでしょうか?

Windows Updateでインストールする

調べてみるとこんなページがありました。

ん?しかしよく読んでみるとWindows VistaまたはWindows 7が対象とのこと。しかもそもそもアクティベーションしていないのでWindows Updateができません。失敗です。

f:id:artifactsauce:20141030220013p:plain

コントロールパネルから

調べてみるとこんなページがありました。

このページの内容に従ってみましょう。"Control Panel" の "Regional and Languages" を起動し、ダイアログの中で "Languages" タブを選択します。その中に "Install files for East Asian Languages" というチェックボックスがあります。

f:id:artifactsauce:20141030220335p:plain

やったね!これでフォントをインストールできるぞ!

チェックボックスをONにすると「230MBほどディスク・スペースを必要とするけど大丈夫?」との警告が出ます。

f:id:artifactsauce:20141030220353p:plain

230MBなんて現代では物の数ではありません。ここは黙って "OK" をクリックします。すると更にダイアログが表示されます。

f:id:artifactsauce:20141030220405p:plain

なんと、インストーラー・ディスクを挿入しろと言ってきます。いやー、持っていませんよ。

この方法ではこれ以上進めることはできませんでした。失敗です。この方法が使えないということは、日本語表示はともかく、日本語入力はできないということのようです。

メイリオフォントをダウンロード

調べてみるとこんなページがありました。

このページの案内に従ってフォントをインストールしてみましょう。Macとクリップボードの共有はできないようですのでURLは手打ちしてください。また、当然日本語が表示されないので、ちゃんと日本語が表示されるブラウザと画面を照らし合わせながらボタンをクリックします。さらに、ダウンロードしたインストーラーを実行してもやっぱり日本語が表示されないのでかなりの苦痛です。

インストーラーが終了するとすぐに日本語が表示されるようになります。やったね!

f:id:artifactsauce:20141030220422p:plain

ん?でもちょっと待てよ。タイトルが変だぞ? body 内部にはフォントが効いているようですが、その外側には効いていません。結果的に、タイトルに関してはこれ以上どうしようもありませんでした。

まあ、ブラウザで日本語が表示できたからそれで良いじゃないか?一件落着だ!

フォントをコピーする?

……いや、待てよ。通常のWindows XPはメイリオなんてインストールされていないから、これはユーザー様の環境を再現したことにはならないんじゃないか?つまり「MS Pゴシック」が必要ということです。しかしホストOSがWindowsなら件のフォントがインストールされているのですが、Macには標準で添付されておりません。

Mac版のOffice体験版をインストールすると同時に件のフォントがインストールされるのですが、これをVirtualBox上のWindowsにコピーすることはライセンス的に可能なんでしょうか?Wikipediaの記事を読むとかなりのグレー感がただよっております。ここは潔く諦めるべきでしょう。

その代わりと言ってはなんですが、MacにインストールしてあるフリーのフォントをゲストのWindows仮想マシンにコピーしてみることにします。採用したフォントは下記のとおりです。

ゲストのWindows仮想マシンにファイルをコピーする最も簡単な方法は共有フォルダ機能によるコピーかと思います。順をおって解説します。

まずはVirtualBoxのウインドウ右下にある共有フォルダボタンをクリックします。

f:id:artifactsauce:20141030220446p:plain

現れたダイアログ中で、共有フォルダの新規作成をクリックします。

f:id:artifactsauce:20141030220502p:plain

最後に共有フォルダのホスト上のPATHと、ゲストから見えるフォルダ名を指定します。私の場合は、 Folder Path/Users/{username}/Public を、 Folder NamePublic を指定しました。

f:id:artifactsauce:20141030220516p:plain

これで、 Public にフォルダに置いたファイルがゲストWindowsと共有することができます。フォントを件のフォルダにコピーしましょう。

$ cp /Library/Fonts/{ipa*,NotoSansJP-*} /Users/akiyama/Public/

ゲストWindows側で共有フォルダにアクセスする場合は、下のようにアドレスバーに \\VBOXSVR\Public と入力します。すると先ほどの Public フォルダと同じファイル構成になっていることが確認できるかと思います。

f:id:artifactsauce:20141030220536p:plain

これらのフォントファイルを、 C:\\WINDOWS\Fonts に移動します。ドラッグ&ドロップでOKです。

移動したらブラウザのフォントを設定します。IE6のメニューバーから、"Tools" -> "Internet Options..." を選択します。現れたダイアログで "Fonts..." をクリックし、さらに現れたダイアログで下の図のように選択します。

f:id:artifactsauce:20141030220551p:plain

ブラウザ上の表示が変わりましたね?これでホストのMacからフォントをコピーしてブラウザのデフォルト・フォントとして設定することができました。

まとめ・雑感

MacでWeb開発している環境において、Windows XP上のIE6の動作を検証しようと試みた結果、それなりの状況は再現できるが、完全な再現はできないということがわかりました。また同時に、Windows XPをサポートすることはWeb開発者にとってかなりの負担になるということがご理解いただけたかと思います。

ユーザーが古いバージョンを使っているが検証が難しいという状況は、他のOS、特に今はAndroidにおいても同様であり、Windowsに限ったことではありません。ただ、Androidはコンシューマー機が多いのでバージョンアップや機種変更はそれなりの頻度で行われるのですが、Windowsはビジネスユースが多く、問題が顕在化しやすいということがあります。

それにしても、IEが標準に準拠していれば、これほど大きな問題にはならなかったんじゃないか?と思う今日このごろです。