Windows 10 Anniversary Updateの新機能【開発者編】
Microsoft Edge： HTML5／JavaScript最新標準仕様への新応とF12開発者ツールの新機能
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）。
標準機能の他ブラウザーの実装状況とEdgeでのステータスを確認できる。
Platform statusがPreviewになるとWIPBでWIP参加者向けにプレビューで公開される。ビルドごとの変更点はMicrosoft Edge changelogとして公開されており、ビルド番号ごとの差分を確認できる。
このようにEdgeの開発状況は以前よりも情報がオープンになってきており、ビルドの提供頻度も高くなっている。実装状況は随時変わっていくので、これらの状況を確認しつつ、使用するAPIを決めるのがよいだろう。
JavaScriptの拡張
ES2015とES2016の実装
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 機能を有効にする］をチェックしないと利用できなくなっている。
オープンソース化
ChakraCore
マイクロソフトの最近の流れとしてオープン化が挙げられるが、クローズで進むかと思われてきたEdge自体の開発もオープン化が進んでいる。Edgeで使われているJavaScriptエンジンであるChakra（ChromeのV8に相当）からWindowsやEdgeに依存している部分を除外したChakraCoreをオープンソースとして公開した。
ChakraCoreはすでにLinuxやmacOSに移植され、Node.jsのエンジンとしても動作できるようになっている。
WebGL
もう一つのオープンソースプロジェクトとして、EdgeのWebGL実装の一部がGitHubで公開されている。公開されているコードは、WebGLで使われているGLSLという記法から、Edgeの内部で仕様されているDirectXの記法であるHLSLに変換するトランスパイラー実装である。
追加されたHTML5標準
EdgeのレンダリングエンジンであるEdgeHTMLのバージョンは13から14になっており、HTML5標準機能が追加で実装されている。最近のWeb業界は、Webをオフラインで利用可能になるService Workerが大きく注目されており、Edgeでは現在、それを開発中である。今回のリリースでは、「Service Workerのための布石」と呼べる機能がいくつか提供されている。
Web Notifications（通知）
Edgeでもようやく通知（Web Notifications）が使えるようになった。Webページからユーザーに通知を送信するには、以下のようなコードを書けばよい。
|
let ask = Notification.requestPermission();
ask.then( permission => {
if( permission === "granted" ) {
let msg = new Notification( "こんにちは", {
body: "久しぶり！",
icon: "icon.png"
});
msg.addEventListener( "click", event => {
alert("clicked");
});
}
|
ユーザーに通知の権限（requestPermissionメソッド）を要求し、許可された場合に限り（戻り値が“granted”）、通知を送信するためのオブジェクトを作成する（new Notification）。そのオブジェクトでclickイベントをハンドルして、通知をクリックされた時の処理を実行する。
このように、ユーザーが通知を許可したときのみ通知が送信できるようになっている。サイトからいろいろと通知したくなるだろうが、通知が多すぎるサイトはユーザーから嫌われることが多いため、適切な量に抑えるように考慮する必要がある。
ようやくEdgeでも通知が送信できるようになったが、現状の実装ではページを開いているときしか通知ができない。現在実装中（In Development）のService WorkerやPush APIが提供されるようになると、オフラインでの利用や、Webサイトからのプッシュ通知が可能になり、現実のシナリオで利用可能になると考えられる。
Fetch API
Fetchは、ネットワーク上のリソースを取得するためのAPIで、XMLHttpRequest（以下、XHR）を強化したものだ。XHRは後方互換を重視する必要があったため、よりモダンな新しいAPIが設計された。画像などのバイナリデータを扱うblobメソッドや、JSONなどのよく使うデータを取得するメソッドを提供しており、ストリームにより完全な読み込みが終わる前にデータを扱うことができる。Promiseを使ったモダンな記述ができる。
|
if("fetch" in window){
fetch('icon.png')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var myImage = document.getElementById('myImage');
myImage.src = URL.createObjectURL(myBlob);
});
}
|
簡潔なコードで記述でき、Promiseによるモダンな記述ができる。
Web Authentication API
パスワードというセキュリティシステムが安全でないことは広く知られている。多くのユーザーが推測可能なパスワードを使ったり、複数のサイトで同じパスワードを使ったりしているためだ。最近もいくつかの大手サイトでパスワードの流出があったが、同じIDとパスワードを使っているサイトが他にいくつあるか分からない方も多いのではないだろうか。
これを解決するために、.NET Passport（現在のMicrosoftアカウント）やOAuthなどの実装が提供されてきたが、HTML5のWeb Authenticationでは、FIDO 2.0と呼ばれる生体認証の仕様をベースに顔認証や指紋認証も可能になっている。現時点ではEdge以外のブラウザーでは実装されていないため、すぐにWebサイトに採用することは難しいだろうが、パスワードレス認証がWebでも普及していくことに期待したい。
Beacon API
Beaconは、分析などに使うデータを非同期にWebサーバーに送信するAPIである。こういったいわゆる「ビーコン」の用途では、これまでXMLHttpRequestや1ピクセルの画像を読み込む<img>タグなどのテクニックが使われてきたが、どちらもブラウザーのパフォーマンスに影響を与えることがあった。Beacon APIを使うと、非常に簡単に非同期でデータを送信できる。
|
navigator.sendBeacon('/beacon', data);
|
要素の追加
今回のアップデートで、HTML5標準のいくつかの要素が追加されている。
<time>要素
<time>要素は、日付、時間、またはその両方を機械が認識可能な形で表現するタグだ。
|
<time>21:43</time>
<time datatime="2016-08-28">平成28年8月28日</time>
<time datatime="2016-08-29 19:30">明日夜7時半</time>
|
このようにタグに意味付けをすることで、機械が日時を認識できるようになるため、カレンダーと連携したり、タイムテーブルの管理などを自動化できるようになる。
<data>要素
<data>要素は、表示する文字列に数値を追加でき、機械が読み取り可能な値を設定できる。
|
<data value="324124345">鳥取産スイカ</data>
<data value="424124346">熊本産スイカ</data>
|
<output>要素
<output>要素は、計算結果を表示する要素である。以下の例では、足し算の結果を表示している。
|
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number"> +
<input name="b" type="number"> =
<output name="result"></output>
</form>
|
<input type="color">
<input>要素にtype="color"属性を付与することで、色を入力できる。
<input type= "color">
<time>要素や<data>要素は、直接的な見た目に影響は少ないが、機械によるページの処理やアクセシビリティなどで要素を意味付け（＝セマンティック）しておくことで、価値を発揮する。
Canvas Path2Dオブジェクト
CanvasはWebブラウザー上でグラフィックを描画できる機能だが、これまではCanvasのコンテキストに対して、座標を直接指定して円や四角を描画してきた。Path2Dオブジェクトを使うとパスの集合をオブジェクトとして管理できるため、描画の記述をシンプルにできる。
|
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 直接描画
ctx.beginPath();
ctx.arc(37,37,20,Math.PI/7,-Math.PI/7,false);
ctx.lineTo(31,37);
ctx.fill();
// Path2Dで描画
var path = new Path2D();
path.arc(137,37,20,Math.PI/7,-Math.PI/7,false);
path.lineTo(131, 37);
ctx.fill(path);
|
Web Speech API（Speech Synthesisのみ）
Web Speech APIには、入力（Speech Recognition： 音声認識）と出力（Speech Synthesis： 音声合成）の2つの定義があり、今回のビルドでは出力（Speech Synthesis）のみが提供されている。Test DriveページにSpeech Synthesis APIのデモページが公開されており（図6）、実際に音声出力を確認できる。
入力した文字列が読み上げられていることが確認できたと思う。なお、入力（Speech Recognition）は、現在、開発中のステータス（In Development）であるが、Chromeでは先行して実装が完了しており、Developerサイトで説明とデモを確認できる。
WOFF 2フォント
WOFF 2は、Webフォントの標準規格であるWOFF（Web Open Font Format）にBrotliと呼ばれる圧縮アルゴリズムを使用している。これによって、30％以上の配信コストを削減するといわれている。ただし、フリーで日本語が利用できるWebフォントであるNoto Sansで確認したところ、WOFFとWOFF 2のサイズの差は、13～15％程度のため、日本語では若干圧縮効率が悪くなってしまうようだ。とはいえ、日本語フォントはサイズが大きくなるため、13％の差は大きいといえるだろう。
WebM、VP9、Opus
Edgeがリリースされて大きく変わったのが、マイクロソフトが自社技術にこだわらなくなったことだろう。グーグルが開発して標準化されたWebM、VP9、Opusといったロイヤリティフリーでオープン、高圧縮率のフォーマットがサポートされることにより、相互互換性が高まり、どのブラウザーでも同じビデオやオーディオが再生できる環境に近づいたといえる。
WebRTC
WebRTCとは、テキスト、音声、ビデオなどを使ってユーザー同士がリアルタイムにコミュニケーションするためのWeb仕様である。WebRTC 1.0仕様が公開された後、よりシンプルな実装としてObject RTC仕様が公開され、マイクロソフトがこちらを推したが、他のブラウザーはWebRTCの実装を進めていたため、Edgeと他のブラウザーとの非互換が発生してしまった。現在、Edgeチームは相互互換性を高めるためにWebRTC 1.0を実装していると公表している（図7）。
WebRTC v1.0 APIが「開発中（In Development）」になっている。
なお、音声については、adapter.jsを使うことでChromeやFirefoxと通話が可能になっており、SimpleWebRTCというデモで会話を試せるようになっている。
F12開発者ツール
F12開発者ツールも今回のバージョンアップでいくつかの機能が改善されている。
コンテキストメニュー
今回のアップデートから、右クリックメニューに表示されていた開発者向けのメニューはデフォルトで非表示になっている（図8）。
F12開発者ツールを初めて起動すると、「開発者向けのメニューが追加された」旨のメッセージが表示される（図9）。
これ以降は、右クリックメニューに［要素の検査］と［ソースの表示］が追加される（図10）。
これにより、開発者がF12開発者ツールを起動しやすくなる。また、このメニューを再び非表示にするには、「about:flags」で［コンテキストメニューに“ソースの表示”と“要素の検査”を表示する］のチェックを外せばよい。
アクセシビリティ
HTML5 Accessibilityを参照すると、EdgeはHTML5アクセシビリティ仕様を完全にサポートしていることが分かる。
HTML 5 Accessibility）を見ると、Edgeがアクセシビリティ仕様に100％対応していることが分かる" border="0" class="da-image-screen">ブラウザーがアクセシビリティに対応していると同時に、F12開発者ツールにもアクセシビリティ対応の機能が実装されている（図12）。
ツールバーの［アクセシビリティ］ボタンをクリックすると［アクセシビリティ ツリー］（中心のペイン）が表示される。また右ペインには［アクセシビリティ］タブが表示されている。
［アクセシビリティ ツリー］では、スクリーンリーダーなどの支援ツールに受け渡すデータを確認できる。
［アクセシビリティ］タブでは、DOMツリーで選択した要素のアクセシビリティプロパティを一覧で確認できる。またプロパティ名にカーソルをあてると説明文がある場合は、説明文が表示される。
開発者としては、HTML5で定義されている要素をセマンティックに沿ってきちんと記述することや、ARIAと呼ばれるアクセシビリティのためのルールにのっとって実装することが求められている。F12開発者ツールのアップデートが提供するアクセシビリティ機能は、これらが正しく実装されているかを確認するための補助ツールとなっている。
拡張機能のデバッグ
今回のアップデートで、EdgeにはChromeに似た「HTMLやJavaScriptを使った拡張機能」がサポートされるようになった。HTMLやJavaScriptで実装されるため、F12開発者ツールでデバッグが可能になった。
拡張機能のデバッグは、「about:flags」で拡張機能の開発者向け機能を有効にするとよい（図13）。
拡張機能の開発者向け機能を有効にして、ブラウザーを再起動すると拡張機能のデバッグが可能になる。
右上にある［...］メニューの［拡張機能］をクリックして［拡張機能］ペイン（図14）を開くと、その一番下に［拡張機能の読み込み］ボタンが表示される。
［拡張機能の読み込み］ボタンをクリックすると、［フォルダーを開く］ダイアログが表示されるので、そこでファイルを選択することで（自作を含めて）任意の拡張機能が読み込める。
自作でも、ストアからダウンロードした拡張機能でも、［拡張機能］ペインで任意の拡張機能をクリックした後の表示（図15）には［ID］と［検査］が表示され、ここからデバッグが可能だ。
具体的には［検査］に表示されている［バックグラウンド ページ］リンクをクリックすると、デバッガーが表示される（図16）。そのデバッガーでは、ブレークポイントを設定するなどしたデバッグ実行が可能である。
バグ報告
最後にEdgeのバグ報告について説明しておこう。
まず、日本語でフィードバックを送信するには、［･･･］メニューにある［フィードバックの送信］をクリックする。これにより［フィードバックと報告］ペイン（図17）が表示され、フィードバックのための各種ボタンが表示される。
［フィードバックと報告］ペインに表示されるボタンは以下のとおりだ。
- ［サイトの問題を報告する］ボタン： ChromeやFirefoxでは表示されるのにEdgeでは正しく表示されないサイトを報告する。
- ［安全でないサイトを報告する］ボタン： クラッシュや不正なプログラムをインストールさせたりする悪意のあるサイトを報告する。
- ［フィードバック Hub を開く］ボタン： Edgeの問題を報告したり、新機能を提案したりできる。
JavaScriptの問題は、GitHubからレポートが可能だ。前述のとおり、JavaScriptエンジンであるChakraのコア部分は、オープンソース化されているため、Issueやプルリクエストが送信できる。
HTMLレンダリングエンジンであるEdgeHTMLは、EdgeHTML Issue Trackerから報告できる。
新機能や改善要望はUserVoiceが提供されており、要望の追加や投票（Vote）できる。
そして最後にTwitterからもバグの報告が可能になった。コードが共有可能なcodepen.io、jsfiddle.net、jsbin.com、dabblet.comで再現可能なコードを書いて、簡単な説明とともにハッシュタグ#edgebugを付けてTweetするだけだ。
まとめ
今回のアップデートでMicrosoft Edgeが他のモダンブラウザーに置いていかれることなく、機能が実装されていることがご理解いただけたのではないだろうか。
Edgeのアップデートは年に1～2回と、他のブラウザーに比べて少ないため、「遅れている」と感じるかもしれないが、Windows Insider Programで提供されるInsider Preview Buildでは頻繁にアップデートされ、機能が追加されている。いち早く機能を試したい方は、Insider Previewに参加してフィードバックを送信することをお勧めする。筆者は自宅のメインマシンで利用しているが、「今のところ」大きな問題は発生していない（もちろん自己責任で参加してほしい）。
1. Microsoft Edgeの進化 ～Windows標準ブラウザーの最新機能と使い方
Windows 10 Anniversary Updateで、ようやく日常使用に耐えられる機能性と安定性が備わってきたEdge。その最新機能をパワーユーザー向けに概説する。
2. 【現在、表示中】≫ Microsoft Edge： HTML5／JavaScript最新標準仕様への新応とF12開発者ツールの新機能
Windows 10 Anniversary Updateでアップデートされた最新Edgeの「JavaScript標準仕様への対応状況／オープンソース化／追加されたHTML5標準／F12開発ツールの新機能」をWeb開発者向けに概説する。
3. Windows 10 Creators UpdateのJavaScript／CSS関連の新機能
Windows 10 Creators UpdateでEdgeはどのように進化したのか？ CSS／JavaScriptに関する新機能や新搭載のAPIを、開発者目線で紹介する。
