MSの新ブラウザ「Edge」、これまでのIEとの違いとは？

意外に知られていないIEのサポートポリシー

春日井良隆氏（以下、春日井）：はい、こんにちは。Microsoftの春日井と申します。

この45分は我々の新しいブラウザ、Microsoft Edgeについて皆さまにご説明をしたいと思います。

まずEdgeの話にいく前に、意外に知られていないIEのサポートポリシーのことを最初にご説明さしあげたいと思います。

IEのサポートポリシーって意外に知られてないんですが、このスライドでグレーになっているところが今日現在のIEのサポートポリシーの考え方です。

今日現在、IEのサポートはそのIEが動作するOSのライフサイクルに準拠します。つまりIE8というブラウザはWindows Vistaでも7でも動作するんですが、Vistaで動くIE8はVistaのサポートが切れる2017年4月、7で動くIE8は2020年の1月にサポートが終了する。これが今のサポートポリシーです。

ただ、これが来年の1月21日から変わるという発表が、去年の8月にされました。新しいサポートの考え方では、各OSの最新版のIEのみをサポートすることになります。例えばWindows7というOSでは、IE8、9、10、11の4つのIEのバージョンをサポートしています。これが来年の1月からはWindows 7では、最新版のIE11のみとなります。

サポートポリシーを切り替えた3つの理由

春日井：この変更の背景には大きく3つの理由があります。

1つはセキュリティ対策ですね。ご存じのとおり、インターネットの世界というのはさまざまな脅威にさらされています。いわゆる脆弱性が発見されてから、少しでも早く、迅速に対応させていただきたい、そのためによりセキュアである最新のバージョンに絞らせていただきたいというのがまず第一の理由です。

2つ目の理由は、今日お越しいただいてるほとんどの皆さまはおそらくWebを作ってらっしゃる方、あるいは設計、運用されてる方、そういう方々が多いと思いますが、例えばWindows 7でさきほどの図を思い浮かべていただくと、IEの8、9、10、11の4つのブラウザが動作していたということは、4つのブラウザでの検証というのが作業として入ると思います。

それが最新版、つまり7であれば11に絞らせていただくことによって皆さまの検証、あるいは開発するブラウザをIE11だけに絞ることができるっていうのは、検証、開発にかかる時間やコストの軽減に繋がるはずです。

（会場小さな拍手）拍手をしていただいてる方はもっと大きな拍手をしていただけるとうれしいです。（会場大きな拍手）

この動作検証に関わるリソースの軽減が2点目の理由です。

最後の理由は、特にエンジニアの方にはご同意いただけるんじゃないかと思います。Webの世界というのは日進月歩で、新しい技術、新しいAPIが考えられては、提案されて、標準化されてというのがどんどん進んでいますが、

そういったAPIをいち早く取り入れて、ブラウザで実行できるようにしたい。当然、新しいIEはより新しい最新技術に対応しています。つまり、新しい技術をWebサービスの中で使うことができます。この3点が今回のIEのサポートポリシーを変更する背景にございます。

実は使い勝手のいいWeb FontとSVG

春日井：せっかくなので、Webの最新技術をWeb FontとSVGという技術でご紹介したいと思います。

ちなみに、どちらも特別に最新というわけではありません。

SVGというフォーマット、Scalable Vector Graphicの頭文字でSVGといいますが、SVGの規格が固まったのはもう10年ぐらい前で、Web Fontも3、4年前ですかね、落ち着いたのは。どちらも実はそんなに新しい技術ではないんですが、意外に知られていないようなので、まずWeb Fontからご紹介したいと思います。

モリサワさんという日本のフォントベンダーさんがございます。「新ゴ」とか「リュウミン」とか、日本では一番有名なフォントベンダーさんだと思いますが、彼らが「TypeSquare」という、クラウドフォントという言い方をしてますけども、そのフォントのサービスを提供されています。

今ちょうど真ん中のところに、「ゴシックMB」と出てますが、ゴシックMBであるとか「新ゴM」、「リュウミン」など、さまざまなWebフォントが適用されてる例をご覧いただいています。

