Edge と IE:まるっと理解する、Windows 10 に搭載される Web ブラウザーについて


前回、IT 担当者向けに公開されているドキュメントのまとめ記事を書いていて気が付いたことがあります。それは、Windows 10 に搭載される Web ブラウザーについて、ずいぶん前からセッションではお話しさせていただいていましたが、日本語でまとまったドキュメントがまだないということです。

これまで、Windows 10 正式リリース前ということもあり、あえて記事に書かないというところもありましたが、7 月 29 日に無事にリリースもされましたので、今回はこの Windows 10 に搭載される Web ブラウザーについて簡単ではありますが、紹介させていただきます。

なお、この内容は以下のスライドを使用したセッションの内容をもとにしています。

 

Windows 10 の Web ブラウザー

Windows 10 には、これまでの Windows とは異なり、 2 つの Web ブラウザーが搭載されます。

従来どおりの Internet Explorer と、今回まったく新規に開発された Edge という Web ブラウザーです。

image

この二つの Web ブラウザーは、以下のような特徴と目的があります。

 

Internet Explorer

Windows 10 に搭載されている Internet Explorer は IE11 です。これは Windows 8.1 や Windows 7 にインストール可能な従来と同じものが搭載されています。

Windows 10 の TechPreview の段階では、一時的に機能が強化された IE11 が搭載されており、Media Capture API や Game Pad API 等の新しい API が搭載されていましたが、正式リリース版では従来のものと同じものに戻されています。

Internet Explorer 11 が搭載されるのは、過去の Internet Explorer 向けに作られた Web コンテンツに対し後方互換性を提供するためです。Internet Explorer 11 は、従来からのドキュメントモードや、このバージョンから追加されたエンタープライズモードなど、後方互換を確保するための機能が搭載されています。

後方互換性保持の目的で搭載されているため、今後はバージョンアップが行われない予定です。

 

Edge (コードネーム Project Spartan)

IE11 が旧バージョンの Internet Explorer との互換性を確保するために搭載されているのとは逆に、Edge は Chrome や Firefox、Safari といった、メジャーなモダンブラウザーとの相互運用性を高め、Web 標準により準拠し、日々進歩する Web の技術を迅速にサポートする目的で新たに開発されました。

Edge は相互運用性の高い描画エンジンと、Windows 10 に最適化されたエクスペリエンスを持つブラウザーシェルで構成されています。

Windows 10 の既定の Web ブラウザーは Edge になります。

 

Edge の目指すところ

Edge を開発する際にまず行ったことは、Internet Explorer 固有の機能を完全に取り去ることでした。この作業では、約 22 万行のコード、6 つのドキュメントモード、300 個以上の固有の機能が削除されました。

image 

その後、Safari の描画エンジン WebKit と、そこからフォークして作られた Chrome の描画エンジン Blink の共通する部分について、同様の動作となるよう非常に大きな 投資を行い、およそ 300 万以上のコード、49 の主要な新機能を追加し、4200 以上の相互運用のための修正を行いました。

image

相互運用性の基準は、さまざまなモバイル Web ブラウザーの描画エンジンとして広く採用されている WebKit 側によせられることになりました。これは、Edge が、PC 版の Windows 10 だけでなく Windows Phone 用の Windows 10 にも搭載されるためです。

これらについては以下の記事 (英語) に詳しく書かれているので、興味のある方はぜひご覧ください。

 

相互運用性を意識した User-Agent

前述のように Edge は WebKit ベースの Web ブラウザーに準拠した動作となります。しかし、そうなると懸念点が出てきます。たとえば、Web サーバーが User-Agent からブラウザー種別を判別してレスポンスするコンテンツの内容をブラウザーごとに変えている場合です。

たとえば、Edge が出力する User-Agent が、Web サーバー側で Internet Explorer や、その他の未知の Web ブラウザーと判断され、WebKit ベースの Web ブラウザー用のコンテンツとは別のコンテンツが返された場合、Edge は正しく動作しないか、充分な性能を発揮できない可能性があります。

image

こういった問題を避けるために Edge 相互運用性の高い User-Agent を出力します。

具体的には以下のようなものです。

