Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Microsoft Edge(旧Project Spartan)概説(Windows 10 January Preview Build)

Microsoft Edge(旧Project Spartan)概説(Windows 10 January Preview Build)

Windows 10に搭載される新ブラウザー“Microsoft Edge(旧Spartan)”とは?(Web制作者視点)

2015年1月27日

Spartanとは何か? IEはどうなるのか? Web制作への影響は? また、これらの疑問の鍵を握る「レンダリングエンジン」についてもまとめる。

デジタルアドバンテージ 一色 政彦
  • このエントリーをはてなブックマークに追加

 「Windows 10 技術プレビュー(Technical Preview) 2015年1月版(日本語、ビルド9926)」(以降、Windows 10 TP)が、1月24日ごろに公開された。その発表イベントの中で「Windows 7/8/8.1やWindows Phone 8.1などからWindows 10へのアップグレードが発売から1年は無料」と発表されたことが、大きな話題となっている。このキャンペーンにより、エンドユーザーのWindows OS環境が、その1年で一気にWindows 10に最新化される可能性があるだろう。実際にそうなれば、Windowsアプリを作るデベロッパーや、Webサイトを制作するエンジニアにとっては、最新テクノロジが使いやすくなるわけで、非常に重要で注目すべきWindowsのバージョンとなりそうである。

 そんなWindows 10では、Webエンジニアにとってはさらに大きな動きがある。すでに各所のニュースで話題になったが、Internet Explorer(IE)ではない、完全に新しいWebブラウザー“Project Spartan”(コード名。読み:スパルタン。正式名称は「Microsoft Edge」。以降、Spartan)がWindows 10に搭載されることになった(ローマ数字で「10」は「X」なので、『スパルタンX』というダジャレになっているのだろうか……!? ※2016/10/05追記: 「スパルタン」とは、ゲーム「HALO」シリーズに登場する超兵士計画のことらしい)。このため、ユーザー環境が(前述の通り)Windows 10化していけば、従来のIEの利用者が減り、新しいSpartanのユーザーが増えていく可能性があるのだ。

 では、一体Spartanとはどのようなもので、IEとどう違うのか? Webブラウザーとしての機能や、レンダリングエンジンはどうなるのか? 既存のWebサイトや今後のWeb制作は影響を受けないのか? そういったWeb制作者の視点で、Spartanの内容をレポートしよう。

  • Windows 10 TPには、Spartan自体はインストールされていない(後述するレンダリングエンジンは搭載されている)。そのため、本稿のSpartanのUI(ユーザーインターフェイス)画像は、全て「Windows 10: The Next Chapter(イベント、英語)」や「Windows Insider Program(解説、英語)」など、マイクロソフト公式の動画をスクリーンキャプチャしたものである。
  • 本稿の内容は、執筆時点のプレビュー版の情報である(しかも一部の機能は、動かして試したわけではなく、公開されている情報をまとめたものである)。正式版では変更される可能性があることをご了承いただきたい。

 ※2016/10/05追記: 本稿はプレビュー段階の新機能を紹介した記事である。2016年10月最新のMicrosoft Edge情報はこちらを参照してほしい。 また、2015年6月13日にカンファレンス「Build Insider OFFLINE 第3回 ― Microsoft Edge」を実施したが、そのスライドと動画を以下に掲載しておく。

第3回 Build Insider OFFLINE: Microsoft Edge スペシャル

マイクロソフトの Web ブラウザの今までとこれから ~くるよ!Microsoft Edge !!~(日本マイクロソフト株式会社 デベロッパー エバンジェリズム統括本部 エバンジェリスト 春日井 良隆)

「マイクロソフトの Web ブラウザの今までとこれから ~くるよ!Microsoft Edge !!~」のスライド

「マイクロソフトの Web ブラウザの今までとこれから ~くるよ!Microsoft Edge !!~」の動画

for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI(日本マイクロソフト株式会社 デベロッパー エバンジェリズム統括本部 Webエバンジェリスト 物江 修)

「for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI」のスライド

「for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI」の動画

Windows 10 時代の Web 開発者デバッグ手法(Microsoft MVP for Internet Explorer、株式会社ネクストスケープ 尾崎 義尚)

「Windows 10 時代の Web 開発者デバッグ手法」のスライド

「Windows 10 時代の Web 開発者デバッグ手法」の動画

Spartanの概要

 それでは、まずはSpartan自体について説明しよう。

Spartanとは

 Spartanは、Windows 10向けに設計された新ブラウザーだ。PCからスマートフォンまでの全てのWindows 10デバイスで動作し(図1)、デスクトップ上のマウスやキーボードは当然として、タッチ、ジェスチャ、音声、コントローラー、センサーなど、さまざまな方法で利用できる。

