Microsoft Edgeってどうなの？　IT業界をリードする人のための最新“ブラウザ戦略”

IEのままじゃダメなの？

太田卓也氏（以下、太田）：こんにちは。日本マイクロソフトの太田と申します。よろしくお願いします。

遠藤梨花氏（以下、遠藤）：同じく日本マイクロソフトの遠藤と申します。よろしくお願いいたします。

太田：では早速、本セッションを始めさせていただきます。「IEのままじゃダメなの？　～Microsoft Edgeのメリットと、これからを見据えたWebシステム運用のテクニック～」ということで、お話を進めさせていただきたいと思います。

本セッションではアジェンダといたしまして、3章に分けてお話を進めさせていただきます。それぞれ15分から20分程度です。第1章では「現在のWebの動向」。第2章では、「Microsoft Edgeってどうなの？」というところ。そして3章では「これからを見据えたWebシステム運用のテクニック」ということで、EdgeとIEの使い分けを、デモを交えて説明させていただきたいと思います。

本セッションで目指していることいたしましては、みなさんにIT HeroとしてWebの世界もリードしていただく。そして可能であれば、Microsoft Edgeをお試しいただきたいというところがございます。

では最初に、会場に来ていただいたみなさまにご質問させていただきたいのですが、このなかで、ITプロ、もしくはインフラ管理者というかたちで、非Web開発者の方はどれぐらいいらっしゃいますか？

（会場挙手）

けっこういますね。ありがとうございます。逆に普段はWebの開発をメインでやられている方は、どれぐらいいらっしゃいますか？

（会場挙手）

けっこういらっしゃいますね。ありがとうございます。

今回はどちらかというと、インフラの管理者や、ITプロ向けというところを強く意識しています。そちらをメインで話すんですが、非開発者の方に関しては、インフラのエンジニアがどういったところを見ているかというところを参考にしていただければと思います。

右肩下がりのIEのシェア率

では早速、最初の「現在のWeb動向」というところを説明させていただきます。

まず最初に紹介させていただきますのが、この9.8パーセントという数値です。これはなんの数値を示しているのでしょうか？　

PCのブラウザにおけるIEのシェア率、今、現在9.8パーセントという数値になります。

こちらのグラフ、下が2009年から2016年。縦率がシェアを示しているのですが、IEのシェアはこの水色のラインになっています。2000年代前半では、IEのシェア率は90パーセントを超えていました。そして現在では9.8パーセントというところまで下がっています。

一方、グリーンのラインはChromeを示していまして、Chromeが着々とシェア率を伸ばしているということになります。

そして次のグラフに移りまして、こちらはいわゆるコンシューマーが所有しているPC、コンピューターにおけるベンダーのシェア率を表しています。同じく横の軸が2000年代から2016年というところで、縦の軸がパーセンテージを示しています。

水色の部分がMicrosoftを表していまして、一番下の濃いグレーの部分がApple、そしてグリーンの部分がGoogleのシェア率となっています。

2000年代当初から2005年ぐらいまでは家庭内におけるコンピュータの割合で、Microsoftは、ほぼ95パーセントというシェアを占めていました。ですが2005年、2006年あたりから徐々にAppleやGoogleがシェア率を伸ばしているところがあります。

これはみなさん、薄々気づいているところもあるかもしれませんが、いわゆるモバイルデバイスの爆発的な普及ですね。

AppleのiPhoneが、2007年に発表されてから、2008年で日本市場にも出てきたんですけれど、そして、それが爆発的に普及しまして、PCのシェア率はこのように変化してきました。そして、これらはモバイルだけにとどまらず、タブレットやIoTデバイス、そういったところにまで発展していってます。

変化し続けてきたWebシステム

では実際に、ここで基本的なWebシステムというところでおさらいをさせていただければと思います。

まずモバイルデバイスが出る前、インターネットの誕生から2000年代後半、いわゆるスマートフォンが出る前までですが、こちらのようにクライアントサイドではPCがありまして、サーバーサイドではWebサーバがあると。そしてPC上のWebサーバーでインターネットをするというのが基本的な構造になります。

