MacにIE表示テスト環境構築

MacにIE導入

こんにちは！ウェブエンジニアのジワタネホです！

みなさん、IEの表示確認してますか？

windowsで開発している方は問題ないかと思います。（面倒ではあるでしょうけどね。）

Macで開発している方はどうでしょう？

本日は、Mac、というかvagrant上にwindows IEを導入する方法を備忘録として！

フロント開発者の参考になれば！

背景

MacでのWeb開発をしている方は、IEの表示確認に苦労していると思います。

バージョンにもよりますが、さすがにMicrosoft側でもサポートを終了しているものは今回の要件からは外します。

なので、IE11からですね。

IEに対しての対応としては、

• 無視。
• Windows端末を使って表示テスト
• 各種無料エミュレーターを使って確認
• 各種有料エミュレーターを使って確認
• Macに有料のwindowsを入れてIEを確認
• Macに無料版のwindowsとIEを入れて確認
• etc

上記一番目が選択肢にあるのがベストですww

ただしおそらく世の中はそこまで甘くないでしょう。

なので各種選択肢を考察してみましょう。

Windows端末を使って表示テスト

まあこれが一番安全で確実且つハードルは低いでしょう。

ただし表示の確認のためだけにWindowsを立ち上げて確認するのは効率が悪いですし、Windows端末を持っていなかった場合はわざわざ購入するのかと。

そういう話になりますよね。

各種無料エミュレータを使う。

悪くはないですが、やはり不安。

ただし、Microsoftが公式に出しているInstant Testingは使える可能性も。

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

ただし無料なのはedgeの最新だけっぽいですね。

どちらかというとIEを確認したいという意味では微妙かと。

各種有料エミュレーターを使う

上記のInstant Testingの有料版はいいかもですね。

ただし有料なのはねー。

サイトにもよりますが、ブラウザシェアを考えると費用対効果が見えずらい。。

Macに有料のwindowsを入れてIEを確認

これも結局有償ですからね。

費用対効果という面で微妙。

Macに無料版のwindowsとIEを入れて確認

ということで今回はこちら。

去年くらいまではmodern IEと呼ばれていたものですね。

デメリットは作業時間がかかることくらいか。

要件

vagrantにwindows環境とIEを入れる。

以上。

前提

virtual box、vagrantは入っている前提でいきます。

まだ入れていない方は以下を参考に。

Railsローカル環境構築

あとはマシンの最低限のスペックですかね。

本件はMac上にvagrantでWindowsの仮想環境をたてるという要件のため、

要はパソコンの中にさらにパソコンを入れるという要件なため、それなりに重い処理になります。

最低でもメモリ8GBは必要かと。

あとは、作業時間ですかね。

そもそもデータを落とすのに1時間ほどかかるかと。

なので、就寝前にダウンロード開始しておくのがおススメです。

手順

• 何はともあれダウンロード
• 解凍ソフトインストール
• 解凍と環境設定
• 起動

詳細

何はともあれダウンロード

ここが一番時間かかります。

以下リンクからお好きなバージョンをば。

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

私はwindows8.1IE11を選択です。

おそらく1時間程度かかるかと。

私はこういう場合は、就寝前にダウンロード開始して朝起きたらダウンロード完了しているので実際の時間はわかりませんwww

解凍ソフトインストール

ダウンロードしたWindowsのzipデータはMacのデフォルトの解凍機能では対応できないようです。

なのでフリーの解凍ソフトをインストールします。

こんな時くらいしか用途がない気がするので、Microsoft推奨のThe unarchiverというフリーソフトを使います。

https://theunarchiver.com/

上記から手順に従いインストール。

解凍と環境設定

さて下ごしらえは完了したので、いざ解凍。

解凍後*.boxというファイルがあるので、こちらをvagrant box 登録します。

ファイル名にスペースとかあると面倒なのでリネームもしてしまいます。

登録したらvagrantfileの作成です。

作成したファイルに各種記述をします。

参考までに私の記述内容を記載します。

# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure("2") do |config|
  # The most common configuration options are documented and commented below.
  # For a complete reference, please see the online documentation at
  # https://docs.vagrantup.com.
  config.vm.provider "virtualbox" do |vb|
    vb.gui = true
    vb.memory = "4096"
  end
  # Every Vagrant development environment requires a box. You can search for
  # boxes at https://vagrantcloud.com/search.
  config.vm.box = "win81ie11"
  config.vm.guest = "windows"
  config.ssh.username = "IEUser"
  config.ssh.password = "Passw0rd!"
  config.ssh.insert_key = false
  config.ssh.shell = 'sh -l'
  config.ssh.sudo_command = ''
  # Disable automatic box update checking. If you disable this, then
  # boxes will only be checked for updates when the user runs
  # `vagrant box outdated`. This is not recommended.
  # config.vm.box_check_update = false

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine. In the example below,
  # accessing "localhost:8080" will access port 80 on the guest machine.
  # NOTE: This will enable public access to the opened port
  # config.vm.network "forwarded_port", guest: 80, host: 8080

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from a port on the host machine and only allow access
  # via 127.0.0.1 to disable public access
  # config.vm.network "forwarded_port", guest: 80, host: 8080, host_ip: "127.0.0.1"

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
  # config.vm.network "private_network", ip: "192.168.33.10"

  # Create a public network, which generally matched to bridged network.
  # Bridged networks make the machine appear as another physical device on
  # your network.
  # config.vm.network "public_network"

  # Share an additional folder to the guest VM. The first argument is
  # the path on the host to the actual folder. The second argument is
  # the path on the guest to mount the folder. And the optional third
  # argument is a set of non-required options.
  config.vm.synced_folder ".", "/vagrant", disabled: true
  # Provider-specific configuration so you can fine-tune various
  # backing providers for Vagrant. These expose provider-specific options.
  # Example for VirtualBox:
  #
  # config.vm.provider "virtualbox" do |vb|
  #   # Display the VirtualBox GUI when booting the machine
  #   vb.gui = true
  #
  #   # Customize the amount of memory on the VM:
  #   vb.memory = "1024"
  # end
  #
  # View the documentation for the provider you are using for more
  # information on available options.

  # Enable provisioning with a shell script. Additional provisioners such as
  # Puppet, Chef, Ansible, Salt, and Docker are also available. Please see the
  # documentation for more information about their specific syntax and use.
  # config.vm.provision "shell", inline: <<-SHELL
  #   apt-get update
  #   apt-get install -y apache2
  # SHELL
end

記述が完了したらセットアップは完了です。

起動

はい。vagrant uuuuuuuupppppppp!!!

無事起動できているはず。

ちなみにこのWindows環境はIEのテスト用に無償で配布されているものなので、エクセルやら何やらは入れられません。

そもそも90日後には各種設定がデフォルトに戻ってしまいます。

なので、上記で書いたvagrantfileはvagrantのsnapshot機能を使って保存しておきます。

これで90日後も直ぐに設定を戻すことができます。

設定を戻す場合は以下。

最後に

いかがだったでしょうか？

Web開発者としてはIEは悩みの種ですが、嘆いてもしょうがないので、なるべく効率的にブラウザチェックをするにはこの方法が適しているかと。

本日はここまで！