Chromeで、modern.IEというWEB検証サービスが利用できる拡張を知りました。
サイト ModernIE for Web Compatibility testing（Chrome拡張：配布終了）
僕はこれまで、modern.IEというサービスは、利用した事がなかったんですが、これを機に利用してみたら、思っていた以上に便利だったので紹介です。
目次
modern.IEとは
modern.IEとは、マイクロソフトが提供する、無償で使える（一部除く）WEB検証サービスです。
modern.IEでは、いろいろなデバイス、OS、ブラウザでサイトをチェックすることができます。あと、IEを中心にユーザビリティーを上げるための、様々な改善点も提案してくれます。
現在は、いろいろなデバイスとOS、多数のブラウザが存在しています。例えば、以下のような組み合わせはよくあり得ます。
- Windows8.1とIE11
- Windows8.1とOpera
- Windows8.1とFirefox
- Windows8.1とChrome
- OS XとSafari
- iPhone6とモバイルSafari
- iPad AirとモバイルSafari
- Nexus7とAndroidブラウザー
- Galaxy S3とAndroidブラウザー
こういった、最近のメインストリームの組み合わせを手軽に表示テストすることができます。
以下は、当サイトを表示テストしてみた例です。
（テストページの画像などをクリックすると実物大で確認することもできます。）
サイトの、表示テストをしようと思ったら、いろいろな環境でテストするに越したことはありません。ただ個人の場合、実際の環境をそろえるわけにもいきませんし、仮想環境でそろえるにしても、大変面倒くさい作業です。
それが、たとえ画像での表示確認だったとしても、これだけの環境ができるのはありがたいです。
その他にもmodern.IEには、以下のような機能があります。
- サイトをスキャンしHTML5、CSS3的に改善点があれば提案（これがメイン機能）
- IE最適化の提案
- 最新版のIEで廃止になったコードの検出
- 利用したいOS、IEのバージョン、仮想マシンソフトを指定して環境をダウンロード
modern.IEの使い方
modern.IEの使い方はとても簡単です。
modern.IEにアクセスして、「サイトスキャン」にURLを入力し、「今すぐスキャン」ボタンを押すだけです。
Chrome拡張（配布終了）の場合は、もっと手軽でスキャンしたいページ上でツールボタンを押して、「Scan」ボタンを押すだけです。
すると、以下のような結果が表示されます。
一般的なコーディング問題の検出
まず、スキャンが終了した状態で、以下のような結果が表示されます。
当サイトは、以前のバージョンのIEとの問題はないようですが、複数環境のブラウザで利用する場合の注意点はいくつかあるようです。
例えば、注意マークが出ている「HTML5入力」の「お勧めの改善案」を見てみると、以下わかりやすく解説されています。
- どういった改善点が見つかったのか
- なぜその改善点が重要なのか
- 修正方法
その他の、改善案などは、さらに丁寧に書いてあります。
複数環境のページスクリーンショット
「複数にわたるブラウザとデバイスでもウェブサイトのスクリーンショットを取得します。」タブを選択して、「スキャンを開始します。」をクリックすると、いろいろな環境での表示テストが行えます。冒頭画像で紹介したやつです。
ブラウザスクリーンショットから、URLを入力することでも行えます。
この記事を書いた時点では、以下のような環境の表示テストを一発で行うことができます。（読み込みに多少時間はかかります）
- Windows8.1とIE11
- Windows8.1とOpera
- Windows8.1とFirefox
- Windows8.1とChrome
- OS XとSafari
- iPhone6とモバイルSafari
- iPad AirとモバイルSafari
- Nexus7とAndroidブラウザー
- Galaxy S3とAndroidブラウザー
この表示テストの良いところは、画像などをクリックすると、スクロールバーが表示され、ページの最後まで表示テストを行えることです。
Windows8.1とIE11
もちろん、モバイル環境でも、ページの最後まで表示を確認することができます。
iPhone6とモバイルSafari
これまでいくつか、この手のスクリーンショットテストツールを使ってきたのですが、ページ上部しか表示されないものもあったので、すべてをチェックできるのはありがたいです。
最近のIEでサポートされなくなったコード
「最近のIEでサポートされなくなったコードをスキャンします。」タブをクリックして「スキャンを開始します」をクリックすると、古いIEでしかサポートされていないコードを、検出してくれます。
問題がなかった場合は、以下のように表示されます。
テスト用の仮想環境もダウンロード可能
その他にも、「IE6～IE11」、「Win XP～Win 10」まで、あとは「好きな仮想マシンソフト」のテスト環境を入手することもできます。
僕は、仮想マシンソフトは、VMwareを使っているので、VMware環境などを選択してダウンロードすることができます。
例えば、IE6、XP、VMwareの仮想テスト環境を入手したらこんな感じ。
仮想環境は30日間利用できます。
まとめ
modern.IE、初めて利用してみたのですけど、とても便利でした。
特に、ブラウザスクリーンショット機能は、ちょっといろいろなブラウザで、簡単な表示確認をしたい場合には、重宝するのではないかと思います。
ブラウザスクリーンショットを見ることができるサイトは、他にもありますが、重くてなかなか表示されなかったりします。
modern.IEも、表示するまでは多少時間がかかりますが、マイクロソフトが運営しているだけあって、ちゃんと表示されます。
少なくとも、ローカルにインストールした各種ブラウザを一つ一つ立ち上げて確認するよりは早いと思います。