クライアントからはHTTPでリクエストを送りまして、それに応じてサーバーが処理をする。そしてページを返す。クライアントは表示するだけという一般的な構図になります。

さらに、ここで発展しましてQuery stringやformといったようなパラメータを付けてクライアントが送ることによって、それに対してサーバー側が処理を行う。そしてページを受け取るというかたちで、いわゆるWebアプリケーションサーバというものが主流になりました。これが大体2000年代からスマートフォンが出るまでの主流な技術になります。

次にスマートデバイスが出てどのように変わったかと言いますと、まずクライアントサイドはTablet、Phoneというかたちですが、ここはWebブラウザでは変わりはありません。

そしてHTTPのリクエストを送りますと、それに対してサーバーはHTMLファイルを送るんですが、いわゆるHTMLファイルのCSS3の技術を使って、画面サイズに応じてページのデザインを調整するというのを動的に行うようになりました。

これがレスポンシブWebデザインと言われております。これによりサーバー側がいくつもHTMLファイルを用意する必要はなくて、動的に画面サイズに応じて表示を行うことができるようになります。

さらには、モダンなWebシステムというところで、近年の変化がございます。これは後ほど説明しますが、今までブラウザだったものがSPAであったり、アプリケーションがWebのデータを使うという時代が来ています。モダンWebシステムと言われています。

クライアントがHTTPのリクエストを送ると、サーバーはどちらかというと、データベースとかの情報を処理してデータを送るようになります。いわゆるJSON、XML、そういったもののデータを送って、クライアントの方でコンテンツの組み立てをするというような動きに変わります。

これは、やはりクライアントの方のデバイスが高速化した、あとはブラウザの方が高速化したというところから、クライアント側でも早い処理が可能になりまして、こういったような分散で処理をするようなものが出てきております。

ギャップを埋める“IT Hero”になるために

このように、Webシステムは速いスピードで変化をしています。このようにクライアントが多様化していったり、新しいWeb技術が出てきたり、そして今では新たなワークスタイルというかたちで、外出先から使いたいとか、家からテレワークをしたいといったようなニーズに答えるようなものがどんどん出てきています。

ですが一方で、企業のシステムというのは、なかなか変化が難しいものがありまして、この間にギャップがあるということが、今のWebシステムのインフラの課題だと思います。

そこで、やはりこのギャップを埋めるために、よりこの世の中を便利にしたり、使いやすい環境作るために、みなさんにIT Heroとなっていただきたいということが1つあります。

僕自身もインフラをやっていましたので、こういうふうなメッセージになっているのですが、Webの開発者だけで「新しい技術を取り入れていこう」と言っても無理があります。それ以上にWebの世界は広いですし、変化も早い状況になっています。

そこで、インフラの技術とか普段はWebを専門にやっていないITエンジニアであっても、ウェブの技術をしっかり学んで、現在のインフラにどう活かせるかとか、どう活用していくかというところをリードしていく必要があると思います。

そのためにITプロも、トレンドだったり、キャッチアップをしっかりして、ウェブの流行がどんなものなのか。いろんな流行りの技術が出るけれど、それをどう活かしていくのか。そして、それで本当になにができるのかということを正確に把握していく必要があると思います。

インフラ技術者も抑えておきたいキーワード

そういったところから次は、「Webのインフラ技術者も押さえておきたいキーワード」ということで少し解説をさせていただきます。すでにご存知の単語もあるかもしれませんが、お付き合いください。

まず最初は「W3C/Web標準」という単語です。W3Cというのはウェブの技術の標準化を進める団体になります。そして、その団体で決められた規格がWeb標準という規格になります。

以前のインターネット、Webの世界では、各メーカー、製品とかで、独自の機能を入れて、けっこう好き放題やっている時代がありました。ですが、現在さまざまなOSが使われたり、さまざまなブラウザ、デバイスが使われている状況ですと、やはりどこかで標準化しないと使う側が困ってしまうという現状があります。

そこで、このW3C/Web標準というものが注目されるようになりまして、各メーカーはWeb標準に沿ったことをしようとしています。このWeb標準、これからもセッションのなかで出てきますので、ひとつ押さえていただければと思います。