Mozilla/5.0 (Windows NT 6.4; WOW64) AppleWebkit/537.36 (KHTML, like Gecko)
Chrome/36.0.1985.143
Safari/537.36 Edge/12.0

 

このような User-Agent を出力することにより、Web サーバーが User-Agent から Web ブラウザーの描画エンジンの種別を判別している場合でも、WebKit 用のコンテンツが返されるので問題なく処理を行うことができます。

もし、どうしても、Edge と他の Web ブラウザーの判別を行いたい場合には、Edge の出力する User-Agent の最後の部分には 「Edge/12.0」と情報が付加されているので、これで判断することができます。

ただし、モバイルを含め、Web ブラウザーの種別が増えている昨今、サポートしている機能ではなく Web ブラウザーの種別でコンテンツを変更するのは推奨できません。

 

Edge と Internet Explorer の描画エンジン

Edge と Internet Explorer では完全に描画エンジンが別れています。

Internet Explorer は、Trident と呼ばれる従来からの MSHTML.dll を使用し、これまでどおり旧バージョンの Internet Explorer 向けに作成された Web コンテンツとの互換を保つためのドキュメントモードや ActiveX などをサポートします。

一方、Edge は、Trident がベースになっているものの、他のモダンブラウザーとの相互運用性を高めるための大きな変更が行われており、旧来の Internet Explorer との互換性はありません。描画エンジンは新しくつくられた EdgeHTML.dll となります。

image

 

Edge の拡張性とサポートされなくなる Internet Explorer の機能

前述したように Edge からは Internet Explorer 独自の機能は取り除かれているため、以下の機能はサポートされません。これらの機能を使用するコンテンツについては Internet Explorer 11 を使用するようにしてください。

  • ドキュメントモード
  • ActiveX
  • VBScript
  • Browser Helper Objects (BHO)
  • Vector Markup Language (VML)
  • DirectX Filters and Transitions

Edge でサポートされなくなる Internet Explorer の機能の詳細ついては以下の記事を参照してください。

 

Edge の拡張機能について

現在、Edge では拡張機能はサポートされていませんが、Flash と pdf については、Adbe 社からソースコードが提供され Edge に組み込まれているため、Flash Player や Acrobat Reader (※開発チームに確認したところ PDF ビューア―の機能はマイクロソフト製だそうです)といったプラグインを追加することなくそれらコンテンツを表示することができます。この Flash コンテンツや pdf ドキュメントを表示するための機能の更新は Windows Update で行われます。

Adobe 社との協業はこうしたものだけでなく、Edge の CSS 関連の動作にも及んでいます。これについての詳細は以下の記事をご覧ください。

また、今後は JavaScript ベースの拡張機能や、Chrome、Firefox のプラグインがそのまま動作する機能が搭載されるといわれています。

 

Web サイトを Edge に対応させるには

Edge は、Google Chrome と Apple Safari が動作する Web ページであれば仕様上支障なく動作しますので、動作といった点ではそれら Web ブラウザーに対応したものであれば既に対応しているといえるでしょう。ただし、これまで古い Internet Explorer を意識して作られている Web ページに関しては、以下の点での対応をお願いします。

  • ドキュメントモードの指定を行わない
    Edge は Internet Explorer の後方互換機能をサポートしないので、ドキュメントモードが指定されていても無視されます。
     
  • 新しい JS ライブラリ/フレームワークを使用する
    一部の古い JS ライブラリでは正しく動作しないものがあります。
     
  • ブラウザープラグインを使用しない
    ActiveX は動作しませんので使用しないでください。
     
  • CSS ベンダープレフィックスを使用しない
    IE11、Edge を含む最近のモダンブラウザーは CSS3 の基本的な機能をサポートしているので CSS ベンダープレフィックスほとんどの場合必要ありません。
     
  • ブラウザーの検出を使用しない
    Edge では Internet Explorer の条件付きコメントは動作しません。モバイルを含め、様々な Web  ブラウザーの種別とバージョンが溢れている現在、ブラウザーの種別だけで機能を変更するのはお勧めできません。Web ブラウザーの種別ではなく、機能の実装の有無を調べるようにしてください。これは、他の方法で Web ブラウザー種別を判別している場合でも同様です。

 

チェックツール

 Developer Resources : MSEdge Dev では、Web サイトについて相互運用性をチェックするツールを提供しています。これを使用して、前述の Edge 対応ポイントを確認することができます。