これはJPEGとかPNGとかのイメージデータではなく、文字データです。普通に文字データです。Webのフォントってシステムフォントをお使いになりますよね。一般的にはWindowsであればメイリオ、Macであればヒラギノをたぶんお使いになると思います。

ただ、これだけデバイスがいろいろある中で、デバイスが何だろうが同じフォントで自分たちのWebサイトのイメージを伝えたいっていうニーズはきっとあると思います。

デロンギはWeb Fontで柔らかいイメージを表現

春日井：実際にこのWeb Fontを使われている例として、デロンギさんがWeb Fontを使っています。オイルヒーターのサイトなんですが、赤ちゃんも喜ぶ温風も出さず乾燥しにくい暖房って書かれていますよね。

おそらくデロンギさんは自分たちのオイルヒーターという商品は、赤ちゃんにも優しいヒーターであるということを伝えたかったんだと思います。

で、この優しい印象のフォントをお使いになっていて、これは「新ゴ」かな？「乾燥しにくい、ワンランク上の暖かさ」というコピーやその下の本文をご覧いただくと、柔らかいイメージが伝わってくるのがおわかりいただけるかと思いますが、1つはこういうフォントデータを届けることができるという点。もう1つは、今、私の手もとにWindows Phoneがありますので、Windows Phoneで今実際にネットにつなげて、デロンギさんのサイトに行ってみます。

同じサイトをご覧いただきますと、「乾燥しにくい、ワンランク上の暖かさ」って今出てますけども、まったく同じイメージでユーザーに対して、文字情報が届いてるのがおわかりいただけるかと思います。

当然ですけども、AndroidだろうがiOSであろうが同じようにデータとして届けられるので、チラシとかブローシャーのような紙媒体であれば当たりまえのことだったんですが、そういったことももうWeb上でできるようになっています。

日本語だとちょっと重いんじゃないの？　って思われるかもしれませんが、今ご覧いただいたぐらいのパフォーマンスでご覧いただけます。まずWeb Fontの1つの例になります。

ニューヨークタイムズのロゴはSVG

続いてご紹介するのはSVG。Scalable Vector Graphicです。ニューヨークタイムズのWebサイトなんですが、ちょっと拡大してみます。

ニューヨーク・タイムズさんのロゴがあります。これが実はSVGファイルになってるんですが、Scalableなので拡大をこれぐらいしても荒れません。

ビデオとか温度の隣にあるアイコン、これはJPEGかなんかだと思いますが、あれだけ拡大するとああいうふうにぼやっとなっちゃうわけなんですけども、ロゴの方はこれだけの大きなスクリーンでご覧いただいても、キリッとした感じでご覧いただけます。

それがどうしたって思われるかもしれません。思われるかもしれませんが、今やWebを見るデバイスはスマホの4インチぐらいの画面から、場合によってはデジタルサイネージの50インチ60インチのスクリーンまであります。

実はデジタルサイネージは、ブラウザの全画面で動いてるケースって結構多いんですが、そういった場合に1つのJPEG、120×80のロゴファイルを作って、4インチのディスプレイと60インチのディスプレイでどうなるかっていうの思い浮かべてみてください。

こういったScalableなグラフィックファイルを使ってると、1つのファイルで対応できるっていうのがイメージできるんじゃないかと思います。

SVGはビッグデータのビジュアライズにも使える

春日井：もう1つがビッグデータですね。ビッグデータ時代。ビッグデータって要するにビッグなデータっていうか、データの集合体です。それを人が扱うためには、いわゆるビジュアライズしないと駄目ですし、そこが肝だと思います。

これご覧いただいてるのは、弊社のPower BIというExcel用のビッグデータ解析サービスです。Office 365をご契約の方がお使いいただけますので、powerbi.comにアクセスしてみて下さい。今ご覧頂いているのはそのPowerBIのページです。

今、57.7692っていう数字がありますが、今ちょうど数字が動きましたね。これは左上にSR 520 Bridge Trafficって書いてありますが、シアトルの520号線に橋がかかってるんですけど、そこのかかってる橋の交通情報をリアルタイムで今拾ってまして。

