Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
特集:IE11 Preview概説

特集:IE11 Preview概説

Web制作者が知っておくべき、Internet Explorer 11(プレビュー版)の新機能および変更点

2013年7月5日

先週公開されたWindows 8.1(プレビュー版)に標準搭載されているWebブラウザの新版であるIE11(プレビュー版)の主要な新機能および変更点を紹介。「ユーザー・エージェント文字列」「SPDY対応」「WebGL対応」「高品質ビデオ」など。

尾崎 義尚
  • このエントリーをはてなブックマークに追加

 2013年6月26日~28日(米国時間)にサンフランシスコで開催された開発者向けカンファレンス「Build」でWindows 8.1のプレビューが公開され、Internet Explorer 11(以降、IE11) Previewも同梱の形で公開された。Windows 8.1は年内のリリースが予定されており、IE11も併せてリリースされる予定である。また、一部報道ではWindows 7にも提供されるといわれているが、マイクロソフトからの公式な発表はまだされていない。

 本稿では、IE11 Previewの主要な新機能および変更点をWeb技術者向けに紹介していく。

ユーザー・エージェント文字列

 まずは恒例のユーザー・エージェント文字列の変更から見ていこう。IE11のユーザー・エージェント文字列には大きな変更があって、「MSIE」の記述がなくなっている。

Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
ユーザー・エージェント文字列: IE11(上)とIE10(下)

IE11のユーザー・エージェント文字列からは「MSIE」の表記がなくなっていることが分かる。

 また、以下のJavaScriptコードを実行してみると、以前のバージョンでは「Internet Explorer」などと返していたが、IE11では「Netscape」や「Gecko」と返すようになった。

JavaScript
alert(navigator.appName);   // 「Netscape」(IE11の場合。以前は「Microsoft Internet Explorer」)
alert(navigator.product);   // 「Gecko」(IE11の場合。以前は「undefined」)
Webブラウザーのアプリ名と製品名を取得するJavaScriptコードと、それをIE11で実行した結果

 このようにJavaScriptなどで「Internet Explorerである」と識別することが難しくなっている。

 このような状況から筆者は、現在はすでに「“ユーザー・エージェント文字列”を見てWebページの表示内容を動的に切り替える」という時代ではなくなってきていると考えている。

 依然として、ユーザー・エージェント文字列でブラウザーのバージョンを見て(ページを開いているブラウザーが)対応ブラウザーかどうかを判定し、表示内容を動的に変更しているサイトをよく見かける。確かにこれまでのように数年に1回のブラウザー・リリースであれば、このような手法でも(随時、最新の内容に対応できるペースなので)問題はなかったが、ChromeやFirefoxなど、年に何度もバージョン・アップがあるブラウザーのバージョンを全て把握して対応し続けるのは現実的ではなくなっている。またマイクロソフトのほかの製品の動向(例えばVisual Studio 2012は四半期に1度のペースでバージョンアップしている)を見ていても、IEのバージョン・アップも今後早まっていくことが予想できる。

 そのような中、ブラウザーのバージョンを比較することで「対応ブラウザーかどうか」の判定をする手法は、ますます現実的ではなくなってくるだろう。今後は、「ページ閲覧中のブラウザーで使用したい機能が提供されているかどうか」は、Modernizrなどを使って各機能個別に判別することをお勧めする。

SPDY対応

 IE11では、新しいプロトコルであるSPDYがサポートされるようになった(次の画面を参照)。SPDYは、グーグルが提唱した通信プロトコルで、既存のHTTPの問題を解消して高速なWebブラウジングを可能にする規格である。

IE11の[インターネット オプション]ダイアログの[詳細設定]タブ
IE11の[インターネット オプション]ダイアログの[詳細設定]タブ

新しくSPDYの使用可否を選択できるようになっている(デフォルトでオン)。

 後述の「F12開発者ツール」を使ってGmailの通信をキャプチャしてみると、プロトコルにSPDYが使用されていることが分かる。

Gmailの通信キャプチャ

プロトコルにSPDYが使用されていることが分かる。

 筆者の感想としては、ほかのメジャー・ブラウザーはほとんどがサポートしているとはいえ、グーグルが先行して仕様を決めている印象があったため、マイクロソフトがサポートしたことは意外だった。「マイクロソフトは変わったな」という印象を受けている。

WebGL対応

 WebGLは、ブラウザー上でハードウェア・アクセラレートされた3D描画を可能にする機能だが、マイクロソフトはこれまで「セキュリティ面で懸念がある」ということで採用を見送ってきた。新しい仕様ではセキュリティ問題が解消されているのに加えて、安全でないWebGL記述をスキャンして致命的な問題が発生しないようにしているという。ともあれ、満を持してIEでもWebGLがサポートされることになった。最新版IEの新機能を試せるサイト「IE Test Drive」では、次の画面に示すように写真を3D加工できるデモが公開されている。