具体的な手順は以下のとおりです。

以下のページ内にある 「Quick-scan a site for common coding issues」とキャプションのあるテキストボックスに対象の URL を入力し、虫眼鏡ボタンをクリックするとページのスキャンが行われます。

検証結果のページの「Modern web interoperability」の項目で、以下のものすべてに ! (エクスクラメーション) マークがついていなければ Edge 対応がされているといえます。

  1. Legacy plug-ins and features (プラグイン使用の有無)
  2. Frameworks & libraries (古い JavaScript ライブラリ使用の有無)
  3. Browser Detection (ブラウザー検出)
  4. CSS Prefixes (CSS ベンダープレフィックス使用の有無)

image 

なお、このチェックツールは GitHub でソースコードが公開されており、これを使用してローカル環境に Site Scan ツールをホストすることができます。

Site Scan をローカル環境にホストするための具体的な方法については、GitHub のリポジトリ内の README.md を参照いただくか以下のドキュメントをご参照ください。

 

旧バージョンの Internet Explorer のサポート終了について

2016 年 1 月 12 日をもって、Internet Explorer は、その Windows  にインストール可能な最新のバージョンのものしかサポートされなくなります。

これによりサポート対象となるバージョンの Internet Explorer は HTML5 が動作するものだけになりますので、Web コンテンツを作成する際にレガシーブラウザを意識する必要はなくなります。

 

Edge に搭載される Windows 10 エクスペリエンス

Edge の描画エンジンは、相互運用性を重視し、他のモダンブラウザーと同様のものとなりますが、それを包む Web ブラウザーの外側の層には、Windows 10 ならではの機能が実装されています。image 

各機能の具体的な動作については、以下のリンクから動画をご覧ください。

 

Edge でサポートされる新しい API

Internet Explorer 10 から、Web 標準というくくりでの API のサポート状況については、status.modern.ie でホストされていましたが、現在は以下のページでホストされています。

image

HTML、CSS、JavaScript の API 等がリストされており、項目をクリックすることで、Edge を含む、各メジャーな Web ブラウザーのサポート状況が確認できます。

image 

ページ左のドロップダウンリストからカテゴリーやステータス (サポート状況) でフィルターをかけることができます。

ステータスの意味は以下のとおりです。

ステータス

意味

Not Currently Planned 現状対応の予定なし
Deprecated 対応しない
Under Consideration 検討中
In Development 開発中
Preview Release リリースプレビューでサポートされている
Edge Edge でサポートされている

 

Edge に実装されているすべての API を有効にするには

前述の Platform status のステータスが Edge となっていても使用できない機能がいくつかあります。このような既定で有効となっていない試験的機能を使えるようにするためには、Edge のアドレスバーに about:flags とタイプして機能の有効化画面を表示して有効化の指定を行ってください。

image

 

フィードバックとサポート

Edge は、ユーザーからの意見や提案を募り開発が続けられます。

不具合の報告や機能の提案、よくある質問については以下のページにリンクがまとめられています。

紹介されている主だったリンクは以下のとおりです。

  • Get help with a project
    Q & A サイトである StackOverflow の Internet Explorer と Edge をテーマにした開発者コミュニティのディスカッション板
  • Request a feature
    機能についての提案やリクエストをサイトです。既存の提案に対して Vote することができ、Vote 数が多い機能は搭載される可能性が高まります。
  • Report a bug
    不具合を報告するサイトです。従来からある Connect です。
  • Read the FAQ
    Edge に対して多くの人が浮かぶ疑問と、それに対する回答が記載されています。ぜひ参照することを強くお勧めします。
  • Explore documentation
    Edge についてのドキュメントへのリンクです。Edge について調べる場合は、まずこちらを参照しましょう。
  • Follow @MSEdgeDev
    開発者チームの Twitter アカウントです。ブログの新しい記事のポストや、新機能のニュースなど、いち早くツイートされるので、ぜひフォローしてください。

上記のページでは、フィードは表示されているいるもののトップページへのリンクがありませんので、開発者チームブログを紹介します。

このブログには Edge に関する最新の記事がおそらくもっとも早く投稿されます。ぜひこまめにチェックしてみてください。

 