あのグラフは平均スピード。そこを通ってる車の平均スピードが今57.72マイル、今58マイル、ちょっとスピードが増えたっていうのがリアルタイムでご覧いただけるようになっています。

これおもしろくて、例えばcars by colorなんていうのがあるんですが、そこを通ってる車の色の種類なんですが、そんなものもこんな感じでグラフ化されて、当然ですけどリアルタイムで更新されます。

イメージしていただきたいんですが、これをビットマップのJPEGとかPNGでやってたらどうなるか。まさか裏に人がいて、Excelでグラフを作ってPNGにはき出して貼り付けてなんてやってたら、とてもじゃないですが追いつかないですよね。

SVGの場合は、完全に数値化、つまり、プログラミングされてできてます。画像の保存というのを押しますと、「スケーラブルベクターグラフィックス（*.svg）」っていうふうになってるので、SVGになってるのがおわかりいただけるかと思いますけども。

こういったいわゆるビッグデータのデータをビジュアライズする際に使うフォーマットとしても、今後SVGは出番が出てくるんじゃないかなと思っています。

あるいは製造業でCADのデータをお持ちの方であるとかそういった方々も、それをネット上でご利用いただくという場合にもご利用いただけるフォーマットになるんじゃないかということで。

SVG、これから結構使われるフォーマットになると思いますので、Web Fontと合わせて、チェックいただければなと思います。

よほどのことがない限り「IE12」は出ない

春日井：先ほどご説明したサポートポリシー、IEのサポートポリシーを変更したこの3つの理由は、実はそのまま我々、マイクロソフトという会社がEdgeという全く新しいブラウザを提供するに至った理由です。

7月の29日に提供を始めたWindows10には、EdgeとIEの2つのブラウザが搭載されます。

IEだけをあとからダウンロードしなければいけないとか、何かコントロールパネルを開いてチェックボックスを入れなければいけないということはありません。

普通にインストール、アップグレードでも結構なんですが、していただいて起動すると、両方とも入ってます。

IEに関してはバージョンは11です。この11はInternet Explorerの最後のバージョンとなります。つまり、12というバージョンは今後出ません。よほどのことがない限り。よほどのことって何かわかりませんが、よほどのことがない限りIE12は出ません。

もちろんセキュリティのアップデートは行っていきますけども、新機能であるとかあるいはHTMLの新要素であるとかそういったもののサポートはIE11に関しては行われないとご理解いただければと思います。

Microsoft EdgeとIE11の違いとは

春日井：この違いなんですが。まずレンダリングエンジンというのがあります。HTMLとかCSSを解釈して表示をするわけですが、その表示をするエンジン部分がIEとEdgeでは全く異なるものになっていまして。

IEはTridentと呼ばれるエンジン、そしてEdgeはEdgeと呼ばれるエンジンを搭載いたします。（MSHTML）とか（HTML）というのはDLLファイル。実行のファイルが実はこういう形になっているので、マニアックな方はちょっとチェックいただくといいかなと思います。

まず大きな特徴なんですが、IEは過去のIEとの互換性を重視してきたブラウザでございますので、ドキュメントモードと呼んでいる過去のIEのレンダリングルールを再現する機能が搭載されています。

IE11も同様ですので、IE5以前のレンダリングルールでレンダリングをするIE5 Quirksから最新のIE11の標準モードまで、過去のIEの互換表示というのをこの機能で補ってといいますか、搭載、実現しております。

それに対してEdgeのほうはEvergreenという言い方をしてるんですが、常にフレッシュな仕様のレンダリングを行います。

ここがまずレンダリングエンジンとしての大きな違いになります。

これは言いかえると後方互換性と相互運用性という言い方ができるんですが、後方互換性はつまり過去のIEとの互換性ですね。

実際に使われるシーンとしては、イントラネットの業務のWebシステムというところで、おそらくEdgeはいいけど、そんないきなり変えられないよ、IEで動いているんだからIEでいいよというお話があると思いますので、そういう場合はIEをお使いくださいというご提案をしています。