次は「プラグインフリー」という単語ですね。スマートフォンが出るまでの世代は、ブラウザのなかでただページを表示するだけであって、それ以上のことはできませんでした。それ以上のことをやりたい場合には、いわゆるプラグインと呼ばれるものを追加機能として追加して、それによって機能を拡張していました。

いわゆるFlash Playerや、Silverlight、そういったものをみなさんお使いかと思いますが、それらは、どちらかというとOSのプログラムを使ってブラウザの機能を拡張していくというものになります。

ですが、やはりOSに依存しているためにプラグインというのは、使うことが難しくなってきました。そこで、一番下にある「HTML5」や、エクステンションと呼ばれるプラグインの機能ではなくて、HTMLとJavaScriptを組み合わせて、ブラウザの機能を拡張していくということが主流になっています。

そして一番下の段、HTML5。よく聞く単語だと思います。こちらは一番上に出ました、W3Cが2014年に今後の標準化技術として勧告した、標準規格になります。

Webの世界は1990年に、HTMLの4点代が標準規格になってから、ほぼ10年ぐらいあまり変化がなかった状態になります。そこで、動画を閲覧とか、リアルタイムコミュニケーション、あとは3Dのゲーム、そういったものは、プラグインを使ってやることが当たり前になってたんですが、いわゆるHTML5の技術ですべて吸収できるようになりました。

そしてHTML5を使うことで、多彩な表現ができるというところで、ここでいったん、体験ということでデモをさせていただければと思います。

HTML5のブラウザの中に閉じないデモ

遠藤：それでは私からHTML5についてご紹介いたします。従来のHTMLは単純にWebページのドキュメントを書くためだけのものでした。しかし、HTML5では、その後の仕様の変化に従って、アプリケーションプラットフォームとしての仕様が盛り込まれています。

さらに、その仕様で定義をされた機能の範囲はブラウザ内にとどまらず、ストレージやネットワーク、センサーやデバイスなど多岐にわたります。

今回は、その一例として、HTML5で用意をされたAPIの一部について、動作をご覧いただきます。

こちらは今回のために用意をしたサンプルです。このサンプルはHTMLとCSS、JavaScriptのみでできています。

このアプリケーションは、サーバー上のデータと連携してデータの更新があると、それを通知する機能があるとします。従来のブラウザでは、このように画面の中に警告を出したり、ポップアップを表示する方法をとっていました。

しかし、HTML5のWeb Notification APIを使うと、ブラウザの外に飛び出し、システムに通知を送ることができます。Web Notification APIは、これまでネイティブアプリにしか実現できなかったシステムへのプッシュ通知を実現できます。

これによって、このように画面を最小化していても、例えば別のウィンドウを表示していても、ブラウザの状態に関係なく、ユーザーは通知を受け取ることができます。

さらに、HTML5のSpeech APIを使うと、（音声）「PRD005のセッションに「とても満足！」を頂きました！」。音声読み上げ機能を利用して画面を見ていなくても、ユーザーは通知を受け取ることができます。

HTML5はアクセシビリティの向上も図られています。また、これらの技術はJavaScriptのみで簡単に実装できます。実際に先ほどのプッシュ通知と音声読み上げ機能を実現しているのは、こちらの数行のコードです。これがHTML5のブラウザの中に閉じない、アプリケーションプラットフォームとしての機能です。

太田：ありがとうございます。どうしても最近モバイルとかを使っていると、ホーム画面にプッシュ通知を出したり、あとはIoTだったり、WoT、“Web of Things”なんて言い方もしますが、そういった状況ですと、例えば操作している人が手で触れない状況や、画面を見られない状況も想定して、こういった機能がどんどん追加されています。

Web開発案件で出てくるかもしれないキーワード

もう1つだけ、技術の解説をさせてください。一般的にインフラの開発者ですと、なかなかWeの開発の技術では知らない単語もあったりするんですが、ここでは簡単に3つほど、最近よく使われる単語を解説させていただければと思います。

