Browser

Microsoft Edge(Project Spartan, Internet Explorer) 、ブラウザ周辺、Web フロントエンド開発、UI、など

Microsoft Edge まとめページ

Microsoft Edge の変更ログ - Windows 10 Insider Preview Build 14316

今回は夏のアップデートのためか、結構な量の変更があります。

いつもの参照元

https://developer.microsoft.com/en-us/microsoft-edge/platform/changelog/desktop/14316/developer.microsoft.com

　

追加機能・改善

Microsoft Edge 本体
  • フォルダのドラッグアンドドロップの対応
  • 他のブラウザからお気に入りのインポート最適化
  • ハブのお気に入り一覧がツリー表に変更
  • ファイルダウンロード完了時でのローカル通知
  • 詳細設定からダウンロードフォルダの変更可能

　

Web Platform features
F12 開発者ツール
  • アクセシビリティ ツリー ビュー
  • DOM API ポーリング
  • 拡張機能 デバッグ機能
新しく導入された JavaScript の機能
  • Default parameters
  • Async/Await
  • Object.values
  • Object.entries
新しく導入された Web Platform の機能
  • Opus audio format
  • Time element
  • Data element
  • Output element
  • Input type = color
  • Canvas Path2D objects
  • Web Speech API (Synthesis)
  • Color ClearType fonts
about:flags の設定をオンにして使えるもの
  • ES6 Regex symbols
  • Fetch API
  • Web Notifications API
  • Web Payments API (実装されていない可能性あり)

　

バグ・問題

大きいファイルをダウンロードする場合、99% で止まりダウンロードできない。
ファイル自体はダウンロードされているっぽいので、Edge を閉じてファイル名を変えれば良さそうです。

　

User Agent

旧 - Windows 10 Mobile Insider Preview Build 14295
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/14.14295

新 - Windows 10 Mobile Insider Preview Build 14316
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.82 Safari/537.36 Edge/14.14316

　

前回との違いは Chrome と Edge のバージョンです。

Build Edge
Build 14295 Edge/14.14295
Build 14316 Edge/14.14316

　

ブラウザ バージョン

Microsoft Edge 37.14316.1000.0
Microsoft EdgeHTML 14.14316

前回と同様に Microsoft Edge のバージョンナンバーが大幅に変更されました。 　 　

　

about:flags（開発者向け設定）で増えた項目

コンポジション
レンダリングされたサイズの画像をデコードする（デフォルトでオン）

スタイル
実験的なセレクトコントロールを有効にする（デフォルトでオン）

スクロール
レスポンシブ スクロールバーのスクローリングを有効にする

JavaScript
バッテリ消費を抑えるため非表示タブのタイマー更新を1秒に1回のみにする。（デフォルトでオン）

レガシーな setIntarval の振る舞いを使用する

Media Source Extensions
Opus audio フォーマットの有効にする
（デフォルトでオン）

Fetch API
Fetch API を有効にする

Web Payments
Web Payments API を有効にする

　

　

変更の詳細

フォルダのドラッグアンドドロップの対応

フォルダのドラッグアンドドロップが可能になりました。
試したところだと、OneDrive、DropBox、Google Drive で使用できました。

　

ファイルダウンロード完了時でのローカル通知

前回からダウンロード完了時に最小化等で Edge 表示されていない場合通知してくれます。
今回のバグにより動かない場合があるかもしれません。

　

詳細設定からダウンロードフォルダの変更可能

ウインドウ右上の詳細 > 設定 > 詳細設定のダウンロードに追加されました。
ダウンロード先のフォルダをいつでも変更できます。

f:id:x67x6fx74x6f:20160409172141p:plain

　

アクセシビリティ ツリー ビュー

F12 開発ルールの DOM Explorer に Accessibility Tree のボタンができました。
押すと DOM と スタイル等の間に各エレメントに開発者が割り当てたアクセシビリティが表示されます。 以下の画像にはありませんが、role 属性も表示できるようです。

f:id:x67x6fx74x6f:20160409173643p:plain

role 属性についてはこちらを参照
role属性とaria-*属性（WAI-ARIA）について【HTML5 Advent Calendar 2012 Day 9】 - E-riverstyle Vanguard

　

拡張機能

executeScript など使える機能が増えました。