Edgeは相互運用性を大事にしている

Edgeのほうは、これはもうとにかく相互運用性というのは今日私、しつこくしつこく申し上げますが、英語でいうとInteroperabilityといいます。

他のブラウザ、他のプラットフォームのブラウザ、他のデバイスのブラウザ、そういったものとEdgeとが仲良くお互いに運用ができるようにすること。これをEdgeでは何よりも大切にして開発を進めております。

その相互運用性なんですが、世の中にはIEもあればFirefoxもあればSafariもあればMacのSafariもあればMacのChromeもあればEdgeもあればスマートフォンのIEもあればSafariもあればEdgeもあります。

こういう中で、それぞれのブラウザに対して何か特別なことをするってのはもう現実的ではないし、そもそもやりたくないですよね。

1つのマークアップをすればこれらのブラウザ、これらのデバイスで、等しく見られ、等しく表示されて、等しく動作をするということを我々は相互運用性と呼んでいるんですが、Edgeに関してはこの相互運用性をとにかく大切にしています。

実際にちょっとディープなお話をします。そのレンダリングエンジンというのは、大きく世の中に4つあります。

1つはWebKitという、オープンソースで提供されていますので、非常に多くの、Safariがそうですし、あとAdobeさんのツールも確かWebKitを使うケースが結構多いんですけども、広く使われてるWebKitというレンダリングエンジンがあり、そこから枝分かれしたChromeのBlinkというレンダリングエンジンがございます。

FirefoxはGeckoというレンダリングエンジンを提供していまして、IEはTridentというレンダリングエンジンを提供していました。

このまるは、それぞれのレンダリングエンジンがどのような相互関係にあるのかというのを示したものなんですが。要するに機能的に被ってるところもあれば被っていないところもあるっていうのをお伝えしたいのがこの部分になります。

IE固有の機能、22万行のソースコードを削除

春日井：今回、Edgeというレンダリングエンジンの開発にあたって、まず行ったことはIE固有の機能を取り去るということです。

これがソースコードにすると22万行ほどだったそうなんですが、22万行のソースコード、IEに固有の機能というのを削除いたしました。何を削ったかはあとでご紹介します。

次に行ったのは、それまでIEがサポートしていなかったGecko、Blink、WebKitと互換のある部分のソースコードを追加しました。これはソースコードでいうと30万行ほどだそうです。

つまり削った部分と、もともと互換性があった部分と、新たに相互運用性を追加した部分、これがEdgeというレンダリングエンジンの実体といいますか、イメージとしてはこういうような形になっております。

次が後方互換性ですね。Edgeはとにかく相互運用性、Interoperabilityというところを強調しておりますが、IEは後方互換性、Compatibilityというところを大切にしていきます。

互換性に関してお伝えしたい機能は2つです。1つは先ほど申し上げたドキュメントモードと呼ばれるモードで、これはIEのレンダリングルールを切り替える仕組みです。

実際にどうやって切り替えてるかというと、ツールメニューの互換表示設定とF12開発者ツールというのは、ユーザー側が行う変更ですね。

一般的にわざわざユーザーがこれを変えるというケースはあんまりありませんので、ほとんどの場合は提供する側、Webを提供する側がドキュメントモードを指定されることになると思いますが、その場合はMetaタグのX-UA-Compatibleというのを使います。

実際にIEで。今一瞬、私の検索エンジンのデフォルトがGoogleになってるのがばれてしまいましたが、そういうことはつぶやかないでくださいね。明日会社に来られなくなっちゃいます。

（会場笑）

エンジニアやWebマスターに便利な「F12開発ツール」

春日井：こちらにエミュレーションというところで、ドキュメントモードというところがございます。

今、Microsoftのトップページはさすがにドキュメントモード、IE11でちゃんとレンダリングされるようにという形の表示になってるんですが、実際に何をもってこの指定をしてるかといいますと。