まとめ

Internet Explorer はリリースのたびにある矛盾と向き合わなければなりませんでした。それは、新しく Web 標準に準拠し、HTML5 に代表される新しい技術をサポートすることと、これまで旧バージョンの Internet Explorer 向けに作成された Web コンテンツも支障なく動作するようにしなければならないということです。

そのため、Internet Explorer では、それまでにリリースされた旧バージョンのレンダリング ルールとそれに関連する旧機能も搭載する必要があり、プログラムは肥大し、新機能の搭載するにも旧機能がきちんと動作するように注意を払うが必要がありました。

しかし、今回このように Web ブラウザーを 2 つに別けることで、旧バージョンの Internet Explorer 向けに作られた Web コンテンツへの互換を安定的に保ち、一方で、Web 標準へのさらなる準拠、他の Web ブラウザーとの相互運用性の向上、絶え間ない新機能の搭載による進化ということが可能になりました。

これら Edge と Internet Explorer 11 という 2 つの Web ブラウザーの役割をご理解いただき、上手に使い分けを行っていただけばと思います。

image

さいごに、Window 10 が正式にリリースされて、Edge の情報も揃いつつあります。日本語の翻訳が追いついていないのは悔しい限りですが、もう少々お待ちいただければと思います。

新しい情報がまとまったらこのブログに記事を投稿したいと思いますので、お楽しみに。

また、@osamum_MS でもこまめに情報を発信していますので、ぜひフォローをお願いします。

 

 

Real Time Analytics

Clicky