図1 Windows 10デバイスファミリーで動作するSpartan(左:スマートフォン、右:PC)

 Spartanの重要な特徴は、下記の4点だ。

  • 常に最新版: 新機能へのアップデートや、セキュリティ/パフォーマンスの改善をアップデートサービスとして提供。Web制作者にとっては、(Chromeの場合と同じように)古いバージョンを気にする必要がなくなる。
  • モダンWebとの高い親和性: 最新のWeb標準のマークアップでWebページを描画できる新レンダリングエンジン(詳細後述)が採用されており、モダンなWebサイトを実現できる。
  • 既存サイトの表示の互換性: 既定では新エンジンが使われるが、IE向けにデザインされた既存の企業Webサイトなどで必要な場合は、IE11エンジン(後述)をロードすることもできる。
  • クロスプラットフォーム: 前述の通り、同じブラウザーが各デバイスで動作する。これを実現するため、IE独自機能を排除できるよう既存のIEから切り離されて、新ブラウザーとして作成された。

Internet Explorerとの違い

 実はWindows 10では、(Spartanが標準ブラウザーとなる可能性が高いが)従来のIEも引き続き提供される(ちなみにWindows 10 TPでは、バージョン名は「IE11」のままだった)。例えばカスタムActiveXコントロールBrowser Helper Objectsなど、昔のIE独自技術を使っている場合は、Spartanではなく、IEそのものを使う必要がある(前述の「IE11エンジン」だけでは、これらの旧技術には対応できず、IE本体が必要らしい)。このためIEは、Windows 10でも利用可能になるというわけだ。

 ちなみにWindows 10のIEは、Spartanと同じレンダリングエンジン(詳細後述)が採用される予定である。

Spartanに特徴的な機能

 Spartanが持つ特徴的な主要機能を3つ、簡単に紹介しよう。

1. Webページへのメモ書き

 Webページ上にコメントを手書きしたり、キーボード入力でメモを挿入したりできる(図2)。

図2 Webページへのメモ書き

 メモしたWebページの内容は、メールなどでシェアしたり、Evernoteに保存したりできる(図3)。

図3 メモ書きのシェア
2. 読書モード

 広告や特殊なレイアウトなどの理由でWebページが読みにくい場合がたまにあるだろう(図4)。こういったとき、読書モードに切り替えれば、ムダな要素が省かれてすっきりとした表示になる(図5)。

図4 通常のWebページ表示
図5 Spartanの読書モード
3. Cortanaの統合

 「スマホがデジタルな個人秘書になる『Cortana』を試そう!」という記事に書いたように、Windows Phone 8.1でデジタル・パーソナル・アシスタント機能(=iOSのSiriと同じような機能)が搭載されたが、これがWindows 10にも搭載され、Spartanにもその機能が統合される予定である。

図6 SpartanでCortanaをオン

 図6のようにブラウザーの右上でCortanaをオンにできる。その状態で、アドレスバーに知りたいこと(図7の例では「weather(天気)」)を入力すると、個人の情報に基づいて適切な情報が、アドレスバーのリスト部分に表示される。

図7 アドレスバーのリスト部分にCortanaの反応が表示される

 マウスの右クリックメニューから、Cortanaにオンライン検索させたりするようなこともできる(図8)。

図8 Cortanaにオンライン検索をさせることもできる
Spartanの基本的な機能

 上記以外にも、SpartanならではのUI機能もある。例えばPC上のSpartanでは、タブ部分にマウスカーソルを乗せると、その下に該当タブのページプレビューが表示されたり(図9の上)、左上のタブリストボタンをクリックすると全てのタブのプレビューが一覧表示できたりする(図9の下)。これは、複数のタブを開いている場合に、適切なタブを探しやすくする機能である。

図9 個別タブのプレビュー表示(上)/全タブのプレビュー一覧(下)

Spartanの拡張機能について

 拡張機能については、公式な情報がないので明確な内容は記載できないが、「Chrome拡張に近い仕組みが搭載される」といううわさがある(さらには、「Chrome拡張そのものが使える」といううわさもある)。いずれにしても、SpartanにはIEよりも手軽な拡張機能が搭載されることは間違いないだろう。

Spartanのレンダリングエンジン

 ここからはSpartanのレンダリングエンジンについて詳しく説明していこう。

デュアル・レンダリング・エンジン

 Spartanのデフォルトのレンダリングエンジンは、「EdgeHTML」と呼ばれる新エンジンになる。このエンジンは、すでに説明した通り「Web標準を採用するモダンWebサイトと親和性が高い」といった特徴がある。

 また、(上では「IE11エンジン」と表記した)従来からある「MSHTML」エンジン(=Trident)もサブエンジンとして搭載されている。この2つのエンジンを合わせ、「デュアル・レンダリング・エンジン」と呼ばれる(ちなみにこの2つのエンジンは、前述したように、Windows 10のIEと共通だ)。