Metaタグの中にヘッダーの中のMetaタグでX-UA-Compatible content IE = edgeというのが指定されていますが、この指定をWebページの中で行っているので、ドキュメントモードはIE11でレンダリングするようにという形の指定がされています。

実はMicrosoftのサイトをいろいろ見ると、こうなっていないページがちらほら。実はFESTのサイトがそうなっていたので、関係者に「早く直せ」って言ったんですが、Microsoftのサイトもちょっと見ていただくとおもしろいことが発見できるかもしれません。

ちなみに今出したこのツールは「F12開発者ツール」。エンジニアの方、開発する方がお使いいただくツールとしてご提供している機能になります。

ただ、エンジニアの方だけではなくて、普通のWebマスターの方とか情シスの方にも使い勝手がいいので、ちょっとご紹介をしたいと思います。

例えば、今左のDOM ExplorerというところはHTMLの構造を、階層をご覧いただいてるような感じになっておりますが、例えばこのボディタグにあてられてるCSSのプロパティがこんな感じで、右下に出てまいります。

例えばわかりやすいところで、background-colorというのがあります。今、このFで数字があたっていますが、例えばaquaとか勝手に変えちゃうとか。勝手に変えちゃうじゃないですね。

実際変えたらどうなるか。azure色に今日は染めてやろうみたいな感じのことをするとどうなるかというのはシミュレーションが、例えば簡単にこんな感じで組むことができるようになっています。

レイアウトに関しても同様に、PaddingとかBorderとかMarginとか、2ピクセル設定するとどうなるかって頭でイメージするにはなかなか大変だと思いますが。

これも例えばPaddingのところを30ピクセルちょっと下げてあげようみたいな感じで、30じゃなくてここは20？　とかそういうようなシミュレーションも、この中で組んでいただくことができるようになっています。

あとは文字を例えば変更する場合も、例えばここ、「ご用意しています」の「す」だけがこの解像度で見ると改行されちゃってちょっとみっともないから、文字数を何か調整したいなんていうケースがあるんじゃないかと思います。

そういう場合にここの要素をクリックしますと、こちらにその文字が出てきますので、「無料アプリ、有料アプリ」っていうところを中黒にしてしまえばいいんじゃないか。ちょっとWindowsストアの担当者に怒られそうですけど。

そうするとじゃあきっちり納まったから、この文章でいこうみたいな感じのシミュレーションもしていただくことができるようになっています。

その他、デバッグを行ったりとかネットワーク、あるいはそのパフォーマンス、メモリの占有がどうなってるかっていうようなプロファイルを取ったりするような機能もありますので、この辺りはぜひエンジニアの方、お使いいただきたい機能であります。

このエミュレーションのところは、例えばPCの場合っていうのはほとんどGPSが付いていません。

ただスマホ向けのサービスってGPSでどこに表示されるかみたいなケースって結構あるかと思いますが、そういったGPSのシミュレーション。緯度経度入力いただくと、その緯度経度にバシッといくような感じのシミュレーションをしてくれます。

あるいは解像度が800×400でレンダリングされるとどう表示されるのか。実は弊社のサイト、レスポンシブになってるので、ちゃんとそれ用になってるなっていうのがご確認いただけるようになっていますが、

1280×768だとこう、2560×1440だとこうだというような解像度のレンダリングのシミュレーションも、この開発ツールの中で行っていただくことができるようになっています。

非常に使い勝手のいいツールですので、何か難しそうだなと思わずに、ぜひお使いいただけるとうれしいです。

過去のIEをシミュレートできるエンタープライズモード

春日井：互換に関しては、まずこの1つがドキュメントモードですね。もう1つの機能がエンタープライズモードと呼ばれる機能で、これはIE11でありながら、あたかもIE8であるかのようにふるまう、エミュレートをするというのがこのエンタープライズモードという機能です。

実際にはActiveXの挙動がIE8互換になるとか、IE8、9、10、11の中で廃止された機能があるんですが、それが使えるようになるとか、そういったIE11でIE8をエミュレートする仕組みになっています。

特にこれは情報システム部門の方が自分の会社の中の制御を行うというケースがほとんどだと思いますが、1つはグループポリシーでその辺りの設定ができます。