Comments (10)

  1. 名無し より:

    ざっくり読みましたけどなんかいろいろとめんどくさそうですね。

    正直、IEかEdge(+互換プログラム込み)かで統一して欲しいです。

    あるいはもっと早くから、こうした取り組み出来なかったのでしょうかね。

    あれこれすみません、ですが利用者第一での開発をお願いします。

  2. ss より:

    Edge の拡張機能についてお伺いします。記事中、pdfという言葉とAdobe Reader あるいはAcrobatという言葉の使い方が私の認識と違います。

    blogs.adobe.com/…/acrobat-dc-supports-windows-10

    にもありますが、現時点でMicrosoft EdgeはAcrobat PDFプラグインをサポートしていません。

    Edgeでは、PDFの表示機能はありますが、それは少なくとも普通のAdobe Readerではありません。もしかするとAdobeがPDFレンダリングエンジンを提供しているのかもしれませんが、ほかの記事では目にしたことがなく、非常に驚いています。

    Microsoft EdgeのPDFレンダリングは、Acrobat JavaScriptもサポートされていませんせし、しおり機能やサムネイル機能もなかったように思います。もしAdobeがPDF表示機能を提供しているなら、かなり機能をそぎ落として提供しているということになるのでしょうか?

  3. >Flash Player とAdobe Reader の表記について

    ご指摘のとおりですね。

    Edge に搭載されているのは Flash コンテンツをホストする機能と pdf ドキュメントを表示する機能であり、Flash Player や Adobe Reader そのものではありません。

    修正させていただきました。

    ありがとうございました。

    >正直、IEかEdge(+互換プログラム込み)かで統一して欲しいです。

    そうですね。そのへんの経緯についてはこの記事で紹介している以下の記事と
    http://blogs.msdn.com/b/ie/archive/2015/02/26/a-break-from-the-past-the-birth-of-microsoft-s-new-web-rendering-engine.aspx
    あわせて以下の記事の「A simpler browser strategy in Windows 10」のところをご覧いただければと思います。
    http://blogs.msdn.com/b/ie/archive/2015/03/24/updates-from-the-project-spartan-developer-workshop.aspx

  4. ss より:

    >Edge に搭載されているのは Flash コンテンツをホストする機能と pdf ドキュメントを表示する機能であり、Flash >Player や Adobe Reader そのものではありません。

    Flash PlayerについてはMicrosoft Edgeに搭載されているものはAdobe Flash Playerであり、最初の記述で問題なかったように思います。Microsoft Edgeの設定画面にも、Adobe Flash Playerの設定(on/off)があります。

    ですから、FlashについてはWindows8/8.1時代のIE10やIE11と同様、Adobe社からソースコードを供給されていることは自明ですが、PDFについては、私の不勉強のためでしょうが、初耳だったもので驚いてる次第です。英文で構いません(というより、日本語よりも英語のソースを希望します。)ので、PDFビューアはAdobe社からのソースコードをもとに開発されていることについて言及しているドキュメントなどご存じありませんか?

    Microsoft Edgeに提供されているPDFビューアは非常にシンプルで、Acrobat JavaScriptをサポートしていないのはわざととしても、ズーム機能やしおり機能・サムネイル機能・総ページ数の表示や現在のページ数の表示機能もないように思われます。好きな人には好まれるでしょうが、個人的な意見では何とも中途半端なものを作ったものだという印象をいだいています。

  5. Edge の PDFビューアについて開発チームにメールで問いあわせてみたところ、実際の担当者からメールがきました。

    Edge の PDFビューア機能についてはマイクロソフト製で、Adobe さんのコードは使用していない(!)そうです。これについて公開している記事については「公開しているものはないけど、それは良いアイディアね!」だそうです。

    と、いうことで、不正確な情報をお伝えしてしまってすみませんでした。

    これから内容を修正しますね。

    また、Edge の PDFビューア機能についての ss さんのご意見をフィードバックしておきました。

    ご指摘、ありがとうございました。

  6. ss より:

    >Edge の PDFビューア機能についてはマイクロソフト製で、Adobe さんのコードは使用していない(!)そうです。

    了解しました。ご確認ありがとうございます。

    >これについて公開している記事については「公開しているものはないけど、それは良いアイディアね!」だそうです。

    日本語がよく理解できませんでした。「それ」は何を指しているのでしょうか?

    EdgeのPDFビューア機能Windows.Data.Pdf.dll?の身元?について記事にすることもa good ideaだと開発チームの方が言われたということでしょうか?

    また、本文修正されているのは確認しましたが、修正の仕方(strikeタグで打ち消されている部分)が不適切で、やっぱりおかしな文章になっていると思います。

    ┃現在、Edge では拡張機能はサポートされていませんが、

    ┃Flash と pdf については Edge に組み込まれているため、プラグインを追加することなくそれらコンテンツ

    ┃を表示することができます。

    ┃なお、FlashについてはAdobe社からソースコードを提供され、内蔵(built-in)されている形になります。

    ┃PDFビューア機能については、マイクソフト社の独自ビューアという位置づけになります。

    のような文章が正しいのではないのでしょうか?

    最後に、私の前回の投稿中、「ズーム機能がない」と書きましたが、これは不正確な表現で、メニューから表示しているPDFの拡大縮小はできるのですが、すぐに届くところにはないということと、Adobe Readerのマーキーズーム的な利用方法ができないということが、残念だなと思いました。

  7. >日本語がよく理解できませんでした。「それ」は何を指しているのでしょうか?

    Edge の PDFビューア機能について記事にすることと理解しています。

    機能についてのご要望については以下で受け付けておりますので、ぜひどうぞ。

    wpdev.uservoice.com/…/257854-microsoft-edge-developer

    また、日本からのフィードバックがかなり少ないらしいので、ぜひともよろしくお願いします。

  8. 企業内において、Edge と Internet Explorer をどのように併用していくかという記事が本家 Windows Blog に投稿されました。IT 担当者様はぜひご一読くださいませ。

    How Microsoft Edge and Internet Explorer 11 on Windows 10 work better together in the Enterprise

    blogs.windows.com/…/how-microsoft-edge-and-internet-explorer-11-on-windows-10-work-better-together-in-the-enterprise

  9. Edge に対応した Web ページの作成する際に押さえておきたいポイントについて記事を投稿しました。

    どう作る? Microsoft Edge に対応した相互運用性の高い Web コンテンツとは

    blogs.msdn.com/…/how-to-make-high-interoperability-web-contents-for-ms-edge.aspx

  10. Windows 10 Anniversary Update にて Edge の機能強化が行われました。
    詳しくは以下の記事をご覧ください。

    Windows 10 Anniversary Update における Microsoft Edge の新機能
    https://blogs.msdn.microsoft.com/osamum/2016/08/03/whats-new-feature-of-the-msedge-in-windows-10-anniversary-update/

Skip to main content