1つ目が、「JavaScriptフレームワーク」ですね。jQueryなんて言葉を単語としてよく聞いたりすると思うんですけど、いろいろあってなかなかわかりづらい部分があると思います。

これは、JavaScriptでよく使われる機能をパッケージ化して簡単に利用できるようにしたものです。よく使うメソッドや、よく使う処理をパッケージにしてしまうんですね。そうすることによって開発がだいぶ楽になったりします。

いろんな種類のフレームワークがあるんですが、それぞれ特色があります。例えば、Node.jsといえば、サーバーサイドのJavaScriptを実行しやすくするものであったり。最近出ているAngularJS、Backbone.jsというのは、NET Frameworkでも取り入れられているMVC Framework、疎結合型のプログラミングの開発を意識しています。

そういったものによって、サーバーサイドの処理とクライアントサイドの処理のプログラムを別に分けてしまって、システムの入れ替えがあっても、シームレスに移行できるというようなメリットがあります。

そして2つ目が、「Single Page Application（SPA）」。先ほどモダンWebのところで出てきたものになります。こちらは単一Webページによるアプリケーションになります。

今までWebページというものは、HTMLがそのページを1枚1枚表示していて、次へを押せば次のページに飛んで、HTMLファイルをそのまま何ページも用意しなきゃいけない状況でした。

それが、ブラウザが高速化したこともありまして、ヘッダーとフッターをつけて、ボディだけを入れ替えていく、ボディの一部だけを入れ替えていくということができるようになってきました。

そうすると、ユーザーは普通のアプリケーションと同じような操作感覚で、好きな部分をクリックしたら、その部分だけが更新されるといったような表現が可能になってきます。

そこでは、いわゆるセッションを張って、ずっとサーバと通信をしているのではなくて、非同期通信ということもできるようになりまして、必要な時だけデータを取りにいって、逆にサーバから必要な時だけデータを送り出すということができるようになります。AJAX、WebSocketなどの単語が、そういったところで出てくると思います。

Webはネイティブアプリに近づいている

そして最後、「ハイブリッドアプリ」です。主にモバイルの開発で使われるものです。みなさんもスマートフォンを使っていると、アプリケーションがいっぱいホーム画面に並んでいると思うんですけど、ああいったものもハイブリットアプリの一部です。

例えば、今あるWebサイトをそのままパッケージ化して、OSのアプリのようなかたちにしてしまうということができたりします。これは、例えば表面上のUI部分、画面の操作部分はHTML5、JavaScriptで書いて、ほかのプラットフォーム関係なく、どのプラットフォームでも使いまわしができるうえに、一部足りない部分だけネイティブコード、ローカルのアプリケーションと同じようなかたちで機能を補完していただいて、ひとまとめとしてユーザーに提供することが可能になってきます。

クラウド上での開発ツールとしてApache CORDOVA、Monaca、apllicanといったものが注目を浴びています。

こういったWebの技術に少しでも興味を持っていただき、今後のお役に立てればと思います。

では早速ですが、第1章のまとめに移らせていただきます。Webの技術を取り巻く環境は、急速に発展しています。そして、それに対して企業システムがどう取り入れるかに、ギャップがあり、難しいところになります。

それは単なる技術の発展を待つだけでは難しくて、インフラ技術者とWeb開発者が協力して、ITインフラをリードしていく必要があります。

そしてWeb技術は、Web標準というものが主流になっています。そして先ほど紹介したような技術をもとによりネイティブに近いようなアプリケーションというのが、どんどん出てきている状況になります。

こういった状況下ですので、ぜひモダンなWeb、モダンなサイト、そういったものを難しいながらも、みなさんの力で少しずつ取り入れて企業のシステムをより便利にして、より仕事がしやすい環境になればと願っています。

Microsoft Edgeってどうなの？

では早速ですが、次は「Microsoft Edgeってどうなの？」という2章に移らせていただきます。

改めて現在のMicrosoftのブラウザの戦略がこちらになっています。Internet Explorerは立ち位置として今、レガシーへの互換性、古いものへの互換性を重視した製品になっています。

そしてMicrosoft Edgeはモダンへの互換性、先ほど出てきたWeb標準やHML5に対応することを強化しています。

