こんにちは！！！
スマートキャンプでエンジニアをしている吉永です！
得意領域はフロントエンドで、スマートキャンプではBOXILというプロダクトに主に関わってます。
早速ですが、皆さんはIEでの表示崩れ対応をしたことがありますか？
フロントエンド開発をしていると同じCSSが当たっているのにChromeとSafari、IEでレンダリングされるものが変わってしまう自体に遭遇することがあるため、各種ブラウザでちゃんとした挙動を調べる作業が生じることがあり、その作業でIEというブラウザの挙動を確認することをIE確認と言います。
IE自体、今後はサポートが終了されるという話も聞く上に、最近ではIEの対応を完全にやめた他社プロダクトも出始めてきました。
しかし、現在BOXILではユーザの10%がIEからのアクセスとなっており、10%というユーザを切り捨ててしまうのはビジネス的にとてもリスクがあると考えています。なのでLPやサービストップなどの主要なページに対して、リリースなどのタイミングで定期的なIE確認を行っているのが現状です。
IE確認の方法としては、Windows機で開発していればそのまま確認することができますが、Macであればそうはいかないため仮想のWindows環境をVirtualBoxなどで別途ライセンスキーを購入し環境を構築することで確認する方法があるかと思います。
また、スマートキャンプでは入社時に好きなPCを選べますが、開発チームは基本的にMacを選ぶ方が多く、IE確認には別途、会社で用意しているWindows機で環境を立ち上げて確認していました。
しかし、やはり自前の端末で確認したいという気持ちもあり、つい最近自前で購入したM1 Macを使ってWindows環境を立ち上げてみようと思いこの記事を書くことにしました。
現在この記事の内容は、Parallels DesktopのM1 Preview版の終了に伴って使用できなくなっている可能性があります。
環境を作るにあたって
Windowsの環境をMacで作るに当たって思い浮かぶのは真っ先に思い浮かぶのはVirtualBoxでしたが、VirtualBoxはM1 Macには未対応でした。
そのため最近Preview版が公開されたParallels Desktopを使っての環境構築をします。
Parallels Desktopの導入方法
1.Parallels Desktop for Mac with Apple M1 chipをダウンロードする
まず、以下のページにアクセスしGoogleアカウントなどでログイン後、Try Technical Previewのボタンを押しParallels Desktop for Mac with Apple M1 chipをダウンロードします。
すると、上の画像のようなページに遷移します。
このページに記載されているActivation keyは、あとでParallels Desktopを立ち上げる際に使うので、まだタブは閉じないで下さい。
2.Windows 10 on ARM Insider Previewをダウンロードする
次に以下のページにアクセスします。
Microsoftアカウントなどでログインしていない場合は上の画像の画面に遷移するかと思いますが、ログインすると以下の画面への遷移が可能になるかと思います。
通常のintel用のイメージでは、M1 Macで仮想環境を立ち上げることができないため、ARMプロセッサに対応したPreview版のイメージをダウンロードしなくてはいけません。
Windows 10 Client ARM64 Insider Preview - Build 21286を書かれたボタンをクリックするとダウンロードが開始され、VHDXファイルが手に入ります。
3.シリアルキーを使いアクティベートする
Parallels Desktopを開くと以下の画面が出てくるため、先ほどダウンロードしたVHDXファイルを指定します。
すると、Parallelsで使用するディレクトリの場所を決めたり、シリアルキーをアクティベートする画面などに遷移するため、先ほどのシリアルキーをコピペします。
進むとロード画面が出てくるためそのまま待機して下さい。
4.仮想環境が立ち上がる
ロード後、Macに保存されているファイルが同期された状態でWindowsの仮想環境が立ち上がります。
実際にIEの確認をしてみます。
トップページでは大きな崩れなどは見当たらず、ちょっと安心しました。
まとめ
一瞬で環境が構築できる上に、操作してる間のモサッとした仮想環境の動作感なども特に違和感なく、サクサク動いたためとても使いやすかったです。
私の場合、今のところIE確認以外の使い道を見出せていませんが、今後使い道が出てくるといいなと期待してこの記事を締めくくりたいと思います。
※追記: この記事を書くためにM1 Macを買ったということにして会社経費でM1 Mac代が落ちたりしないかな〜って...笑
是非ご一考頂けますと幸いです。
