ã¹ãã ã®å¾©å
ããã¾ãããï¼åæ¥ã®åæå»ã¸å¾©å
ï¼ ããã¨ãããã¢ãããããªããªã£ãã®ã§ããEdgeã®ãæ°ã«å
¥ããéããªããªãã¾ãã ⦠åé度ãã表示é度ã¯åºæ¬çã«å¤§ããªåé¡ã¯ãªãããã ã Edgeã®æ¤ç´¢ã¨ã³ã¸ã³ãBingããGoogleã«å¤æ´ããæ¹æ³. éçºè
ãã¼ã«ã®ä¸»ãªæ©è½. ¨ããWindows 10 Anniversary Updateã§ã¢ãããã¼ããããææ°Edgeã®ãJavaScriptæ¨æºä»æ§ã¸ã®å¯¾å¿ç¶æ³ï¼ãªã¼ãã³ã½ã¼ã¹åï¼è¿½å ãããHTML5æ¨æºï¼F12éçºãã¼ã«ã®æ°æ©è½ããWebéçºè
åãã«æ¦èª¬ããã åãããæ°æ©è½ãä¸å¿ã«ãææ°ã®F12éçºè
ãã¼ã«ã®ä¸»è¦æ©è½ãä¸éã解説ããã®ãã¼ã«ã使ãããªãããã®ãã¤ã³ããåãä¸ããã ã§ãããæ®ã4ã¤ã®æ¹æ³, Windows 10æè¼ãã½ã³ã³ã§é³ãåºãªãå ´åã®è¨å®ã»å¯¾å¦æ¹æ³, Windows 10æè¼ãã½ã³ã³ã§ãã¤ã¯ã使ããªããèªèãããªãå ´åã®è¨å®ã»å¯¾å¦æ¹æ³, Excel ãããããã¦ã³ãªã¹ãï¼ãã«ãã¦ã³ï¼ãä½æããæ¹æ³, Windows 10ã®ç©ºã容éãå¢ããæ¹æ³. Windows10 Anniversary Updateãã¤ã³ã¹ãã¼ã«å¾ã«ãMicrosoft Edgeã®ã¹ã¿ã¼ãç»é¢ã«ãã©ãã«ãçºçããããã«ãªãã¾ããã ããã¾ã§ã¯ãã¿ã¹ã¯ãã¼ã® Edge ã¢ã¤ã³ã³ãã¯ãªãã¯ããã¨ã¹ã¿ã¼ãç»é¢ãç«ã¡ä¸ãããããããã¤ãã¥ã¼ã¹ãã£ã¼ããç»é¢ã表示ããã¾ããã åãããF12éçºè
ãã¼ã«ãæè¼ããã¦ãã¾ããä»åã®è¨äºã§ã¯F12éçºè
ãã¼ã«ã®ä¸»è¦ãªæ°æ©è½ã«ã¤ãã¦ç´¹ä»ãã¾ãã ⦠PCã§ã¹ãããµã¤ãã®è¡¨ç¤º ãã½ã³ã³ã®Webãã©ã¦ã¶ã¼ã®IE11(Internet Explorer 11)ã§ãã¦ã§ããµã¤ããã¹ããã§è¦ããããªç»é¢è¡¨ç¤ºããããæ¹ã§ãã ã¤ã³ã¿ã¼ãããã®ã¦ã§ããµã¤ãã§ããã½ã³ã³ã§è¦ãå ´åã¨ã¹ããã§è¦ãå ´åã§è¡¨ç¤ºãç°ãªãå ´åããã¾ãã Internet Explorer 8 (IE8) ã§ãã¼ã« ãã¼ ãã¿ã³ãè¦ã¤ãããªã ã¯ããã« . Windows 10 Anniversary Updateでアップデートされた最新Edgeの「JavaScript標準仕様への対応状況/オープンソース化/追加されたHTML5標準/F12開発ツールの新機能」をWeb開発者向けに概説する。, 前回は2016年8月2日にリリースされたWindows 10 Anniversary Updateについてユーザー向けの機能を紹介したが、今回はWeb開発者向けにアップデートされた内容を紹介する。, Microsoft Edge(以下、Edge)は、Windows Insider Program(以下、WIP)でWindows Insider Preview Branch(以下、WIPB)が提供されるごとに新しいビルドが提供され、新機能が提供され続けてきたが、一般ユーザーが利用可能になるのが今回のアップデートのタイミングとなるため、Web開発者としてもここから新機能が利用可能になるタイミングといえるだろう。, これまでモダンブラウザーのHTML5標準の対応状況は、html5testなどで対応されているAPIの数で比較されてきた。そのため、「EdgeもがんばってるけどChromeが先行しているな」といった会話がされてきた。, だがAPIの対応数が多いからといって、他のブラウザーでサポートされていなければ、Web開発者がその機能を利用すると決めるのは難しいだろう。実際にはいくつのAPIがサポートされているかの「数」ではなく、その機能を使えるか、または使われているかの「質」を重視する段階に移ってきた。, マイクロソフトが公開したAPI Catalogでは、各ブラウザーの標準仕様対応状況を一覧したり、視覚的に確認したりできる(図1)。, 上:各ブラウザーが標準仕様に対応している領域とブラウザー間のカバー領域を視覚的に見られる。 下:また、標準機能ごとのブラウザー対応状況を表で確認できる。, API Catalogで分かるように全ての仕様をカバーしているブラウザーがなく、またブラウザーごとに対応状況が異なっている。各ブラウザーが競い合って機能を実装していくのはよいが、Web開発者からすると、ブラウザーごとに使える機能が異なる状況は望ましいとはいえない。, そのためEdgeは、どの標準仕様を実装するかを、標準仕様の安定性、熟成度、パートナーやWeb開発者コミュニティーからのリクエスト、そしてBingクローラーから収集された全データの結果に基づき決定しているという。つまり、現実世界で使われている、または使われる可能性が高いものから実装していくということだ。, Bingクローラーで収集したCSSプロパティの利用状況はAPI Usageとして公開されている。ここでは約120万ページをクロールした結果、公開されているWebサイトで使われているCSSプロパティの使用率を確認できる(図2)。, 上:CSSプロパティの使用率をよく使われている順に表示している。 下:webkitプレフィックスが指定されているものだけを抜き出して表示することもできる。, このようにBingで収集したデータは公開されており、これを確認すると、「よく使われているのにまだ実装していない機能」を優先的に実装しようとしていることが分かる。, また対応状況は以前からPlatform statusとして公開されていて、検討中(Under consideration)や実装中(In development)など途中状態も把握できる(図3)。, Platform statusがPreviewになるとWIPBでWIP参加者向けにプレビューで公開される。ビルドごとの変更点はMicrosoft Edge changelogとして公開されており、ビルド番号ごとの差分を確認できる。, このようにEdgeの開発状況は以前よりも情報がオープンになってきており、ビルドの提供頻度も高くなっている。実装状況は随時変わっていくので、これらの状況を確認しつつ、使用するAPIを決めるのがよいだろう。, JavaScriptの標準仕様はECMAScriptとして定義されており、2015年に策定された標準仕様がECMAScript 2015(以下、ES2015)である。ES2015は正式名称だが、ES6という呼称も並行して使われることが多い。これは、もともと仕様策定の初期には“ES6”と仮に呼ばれてその名前が浸透した後で、途中から“ES2015”という名前が正式に付けられたためだ。その次バージョンや次々バージョンはES2016やES2017とのみ呼称されている。, ECMAScriptの各ブラウザーによる実装状況を提供しているECMAScript Compatibility Tableを見ても、EdgeにおけるES2015とES2016以降の実装が先行していることが分かる。, Edge 14がAnniversary Updateのバージョンを示しており、Edge13はその前のバージョンになる。Edge 14が他のブラウザーよりも先行してES2015とES2016の機能を実装していることが分かる。, ECMAScriptの実装についてはEdgeが先行しているが、先にも述べたとおり、いまやブラウザーは互換性を重視する時代であり、Edgeが先行しているからといって「採用しよう」という判断ができるものではない。そのため、実際に利用するには、他のブラウザーの実装を待つ必要があり、IE11など、機能が追加されない古いブラウザーをサポートする必要がある場合は、そもそも利用できない。, とはいえ、新しいECMAScriptの機能は、便利で魅力的な機能が多い。そのような機能が利用したいときには、BabelやTypeScriptといった、他の言語からJavaScriptへコードを変換するトランスパイラーを使って、古いバージョンのJavaScriptに変換するのがよいだろう。, なおES2017の機能も一部先行して実装されているが、仕様が不安定なため(変更の可能性がある)、「about:flags」(アドレス欄に入力すると開く)で[試験的な JavaScript 機能を有効にする]をチェックしないと利用できなくなっている。, マイクロソフトの最近の流れとしてオープン化が挙げられるが、クローズで進むかと思われてきたEdge自体の開発もオープン化が進んでいる。Edgeで使われているJavaScriptエンジンであるChakra(ChromeのV8に相当)からWindowsやEdgeに依存している部分を除外したChakraCoreをオープンソースとして公開した。, ChakraCoreはすでにLinuxやmacOSに移植され、Node.jsのエンジンとしても動作できるようになっている。, もう一つのオープンソースプロジェクトとして、EdgeのWebGL実装の一部がGitHubで公開されている。公開されているコードは、WebGLで使われているGLSLという記法から、Edgeの内部で仕様されているDirectXの記法であるHLSLに変換するトランスパイラー実装である。, EdgeのレンダリングエンジンであるEdgeHTMLのバージョンは13から14になっており、HTML5標準機能が追加で実装されている。最近のWeb業界は、Webをオフラインで利用可能になるService Workerが大きく注目されており、Edgeでは現在、それを開発中である。今回のリリースでは、「Service Workerのための布石」と呼べる機能がいくつか提供されている。, Edgeでもようやく通知(Web Notifications)が使えるようになった。Webページからユーザーに通知を送信するには、以下のようなコードを書けばよい。, ユーザーに通知の権限(requestPermissionメソッド)を要求し、許可された場合に限り(戻り値が“granted”)、通知を送信するためのオブジェクトを作成する(new Notification)。そのオブジェクトでclickイベントをハンドルして、通知をクリックされた時の処理を実行する。, このように、ユーザーが通知を許可したときのみ通知が送信できるようになっている。サイトからいろいろと通知したくなるだろうが、通知が多すぎるサイトはユーザーから嫌われることが多いため、適切な量に抑えるように考慮する必要がある。, ようやくEdgeでも通知が送信できるようになったが、現状の実装ではページを開いているときしか通知ができない。現在実装中(In Development)のService WorkerやPush APIが提供されるようになると、オフラインでの利用や、Webサイトからのプッシュ通知が可能になり、現実のシナリオで利用可能になると考えられる。, Fetchは、ネットワーク上のリソースを取得するためのAPIで、XMLHttpRequest(以下、XHR)を強化したものだ。XHRは後方互換を重視する必要があったため、よりモダンな新しいAPIが設計された。画像などのバイナリデータを扱うblobメソッドや、JSONなどのよく使うデータを取得するメソッドを提供しており、ストリームにより完全な読み込みが終わる前にデータを扱うことができる。Promiseを使ったモダンな記述ができる。, パスワードというセキュリティシステムが安全でないことは広く知られている。多くのユーザーが推測可能なパスワードを使ったり、複数のサイトで同じパスワードを使ったりしているためだ。最近もいくつかの大手サイトでパスワードの流出があったが、同じIDとパスワードを使っているサイトが他にいくつあるか分からない方も多いのではないだろうか。, これを解決するために、.NET Passport(現在のMicrosoftアカウント)やOAuthなどの実装が提供されてきたが、HTML5のWeb Authenticationでは、FIDO 2.0と呼ばれる生体認証の仕様をベースに顔認証や指紋認証も可能になっている。現時点ではEdge以外のブラウザーでは実装されていないため、すぐにWebサイトに採用することは難しいだろうが、パスワードレス認証がWebでも普及していくことに期待したい。, Beaconは、分析などに使うデータを非同期にWebサーバーに送信するAPIである。こういったいわゆる「ビーコン」の用途では、これまでXMLHttpRequestや1ピクセルの画像を読み込む
![]()
タグなどのテクニックが使われてきたが、どちらもブラウザーのパフォーマンスに影響を与えることがあった。Beacon APIを使うと、非常に簡単に非同期でデータを送信できる。,