Internet Explorerには、いわゆるドキュメントモードというものがありまして、古いIEをエミュレーションする機能がついています。

IE11であっても、17年前に出たIE5と同じページを表現できるようなエミュレーション機能がついていまして、今こういったかたちで仕事をされているなかでも、実はIE5相当で動いていたり、IE7相当で動いているページはたくさんあると思います。そしてこれまで使ったプラグイン、そういったものも今後もIE11では扱うことができます。

一方、Microsoft Edgeは先ほどのWeb標準、もしくは新しい技術への対応を中心に行っていまして、あとは、Microsoftが新しく出していくサービス、特にWindowsの機能、そういったものの連携を強めていきます。

あと、マルチデバイスということで、ウィンドウズプラットフォーム、Windows 10からいろんなモバイルやタブレット上、あとはIoT上で動くようになっていますが、すべてての上でMicrosoft Edgeは動きます。

最後に、JavaScriptベースの新しいHTML拡張というところで、今までのプラグインではなくて、HTML、JavaScriptベースの拡張になっていまして、そういったものが使えます。

Firefox、ChromeというところはすべてHTML拡張になっていますので、言ってしまえば、Googleとかの拡張がそのまま使えるというところがあります。

実は昨日、HTML拡張のセッションがあったんですが、物江（修）が失敗して、Edgeで動かないという悲惨な状態になりまして、最終的にChromeに入れて動かすということをしました。そういったこともできるようになってきました。

IEのシェアは9.8パーセントというところを最初に出しましたが、Enterprise環境では実は70パーセントくらいのシェアを保っています。ちょっと安心しました。

一方でMicrosoft Edgeは58パーセントの企業にテストでしたり、今後の展開を検討いただいています。これはマイクロソフトのアンケート結果に基づくものです。

パフォーマンスを測定してみた結果

次に、「そうは言っても、いいところばかり言って、実際ダメなんじゃないの？」というのがみなさんのイメージかと思います。実際、僕自身も最初にSpartan（注：Edgeの開発時のコード名）として出た時には、「本当に早いのかな」みたいなところがあったんですが、これは数日前に僕のノートPCでいろいろと測定をしてみた結果になります。

ここはフェアにいくため、OctaneというGoogleのJavaScriptテストサイトがあるんですが、そちらで私のPCで実行した結果になります。

スコアが高ければ高いほど、そのブラウザの性能がいいというものになるんですが、その結果は、なんとEdgeが一番数値がいい状況になっています。

これ何度か試してみたんですが、傾向は変わらず、Edgeが一番いい状況になっていまして、Chromeはやはり僅差というか、なかなか接戦になるんですね。

そこより一歩遅れてFirefoxがありまして、Safariは現在Windows版がないのでN/Aとさせていただきました。

そして、IEをお使いのみなさんには申し訳ないんですが、スコアは半分ぐらいになっています。ですので、同じページを表示するにも実はEdgeを使った方がぜんぜん早いというのが正直な結果です。

次が先ほどから申しています、HTML5への対応です。現在、W3Cになって標準となっているの550のHTML5の機能が標準規格としてあるんですが、それにいくつまで対応しているかという数値になります。

結果は、Chromeが勝利という結果になりました。ここは嘘はつかず、実際のところなんですが、550あるうち、490対応してるのがChrome。そして、Microsoft Edgeが460対応している状況になります。

しかしながら、これはこの1年間でここまで追いついて、IEの時代で300個までしか対応してなかったものを460まで近づけています。

そして次に出るクリエイターズアップデートといったものでは、ここの対応数が並ぶ、もしくは超えていくことを目指して開発を進めています。

そして最後の部分ですが、モバイル対応というところでも、ここはChromeに軍配が上がってしまいます。AndroidやiOS、そしてBlackBerryというところでChromeはさまざまなプラットフォームに出しているのですが、Microsoft Edgeは今のところWindows 10 mobileといった結果になっています。

ですが、あくまでこれはUWPという機能の可能性を考えていただければ、今後Edgeがさらに飛躍していくのではないかなというところがあります。