WebGLで頂点を移動して3D描画できるようになっている。

新しいUIのIE

 Windows 8では、「デスクトップ版のIE」に加えて、Windowsストア・アプリ版の「新しい (Windows) UI の IE」(どうやらこれが正式名称らしい)が標準搭載された。この「新しいUIのIE」でまず目に付くのが、以前は上に並んでいたタブが下に移動したことだ。

Windowsストア・アプリ版のIE10のタブ表示(上)と、同版のIE11のタブ表示(下)

これまで上に表示されていたタブが下に移動していることが分かる。

 これは好みもあるかもしれないが、操作が必要なものが下にまとまることで、タブレットで使っているときも操作がしやすくなっている。

 また、以前はアクセスしづらかった[お気に入り]もボタンが用意されて簡単にアクセスできるようになった。各[お気に入り]のアイテムへアクセスする際も、(IE10ではフラットに表示されていたが)IE11では階層表示が可能になって目的のアイテムをより見付けやすくなっている。

 さらに、アドレスバーを常時表示できるようになった。IE10では「没頭型UI(Immersive UI)」という名のとおり、コンテンツに没頭させるためにアドレスバーや表示中のタブは、アプリバー(=画面の下からせり上がってくるメニュー)を表示したときだけ表示されていた。もちろんこれでも問題ない人も多いだろうが、セキュリティの観点や、ほかのタブ型ブラウザーの操作に慣れている場合など、いちいちアプリバーを表示するのが面倒という人も少なくはないだろう。IE11ではこの問題が解消されている。

 実際の設定方法としては、(次の画面のように)ブラウザーの[オプション]チャームで、[常にアドレスバーとタブを表示します]をオンにすることで、アドレスバーと表示中のタブを常に表示しておくことが可能になっている。

新しいUIのIEでアドレスバーとタブを表示した状態

[オプション]チャームで常に表示を選択できるようになった。

 もう1つの強化点として、2つのウィンドウを並べて表示できるようになった(次の画面)。

新しいUIのIEでウィンドウを並べて表示できるようになった

 これにより、新しいUIのIEでも複数のページを比較するような使い方もできるようになった。

高品質ビデオ

 プラグイン不要の<video>タグはIE9からサポートされてきたが、IE11では動画機能が強化されている。IE Test Driveに、強化された機能を試せるデモが公開されている(次の画面は、そのデモの実行例)。

ビデオ機能のデモ・コンテンツ

 SilverlightのSmooth Streamingのデモを見たことがある方であれば、このデモがそれと同じコンテンツであると分かるだろう。今回の強化点ではプラグイン無しで、Encrypted Media Extensionsによる暗号化、アダプティブ・ストリーミング、コンテンツ保護、リッチなキャプチャ機能をサポートする。

 このデモには、鍵アイコンが付いたコンテンツと、鍵アイコンがないコンテンツがあることが分かると思う。これまでは動画を保護するDRMや暗号化の技術が標準化されていなかったため、権利のある動画をプラグイン無しで再生することは難しかったが、IE11では暗号化技術を組み合わせることによって、プラグイン無しでDRMをサポートできるようになった。

F12開発者ツールの強化

 IE使いのWeb開発者であれば、[F12]キーを押すことがクセになっている人も少なくないだろう。IE11の「F12 開発者ツール」は、これまでの見た目が大幅に変更されただけでなく、機能も大幅に変更された。以下の画面キャプチャを見ていただければ一目瞭然、これまでとは全然違うことが分かるだろう。

大幅に強化されたF12開発者ツール

 これについては機能変更が大幅なため、別途機会を設けて詳細を説明していきたいと考えている。

そのほか

 個人的に非常に重要だと考えているのが、「Continuous Browsing(継続的ブラウズ)」と呼ばれる機能である。例えば家を出る前に調べたものを移動中に参照したい場合、これまでは自分宛にメールで送ったり、再度検索したりしていたが、この機能を使えば、見ていたページをほかのデバイスで表示できるようになる。そのため、家のデスクトップで表示していたページをSurfaceで開くといったことが可能だ(次の画面を参照)。残念ながら、IEの機能なのでiPhoneなどには引き継ぐことはできない。この点は(すでに各デバイス間で閲覧履歴を共有可能な)Chromeに軍配が上がる。

デスクトップで表示していたタブをSurfaceで選択できる

 また、タッチ機能の最適化、GPUアクセラレーションによるパフォーマンス改善、閲覧速度の向上、プリフェッチ、プリレンダーによる体感速度の向上なども、注目ポイントとして挙げられる。

まとめ

 今回は改善点など特徴的な部分の概要を解説した。IE11の新機能を使ったデモがすでにいくつかInternet Explorer Test Driveに追加されているので併せて確認してほしい。

サイトからのお知らせ

Twitterでつぶやこう!