図10 Spartanのデュアル・レンダリング・エンジン

ちなみに、物理的なファイル名は「.dll」を付けた「edgehtml.dll」と「mshtml.dll」になる。筆者が調べたところ、Windows 10 TPの新エンジンは「C:\Program Files\Internet Explorer\EdgeCP\edgehtml.dll」に存在した。

EdgeHTMLレンダリングエンジン

 IEのレンダリングエンジン(MSHTML)といえば、Tridentである。では、「Spartanのエンジン(EdgeHTML)は、Tridentの最新版なのか」というと、そうではなくTridentをフォークした別のモノになる。

 EdgeHTMLは、Tridentの資産の大半を継承しつつも、IEに特有の過去資産やクロスプラットフォーム化に不要な部分を削り落としている。具体的には、以下のようなものがEdgeHTMLには含まれていない。

  • ドキュメントモード: これに関連して「EmulateIE8モード」や「X-UA-Compatibleヘッダー」なども廃止されている。
  • VBScript
  • その他、IE独自のもの: attachEventやcurrentStyleなど。

 EdgeHTMLは、最新のWeb標準に順次対応していく予定で、その状況とロードマップは「modern.IE」サイト上に掲載される予定だ。

 ちなみに、IE9から導入されたJavaScriptエンジンのChakraは、Spartanでも使われている。F12開発者ツールの更新版もSpartanに搭載される見込みだ。

【コラム】EdgeHTMLレンダリングエンジンを試そう

 「EdgeHTMLエンジンで、自作のサイトがどのように表示されるのか、なるべく早く調べたい」というニーズはあるだろう。Windows 10 TPでは、Spartanに搭載予定のEdgeHTMLエンジンを、IE11上で試用するためのオプションが用意されているので、ここでその設定方法を紹介しておこう。

 まずは、Windows 10 TPをダウンロードして、任意の仮想マシンなどにインストールする(もしくはRemoteIEを使ってもよい)。

 次に、図10とその下の説明を参考に、EdgeHTMLエンジンを有効化する。

図11 EdgeHTMLエンジンの有効化(Windows 10 TPのIE11)

(1)Windows 10 TP上で「Internet Explorer」(IE11)を起動し、アドレスバーに「about:flags」と入力する。
(2)[Enable Experimental Web Platform Features]欄の[Enabled]ラジオボタンにチェックを入れる。
(3)[Apply Changes]ボタンをクリックして、最後にIE11を再起動する

 これでEdgeHTMLエンジンが使われるようになった。あとは試したいサイトをブラウザーで開いてみてほしい。

 ちなみに筆者の環境では、ユーザー エージェント文字列が下記のようにレンダリングエンジンごとに違った。

  • MSHTMLエンジン: Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; .NET4.0E; .NET4.0C; Tablet PC 2.0; rv:11.0) like Gecko
  • EdgeHTMLエンジン: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

 EdgeHTMLとMSHTMLの違いを体感したい場合は、「modern.IE」の実装状況とロードマップに関するページを開いて、「Preview Release」となっている機能を試すとよい。例えばEdgeHTMLで対応済みのHTTP Live Streaming機能を試すために、「Apple HTTP Live Streaming (HLS) demos - Walter Ebert」というページを閲覧すると、EdgeHTMLとMSHTMLでレンダリングに違いが出る。

MSHTMLレンダリングエンジン

 イントラ内の企業Webサイトがエンタープライズモードを有効にしている場合に、MSHTMLエンジン(Trident)が用いられる。

 なお、IE 8で導入された「バージョン別のドキュメントモード」は、IE 11以降では非推奨とされ、今は常に最新(Edge)モードでページが描画(=レンダリング)されることが基本となっている(詳しくは「Web制作者は注意! Internet Explorer 11で変更された『互換性』」を参照)。よって、既存のサイトがドキュメントモードに依存している場合は、なるべく早く最新のWeb標準に移行することが推奨される。

 まとめると、今年中に到来するWindows 10時代では、SpartanとIEで標準のレンダリングエンジンが変わり、しかも企業サイト以外では基本的にSpartanを使うことになりそうだ。Spartan自体はまだ試せないが、それに搭載予定のレンダリングエンジンはすでに試せるので、自作サイトの挙動を早めに確認したい場合は、EdgeHTMLエンジンを動かしてみてほしい。

 実際に試して何か気付く点があった場合、マイクロソフトは、

受け付けているので、その内容をぜひ送ってみるとよいだろう。

サイトからのお知らせ

Twitterでつぶやこう!