また、ウインドウ右上の詳細から見ることのできる拡張機能で表示される個別の拡張機能の設定項目が増えデバッグがしやすくなりました。

f:id:x67x6fx74x6f:20160409180454p:plain

inspect: バックグラウンド ページ
リンクをクリックすると、Chrome のように個別の開発ツールが開き、バックグラウンドページのデバッグができます。

拡張機能の再読み込み
拡張機能のソースをリロードします。
現状では不安定で、変更されない場合再読み込みを押し Edge の再起動する必要があるかもしれません。

使用している機能が表示されるようになった
削除の上の「この機能では次の動作が許可されます」ではこの拡張機能が許可している機能が羅列されます。
拡張機能作成時に動作しない場合ここを見て機能が許可されているか確認するために使えます。
また、使っている機能より許可しているものが多い場合、怪しい動きをしているかもしれないので、注意を促すためにも必要だと思われます。

　

サポート済になった JavaScript

Default parameters

過去記事を参照
browser.hatenablog.com

　

Async/Await

過去記事を参照
browser.hatenablog.com

　

Object.values

オブジェクトの値を配列で返す

var obj = {test1:"1",test2:"2"}
Object.values(obj)
// ["1", "2"]

　

Object.entries

オブジェクトのプロパティと値を配列で返す

var obj = {test1:"1",test2:"2"}
Object.entries(obj)
// [[ "test1" , "1" ] , [ "test2" , "2" ]]

　

追加された HTML の要素

Time 要素
時間を表す

<time datetime="2016-04-09 19:00">4 月 9 日<time>

　

Data 要素
機械可読できる形式

<data value="479814343X">ブラウザハック<data>

　

Output 要素
ユーザーの操作による出力結果を表示する

<output name="result"><output>

form タグ内で使用する場合、oninput で Output 要素の name 属性を紐づけることができるのですが Edge では動きませんでした。

　

Input type = color input 要素の type を color にするとカラーピッカーが表示されます。

<input type="color">

f:id:x67x6fx74x6f:20160409184442p:plain

　

追加された JavaScript

Canvas Path2D objects

<canvas id="canvas" width="400" height="400"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    var path1 = new Path2D();
    path1.rect(10, 10, 100,100);

    var path2 = new Path2D(path1);
    path2.moveTo(220, 60);
    path2.arc(170, 60, 50, 0, 2 * Math.PI);

    ctx.stroke(path2);
</script>

　

Web Speech API (Synthesis)

テキストを機械合成の音声で読み上げます。
iOS など音は違い、読み上げたい言語の音声がインストールされていないと再生されません。

昔 iOS 用に書いたサンプル
http://toshihirogoto.github.io/speech/

　

ES6 Regex symbols

RegExp で Symbol で match, replace, split, search, species などがサポートされているようです。 　 　

Fetch API

ざっくり説明すると、
Ajax などで使っていた XHR を Promise ベースにして動かしているようなものです。
今回は書いていませんがオプションでいろいろ設定できます。

fetch('sample.txt').then(function(response) {
        return response.text();
    }).then(function(text){
        console.log(text)
    }).catch(function(e){
        console.log(e)
    });

クロスオリジン環境で動き、ローカルファイルでは試すことができません。

また、今現在の Edge で試したところ画像などの Blob などは catch を通らず動作が止まってしまいます。
今後修正されるでしょう。

　

Web Notifications API

他のブラウザでもある通知 API で同じように使えます。

Notification.requestPermission(function (permission) {
    if (permission === "granted") {
        var notification = new Notification("Edge からの通知");
    }
});

　

Web Payments API

window.PaymentRequest と window.PaymentRequestUpdateEvent が実装されていますが、使い方がわかりませんでした。

また、about:flags で Web Payments API を有効化すると以下のメッセージが起動時に出るようです。

f:id:x67x6fx74x6f:20160409191223p:plain

　

FIDO API

まだ使用できないとは思われますが、コンソールで調べたところ、msCredential、MSFIDOCredentialAssertion、MSFIDOSignature、MSFIDOSignatureAssertion などの命令があります。

msCredentials.makeCredential と msCredentials.getAssertion を試しに動かしてみましたが、前者は InvalidAccessError、後者 NotSupportedError になり動作しませんでした。

スポンサーリンク