Experts.jp日本に、もっとエキスパートを。Experts.jp編集部)InternetExplorer2014年4月9日0click035115Microsoftは無償で、Webページを検証するためのツールとサービスを多数出している。それらをどのように使えば便利なのか。11と最新Web技術動向のご紹介セミナー」から、「modern.IE」「F12開発者ツール」を抜粋して紹介する。講演者は、日本マイクロソフトのテクニカルエバンジェリストであり、本サイトのエキスパートでもある物江修氏。当日は簡単な機能紹介とデモを交えながらのセッションが繰り広げられた。8(以下、IE8)から、「F12開発者ツール」というものが標準搭載されている。プラグインなどではなく最初から搭載されているものなので、仮に丸腰だとしても、IE8以上が入っていれば[F12]を押すだけでツールが起動するので、興味のある方は[F12]を押しまくってみてほしい。Weaverなどではローカルにあるコンテンツを見て作業をしていくが、ブラウザ搭載の開発者ツールでは、オンライン上のコンテンツをリアルタイムで変更し、結果を見ることができる。F12開発者ツールにはさまざまな機能があるが、特にIE11から、大幅に機能の変更が行われている。具体的には、以下の8つに機能がまとめられている。UI応答その中に入ってきている特徴的な新機能のひとつが、「UI応答」である。HTMLでマークアップを記述すると、ボタンやテキストボックス、ドロップダウンなど、いろいろ出てくる。したユーザーインターフェース(UI)を使用した際の反応のスループットを見ることができるのが、この「UI応答」。負荷率――コードで時間がかかっているのか、イメージの読み込みでなのか、そうした細かい点をパフォーマンス・モニタのような形で見ていくことができる。メモリプロファイラもうひとつの目玉としては、「メモリプロファイラ」というものが付いている。これは任意の間隔で、メモリを使った時のプロファイルのスナップショットを撮り、比較するといったことができる。した機能をIEに積むのは非常に意義のあること。プロファイラとはユーザーのコードを分析するためのものだが、例えば同じコードを書いても、ChromeやFirefoxでは早いのにIEでは遅いとか、またその逆のことが起こり得る。した違いは、主にレンダリングエンジンの違いからくる。前までは、ChromeもOperaも、Safari用に作られたWebKitをレンダリングエンジンとして使っていた。このように共通のレンダリングエンジンを使っている場合、どれかに合わせてチューニングするだけで、どのブラウザに対してもそこそこ同じようなチューニング成果が期待できる。IEは、Tridentというまったく異なるレンダリングエンジンを使っているため、動作の具合が違ってくる場合がままある。した場合、レンダリングエンジンごとにプロファイルを採り、それぞれのエンジンごとの特性を比較することが可能だ。今、ChromeとOperaのレンダリングエンジンはBlinkというものに代わっているが、これらについてもプロファイルを取って比較してみれば、面白い結果を見ることができるかもしれない。簡単な機能紹介を交えながらデモセッション「F12開発者ツール」は、その名の通り[F12]を押すことで簡単に起動できるのだが、今回から、新たに[F12]を押さなくても起動できる仕組みが加わっている。マウスを右クリックして開くメニューに「要素の検査(L)」という項目があり、それをクリックすると、目的の場所に飛んでくれる。ダブルクリックすると内容が変更可能になり、リアルタイムで書き換えることができる。ネットワークキャプチャツールと互換性検証ツールIEの「F12開発者ツール」はかなり機能豊富でいろいろなことができるが、それだけでは互換性のチェックなどしつくせない部分がある。それを補うためのツールを紹介していきたい。Inspector」というものがある。これはツールと書いているものの、実態はJavaScript。検査をする際には、互換性のチェックをしたいページに全部書かなければいけないため、そのままでは少々現実的ではないが、それを解決するために、「Fiddler」というネットワークキャプチャツールを使う。「Fiddler」は元マイクロソフト社のエンジニアが出している無償のProxy型のHTTPデバッガで、WebサーバとWebクライアントの間に流れるパケットを傍受し、パケットをキャプチャするのはもちろん、流れるパケットの改竄もできる。参照しているjQueryのライブラリのバージョンを違うものにしたり、画像をすげ替えたりすることができる。Inspector」のスクリプトタグの記述を挿入してしまえば、すべてのドキュメントにそのJavaScriptを参照させることも可能だ。「Fiddler」に関しては、こちらからというところで無償で入手できる。今はまだWindowsでしか動かないが、.netフレームワークをLINUXやMacOSで動かせるようにするMonoプロジェクトで、これも現在α版が公開されているので、もう少し待てば、Macでも「Fiddler」が使えるようになると思う。「Fiddler」はhttpに特化したデバッガなので、画像、音楽、XMLなどが、全部「Fiddler」の中ではデータの形に生成されて出てくる。これは非常に便利なので、ぜひ使ってほしい。Webページの検証から仮想マシンの入手まで無償でできるサイト次に、Webページの表示を検証するためのさまざまな機能を提供している「modern.IE」について紹介する。「modern.IE」は、大まかに、次の3つのことができる。目的となるWebページの記述等をスキャンしてくれる。互換性のチェックで、旧いIE用に作られたコードを検出してくれたりといったことができる。複数のブラウザでそのWebページを表示させた時のスナップショットを、サーバ側で撮ってくれる。7+IE8といった組み合わせのVMを無償で提供しており、それをダウンロードできる。IE」を使って検証してみる。IE」の画面で、入力窓に対象のページのURLを貼り付け、「スキャン」をクリックすると、ページの分析が開始される。すると、「改善の提案」等いろいろ出てくる。その内容は例えば、「(このページは)レスポンシブになっていない......レスポンシブにしたほうがいい」など。レスポンシブデザインがなぜいいのか、その基礎の学習方法などについての事細かな解説も参照できる。そのほかにも、「イメージをオプティマイズしよう」などさまざまなアドバイスが出る。クロスブラウザーテストまた(前述のように)ここをクリックすると、いろいろなメジャーなOS、ブラウザの組み合わせでスナップショットを撮り、比較することができる。これはクラウド側で、対象のページをいろいろなOSとブラウザで表示させるもの。Safariなどもある。ダウンロードもできるので、いろいろなブラウザで、意図したとおりの表示になっているかを、ここで検証できる。Inspector」の機能で、これを実行すると、しばらく待つと検出結果が表示される。ちなみにこの「modern.IE」のソースコードはGitHubで公開されているので、どういう仕組みで動いているか見てみたい、自分も同様のサービスを作ってみたいという方は参考にしていただきたい。先ほど、複数の種類のOS、ブラウザの組み合わせによるスナップショットを見ていただいたが、手元でテストを行いたいという場合もあると思う。その場合、この「複数のブラウザにわたってテストする」をクリックしていただくと、「Mac、Linux、Windows用の仮想マシンをダウンロードします。MacやLinuxでもテストできるVMがここにある。ここで目的のOS、仮想環境のプラットフォームを選択する。すると、さまざまな組み合わせのバーチャルマシンがダウンロードできるようになる。バーチャルマシンが使える期間は90日間で、検証目的以外のサービスに使用されるのを防ぐために制限を設けている。再度試したい場合も、もう一度ダウンロードすれば使える。ダウンロードされるVMは基本的にインターナショナル版なので英語表記になっている。言語パックを当てて日本語化していただきたい。その際にWindowsアップデートをかけてしまうと、IEが最新のものになってしまうので、その点は注意が必要。VMなど難しくて使えない、仮想環境など組めない、という人にもおすすめなのが、「BrowserStack」というサービスもあるので活用してほしい。90日間、お試しで無償で使うことができる。「BrowserStack」はリモートデスクトップ上で各種ブラウザを起動し表示させることができるというもの。手元に特別な環境なしで、webブラウザさえあれば、さまざまなOS、ブラウザのテストができる。11と最新Web技術動向のご紹介セミナー」については春日井良隆氏のブログで紹介しているので参考にしていただきたい。