あるいはレジストリを書いてあげて管理してあげるという形になりますが、いずれもXMLでここのURL、ここのドメインはエンタープライズモード、ここはそうではないというような指定をしていただくんですが、

もちろん直打ちいただいても結構なんですが、Enterprise Mode Site List Managerというツールを我々から無償で提供しています。この辺りをご紹介させてください。エンタープライズモードの前に、せっかくだからグループポリシーご覧いただきましょう。

エンタープライズモードを管理できるツールも提供

春日井：管理用テンプレートのWindowsコンポーネントにInternet Explorer。これが要はIEをグループポリシーでコントロールできる項目一覧なんですが、ここの中に、「メニューからエンタープライズモードを有効にして使用できるようにする」というところがありますけども。

これを使って有効にしていただくことが、エンタープライズモードを組織内全部に対してオンにするということができるようになります。

ちなみにグループポリシーはEdgeのほうもいくつか対応が始まっておりまして、今この辺りの項目を、Edgeをグルーポリシーでコントロールすることができるようになっています。

「全てのイントラネットトラフィックをIEに送る」というのがありますが、この直後に出てきますけども、このサイトに関してはEdgeではなくてIEで開くというような指定も、グループポリシーで指定していただくことができるようになっています。

もう1つがEnterprise Site List Managerですね。実はこのスライドを作っていたときからささやかなアップデートがありまして、アップデートした部分をご説明する前にまずうちのWebサイトのURLをコピーします。

AddというところでURLを指定します。こちらご覧いただきますと、サブドメインに分かれてるのがご覧いただけると思いますが、MS.comに関しては例えばIE11のドキュメントモードで開く。

ja-jpという下のディレクトリに関しては、エンタープライズモードで開くというような、細かい指定もこの中でできるようになっているほか。

アップデートで「Open in IE」を追加

春日井：ここの、実はアップデートがあったというのはOpen in IEというのがこちらにございますが、このOpen in IEというアイテムが、機能が今回追加されまして。このURL、ドメインはIEで開くという指定もこの中でできるようになりました。

例えばMS.comはデフォルトモードだけど、ja-jpはIE8でエンタープライズモードで。もちろんこんなふうにはやってほしくないですが、仮にこうしたとします。

ファイルメニューでSave to XMLというのがありますので、これでデスクトップにサンプルとしてちょっと保存します。保存するとXMLファイルができます。

今までだったらメモ帳を開くところですが、最近、Visual Studio Codeという非常にライトで軽量なテキストエディタがでましたので、そいつで開きます。ちなみにこのVisual Studio Codeは無料です。Windows版はもちろんですが、Mac版やLinux版もあります。

今のSite List managerで、ここはデフォルトでIE11で開く。ここはエンタープライズモードで開くという指定をXMLの中でしているのがおわかりいただけるかと思います。

これ参考にしていただいて、手打ちしていただいても結構ですし、URLを全部Site list Managerを使っていただいてこのXMLを作っていただく。

どちらでも結構なんですが、非常に使い勝手のいいツールになっていますので、ぜひこちらのEnterprise Site List Managerもご利用いただくとより効率的にエンタープライズモードの指定がしていただけるかなと思います。

IEで開くときなんですが、実はこの2種類があります。左側はIEがいいですよっていうちょっと控え目な感じ。

右側はこれはIEで開けっていうちょっと命令的な感じになっておりまして、左はCVリスト、互換リストで指定をしまして、右は今ご覧いただいたグルーポリシーで指定をしていただくような形になっています。

右上に「今後このサイトを自動的にIEで開く」というチェックボックスがありますが、あのチェックボックスを開いておくと、例えばメールに入ってきたURLをクリックしたときにパコッと開くのがデフォルトでEdgeを選んでいても、IEが開くというような指定をしていただくことができるようになっております。

あれが今、Enterprise Site List ManagerのOpen in IEというところで制御できるような項目でもありますので、こちらも合わせてご覧いただければと思います。

FEST2015の公式イベントレポートはこちら