modern.IEのサイトスキャンサーバーをローカルに構築してみよう！

Webサイト、業務用Webシステムを構築する際にコーディングが各ブラウザに適切かどうかは必ずチェックすると思います。コーディングに問題があるとブラウザによってはデザインが崩れたり、思ったユーザ体験が提供できないことがあります。Web標準に則って開発するのも大切です。

そうしたコーディングチェックツールは幾つかありますが、今回は特に「古いIE向けのコード」や「Web標準やベストプラクティスに従っていないコード」を検出し、修正案を出してくれるMicrosoft公式のサイトスキャンのオフライン版を試してみたいと思います。modern.IEのサイトではURLを入力するとそのページをすぐにスキャンできますが、オフライン版であればLAN内部のサーバに対してチェックできるので、開発中のサイトに対しても利用できるのが利点です。

modern.IEの公式サイト にてオフライン版が紹介されています。

分かりづらいのですが、上記枠で囲んだところがオフライン版の案内になります。

サイトスキャン オフライン版のインストール

インストールに際して下記のソフトウェアが必要になります。

• node.js
• Git

Windowsであればnode.jsとGitのバイナリが配布されていますのでこれをインストールするのが手軽です。Mac OSXであればHomebrewを使ってインストールできます。どちらもパスの通ったところに配置してください。

準備が終わったらターミナル（またはコマンドプロンプト）で下記コマンドを実行します。

$ git clone https://github.com/InternetExplorer/modern.IE-stic-code-scan.git
$ cd modern.IE-static-code-scan/
$ npm install

これでインストールが完了です。早速サイトスキャンを立ち上げます。

$ node app.js 
Server started on port 1337
To scan a private url go to http://localhost:1337/ and follow the instructions

http://localhost:1337/ にてサーバが立ち上がりますので任意のWebブラウザでアクセスします。

こちらがメイン画面で、URLを入力して実行します。Basic認証にも対応しています。

スキャンが終わると次のようにレポート作成に移ります。

スキャン結果の確認はmodern.IEのサイト上で行います。

問題がないか否か、アイコンで分かるようになっています。

問題がある場合はどのような解決ができるのか提示してくれる機能もあります。こうした指摘に従って修正することでより高いユーザ体験が提供できるようになるでしょう。

HTML5を含めWeb技術は日進月歩で進化しています。そのため完璧に作り上げるというのは難しいでしょう。そこでmodern.IE サイトスキャン オフライン版のようなツールを使って機械的にチェックを行うことで品質を上げていくのは良い方法です。慣れてくればどういった点が重要か分かるようになるでしょう。

HTML5は各ブラウザによって実装状況も異なります。さらにレガシーなブラウザも無視することはできません。幅広い知識が求められるWebシステム開発のお供にぜひご利用ください。

modern.IE

hifive – HTML5企業Webシステムのための開発プラットフォーム