Windows Fall Creator Updateとは?

Windows 10に対して行われる年2回の機能アップデートのうちのひとつです。

今回の Windows Fall Creator Updateで提供される新機能は以下のページで紹介されておりますのでぜひご覧ください。

• 新しいWindows 10 Creators Updateと機能

この記事ではWindows 10 Fall Creators Updateに搭載されるMicrosoft Edgeの新機能について紹介します。

Microsoft Edge (EdgeHTML16)の新機能

Windows 10 Fall Creators Updateに搭載されるEdgeは、一目でその存在がわかるような派手な機能の追加はありませんが、着実にブラッシュアップアップされています。

とはいえ、実際にユーザーの目に触れるUIとデザイン箇所の新機能から順に紹介していきたいと思います。

UI デザインと機能

ボタンアニメーションの改善

Fluent Design Systemにインスパイアされ、Microsoft Edgeのブラウザーフレームをよりモダンにリフレッシュしました。アクリルマテリアルの使用は、タブバーや他のコントロールに奥行きと透明性を提供し、より応答性と楽しさを感じるようにボタンのアニメーションを改善しました。

単語と行の強調表示による読み上げ

WebサイトやPDFからのテキストを選択して右クリックし、コンテキストメニューから「読み上げ」を選択すると、テキストが音声で読み上げられます。選択内容が読み込まれ、その際に単語や行が強調表示されます。

Microsoft Edgeのフルスクリーンモード（F11）

フルスクリーン機能が正式に導入されています。Edge では、これまでもキーボードの [Shift] + [Win] + [Enter] キーを押下して全画面表示が可能でしたが、この方法は正式にはアナウンスされおらず、ある意味隠しコマンド的なものでした。

今回のアップデートからは、[F11]キーを押下するか、設定メニューの新しいフルスクリーンアイコンを選択するだけで、Webサイトをフルスクリーンで表示できます。[F11]キーをもう一度押すか、右上隅にある復元アイコンをクリックして、全画面表示を終了することができます。

JavaScriptダイアログボックスが表示されていても終了可能に

これまでのEdgeまたは他のWebブラウザーでも、JavaScript の alert コマンドでなどで表示されるダイアログボックスが表示された状態では、終了することができませんでた。

一部の悪質なWebサイトでは、この仕様を悪用して任意の操作を行うまでダイアログを表示し続けるということが現在も行われています。

しかし、今回のアップデートでは、JavaScriptダイアログボックスが表示されている場合でも閉じるボタンを使用して正常にEdgeを終了することができるようになりました。

Webサイトのアクセス許可設定

Web サイトには、閲覧者の位置情報やWebカメラへのアクセス、またはデスクトップ通知の送信などの許可を求めるものがあります。

今回のアップデートでは、これまでWebサイトごとに行ったアクセス許可設定が確認できるようになっています。

これまでWebサイトに付与したアクセス許可を確認するには、アドレスバーに表示される鍵マークのアイコン、丸中にエクスクラメーションマーク (!) が描かれたアイコンのいずれかをクリックします。

いずれのアイコンも表示されていない場合は、メニューバーの […](設定) – [詳細設定を表示] の画面で「Webサイトのアクセス許可」の[管理]ボタンをクリックします。

4月にはFirefox 53とChrome 58がリリースされました。そして、Windows Creators Updateが一般公開され、Edgeも新しいEdgeHTML 15が搭載されたバージョンに更新されました。

また、Firefoxのリリースサイクルが変更され、新しい機能が実装されてからリリースされるまでの実装が短縮されることになりました。

Windows Creators Updateリリース、EdgeもEdgeHTML 15に更新

4月11日にWindows Creators Updateが公開され、Microsoft Edgeも更新されました。

• What’s new in Microsoft Edge in the Windows 10 Creators Update

開いているタブをよけておく機能の追加や、タブのサムネイルを表示するなど、ブラウザとしての使い勝手にも手が入りました。

レンダリングエンジンであるEdgeHTMLもバージョンが15に更新されており、新機能が追加されています。開発ガイドが公開されています。

• Dev guide – Microsoft Edge Development

Payment Request API、CSS Custom Propertiesなどは、Edgeのブログでも過去に取り上げられていますね。

• Simpler web payments: Introducing the Payment Request API
• CSS Custom Properties in Microsoft Edge

Intersection Observerの実装はうれしいですね。これは要素とブラウザの表示領域が交差したことを検知するAPIで、画像などの遅延ロードやパララックス的な表現の実装に役立ちます。FRESH!のパフォーマンス改善手法のひとつとしても取り上げられました。

• FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog

JavaScriptでは、Async Functions（async/await）の実装がうれしいです。今回Edgeがサポートしたので、主要ブラウザの最新バージョンすべてが対応しました。

目立たない機能の実装も…あるかも

Dev Guideの下に、実装されたAPIの一覧があったので、ブログなどでは取り上げられない機能のうち、気になったものをチェックしました。

• Element.closest()、Element.matches()の実装
• text-combine-uprightプロパティ（接頭辞なし）の実装
• outline-offsetプロパティの実装
• -webkit-text-strokeプロパティとサブプロパティの実装
• translate、scale、rotateプロパティの実装

最後のtranslate、scale、rotateプロパティですが、これはCSS Transformsの変換関数だったtranslate()、scale()、rotate()をプロパティ化したものです。プロパティになったので記述の短縮になりますし、書き順で結果が変わってしまうことのあるtranslateプロパティでの指定よりも、意図した効果を実現しやすくなります。

すでにChromeで実装されており、Edgeでの実装もとてもうれしい…と書いていたのですが、手元でちょっと試したところ未知のプロパティとなってしまいました…秋の新しいバージョンに期待します。

Firefoxのリリースプロセスに変更、Auroraチャンネルが廃止

4月18日より、Firefoxのリリースサイクルが変更されました。

• Simplifying Firefox Release Channels and Improving Developer Edition’s Stability
• Dawn project or the end of Aurora

これまでのFirefoxは、「Nightly → Aurora → Beta → Release」と4つのチャンネルに分かれていました。このうち、Auroraチャンネルが廃止され、「Nightly → Beta → Release」と、1サイクル短くなります。これにより、新しく実装された機能が手元に届くまでの期間が、これまでより1サイクルぶん（6〜8週）短くなります。

Auroraチャンネルはこれまで、Developer Editionという名前のビルドとして提供されていました。Developer Editionというシステムは廃止されないようですが、中身はBetaチャンネルになります。Beta版とのリリースとの違いは、Developer Editionはこれまで通り異なるプロファイルが作られることなどにあります。

Auroraチャンネルの廃止によって、4月19日にAuroraチャンネルに移行予定だったFirefox 55は次のサイクルまでNightlyに留まります。Nightlyが2サイクル分続くので、Firefox 55で導入される機能の数がいつもより増えるかもしれませんね。

Firefox 53リリース

4月19日に、Firefox 53がリリースされました。

• Firefox — Notes (53.0) — Mozilla
• Firefox 53: Quantum Compositor, Compact Themes, CSS Masks, and More ★ Mozilla Hacks

今バージョンからWindows XPとVistaのサポートがされなくなった（Firefox 52 ESRのサポートに移行）ほか、Macでは64ビット版のみになったことでアプリケーションのファイルサイズが減少しました。UIまわりでは、パーミッション関連のUIが改善されています。

また、Firefox Developers Editionのテーマだった「Compact」テーマがリリース版にも同梱されました。

グラデーションがなくなりフラットになった。画像はLightだがDarkテーマも。

レンダリングエンジン周りでは、以下のあたらしい機能がサポートされています。

• Firefox 53 for developers – Mozilla | MDN

CSS Textの実装で日本語の扱いが向上

Firefox 52から部分的にサポートされていたのですが、CSS Text Level 3の「Segment Break Transformation Rules」が実装され、日本語や中国語の文字間などに改行がある際の処理が変更されました。

Webページを表示するとき、HTML中の改行は半角スペースに変換されて表示されます。

<p>Hello↵
World</p>

こういう風に、改行前後に空白がなくても、「HelloWorld」ではなく「Hello World」と表示されます。この処理、単語の区切りに空白を使う言語ではよいのですが、日本語などでは不自然な箇所で空白が入ってしまい煩わしいです。

CSS Text Level 3では、改行前後の文字を見て、それが日本語や中国語のものであれば、その改行を除去して扱うという仕様が加わりました。以下のエントリで細かくまとめられています。

• 区分分断の変換規則 – おいしい

この仕様の実装によって日本語内での改行が省かれるので、改行がつくる空白に依存しているコンテンツがあれば、見た目に影響がでるかと思います。

display: flow-root

displayプロパティの値にflow-rootが加わりました。floatの解除には::afterを使う、display: tableを使うなどがありましたが、ちゃんとした方法になります。

CSS Alignmnent Level 3のplace-items, place-self, place-contentがサポートされました。FlexboxやGridで使われるalign-items/align-self/align-contentとjustify-items/justify-self/justify-contentをまとめて指定するプロパティです。

caret-colorプロパティ

先月リリースされたChrome 57でサポートされた、caret-colorプロパティがFirefoxにも導入されました。3月にリリースされたChrome 57でサポートされており、そちらで簡単に取り上げています。

CSS Transitions仕様に追加されたtransitionstart, transitionrun, transitioncancelイベントがサポートされました。MozillaのBrian Birtlesさんのブログエントリで、導入の経緯も含め簡単に紹介されています。

• MozAnime in 2016 | Nothing new

その他

アルファチャンネルを持つWebMがサポートされました。Chromeチームがつくったデモで確認できます（だいぶ気味の悪いデモですが…）

ビデオ関連では、video要素などのplay()メソッドがPromiseを返すようになりました。

auxclickイベントが実装されました。主要なボタン以外のボタンがクリックされたときなどに発火するイベントです。ChromeもChrome 55から実装しています。

• auxclick is Coming to Chrome 55

Chrome 58リリース

abbrのデフォルトスタイルが変更に

略語をマークアップするabbr要素のデフォルトスタイルが変更され、CSS3のtext-decorationプロパティを使うようになりました。以下のスタイルが、ChromeのUAスタイルシートに追加されています。

abbr[title], acronym[title] {
    text-decoration: dotted underline;
}

FirefoxもFirefox 40で変更されています。

• Firefox 40 で abbr 要素のデフォルトスタイルが変更 | フロントエンドBlog | ミツエーリンクス

多くはないと思いますが、使われているサイトでは、二重線になってしまうケースがあるかもしれません。

color-gamut媒体特性のサポート

メディアクエリーのcolor-gamut媒体特性がサポートされました。

• color-gamut media query ― Media Updates in Chrome 58

color-gamutはディスプレイの色域が特定ものにマッチするかを調べる媒体特性で、Safari 10.1でサポートされています。

この配信は、さまざまな業況を見ながら順次行われていきますが、もし、自分の番まで待ちきれない、という人は、4月6日（日本）からすでに利用可能になっている Windows 10更新アシスタントを使用してマニュアルインストールをしてもよいでしょう。

このアップデートではWindows 10そのものにさまざまな機能追加が行われることはもちろん、そこに搭載されるWebブラウザーMicrosoft Edgeにも新機能が追加されます。

今回の記事では、Windows 10 Creators Updateに搭載される Microsoft Edgeの新機能について紹介します。

Windows 10 Creators UpdateでのMicrosoft Edgeの新機能

Microsoft Edgeは安全性と相互有用性、パフォーマンスの向上を中心に継続的に機能改善が行われています。具体的には、DOMパーサーやJavaScriptエンジンの性能向上であったり、低電力性能の向上、サンドボックスの機能向上といったものです。そういったものは、内側の強化であるため、なかなかユーザーの目に触れることはありませんが、着実に進化しています。こういった部分はEdge開発チームのブログで詳しく紹介されていますので、ご興味のある方はぜひこちらをご覧ください。

• Microsoft Edge Dev Blog

今回のこの記事では、「誰からも使用可能なUIを持った部分」を中心にWindows 10 Creators UpdateでMicrosoft Edgeに追加された新機能を紹介します。

タブ機能の強化

Webブラウザーにおけるタブは、いまや ユーザーがWebを閲覧するうえでの重要なUIとなっています。Webブラウザーに読み込んだWeb サイトの画面を効率的に整理できれば、コンテンツにより没頭できますし、必要な情報の入手は把握もはかどることでしょう

前回のWindows 10 Anniversary Updateで、Edgeのタブには「お気に入り」や「プレビュー」機能が追加されましたが、Windows 10 Creators Updateではさらに使い勝手を向上させるための機能が追加されています。

表示中のタブの終了と保存、そして復元

現在開いているタブをすべて閉じたあと、任意のタイミングで元通りに戻すことができます。これを行うにはMicrosoft Edgeウィンドウの左上の端から2番目の[表示中のタブを保存して閉じる]  アイコンをクリックします。

表示されているタブはすべて閉じられますが、タブが表示していたWebサイトのURLは保存されており、ウィンドウ左上隅にある[保存して閉じたタブ]アイコンをクリックするとその一覧にアクセスできます。

同アイコンをクリックすると、画面の左側に保存されたWebサイトのサムネイル画像を含んだブレードが表示されます。

タブは、保存されたタイミング単位で複数のものがまとまって保存されています。

保存されたタブを再度表示するには、ブレート内のサムネイル画像をクリックします。もしくは、同じタイミングで保存されたタブを一度に戻すには 、同ブレードの右端にある[タブの復元]リンクをクリックします。

また[タブの復元]メニューの横にある […](その他) メニューをクリックするとタブのURLを [お気に入り] に追加したり、タブを他のアプリで共有したりできます。

タブのプレビューの一覧

前回のWindows 10 Anniversary Updateでは、タブがロードしているWebコンテンツのプレビューを表示する機能が追加されましたが、Windows 10 Creators Updateでは、これを一覧表示できるようになりました。

この機能を使用するには、Edgeウィンドウ内にあるタブの右端にある[タブ プレビューを表示]アイコンをクリックします。

各タブの下にプレビュー画面がサムネイル表示されます。

元に戻すには再度[タブ プレビューを表示]アイコンをクリックします。

Web-to-App のサポート

Webからアプリへのリンク(Web-to-App)をサポートするWebサイトへのリンクをクリックすると、設定アプリのWebサイトのアプリセクションで設定されているように、それぞれのアプリでそのページを開くようになりました。

Web-to-Appがどういうものであるか知りたい方は以下のドキュメントをご覧くださいませ。

• Web-to-App Linking with AppUriHandlers
• アプリのURIハンドラーを使用してWebとアプリのリンクをサポートする

ジャンプリストから直接InPrivateウィンドウへ

Internet Explorerのように、タスクバーのアイコンを右クリックした際に表示されるジャンプリストから、直接InPrivateウィンドウを開くことができるようになりました。

InPrivateウィンドウを使用すると、履歴などプライバシーに関わる情報を保護することができます。他人知られたくないWebサイトを閲覧をするときはもちろんですが、Webサイトのサービスへ、別アカウントでログインする際や、自動で認証されているアカウントの影響により操作がうまくいかないといった場合にも役に立ちます。

Webノートの機能強化

Microsoft Edgeのもっとも特徴的な機能であるWebノートに、そのアイコンの変更が示すとおり(?)ささやかですが新機能と変更が加えられています。

Webノートのメニューの位置はそれまで、画面左上に表示されていましたが、今回のアップデートでは画面右上に移動されています。

タッチによる手書きのサポート

[タッチによる手書き]メニューが追加されました。これまでも、メニューがないだけで、タッチによるWebノートの書き込みを行うことができましたが、これをオフにすることができませんでした。今回のアップデートでは、[タッチによる手書き]メニューをクリックすることで、機能のオン/オフを切り替えることができます。

ペンの色とサイズの強化

[ボールペン]や[蛍光ペン]メニューをクリックした際に選択可能な色が増え、ペン先の太さもスライダーで変更できるように強化されました。

ここで選択された内容は、前出の[タッチによる手書き]にも反映されます。

共有機能の変更

アイコンのデザインに合わせたのかどうかは定かではありませんが、Webノートの共有機能のデザインが変更になっています。

以前はWindows 8.xの“チャーム”のようなブレードがウィンドウの右側からせり出してきていましたが、今回のアップデートではダイアログボックスが表示されるようになっています。

EPUBのサポート

EdgeでEPUB形式の電子書籍ファイルがサポートされました。

EPUB用に特別にアプリケーションをインストールしなくても、直接ファイルの内容を閲覧することができます。

著作権の関係で、文面の表示された画面ショットをお見せできませんが、日本語の表示はもろろん、縦書きも問題なく表示されます。

目次、ブックマーク、検索しもちろんのこと、文章の読み上げや、

テキストのサイズや文字間隔、フォントスタイルやテーマなども柔軟に変更することができます。

EdgeのEPUB機能については、Jun Tajimaさんが詳しいレビューを書かれておりますので、ご興味のある方はぜひご覧くださいませ。

Flashコンテンツの挙動の変更

Windows 10 Creators Updateから、信頼できないFlashコンテンツは既定でブロックされており、ユーザーが明示的にプレイするまで実行されないようになりました。これにより、セキュリティ、安定性、パフォーマンスが向上し、選択した時点でFlashを実行するというオプションが選択できます。

Flashコンテンツがブロックされたときに明確にするためにURLバーはダイアログボックスが表示されます。一度、または同じサイトに戻るたびにFlashを許可するパズル アイコンをクリックします。

Microsoft EdgeにおけるFlashコンテンツの動作はWindows 10 Creators Updateで変更されています。この変更についての詳細はMicrosoft Edge Dev Blog: Extending User Control of Adobe Flash with Click-to-Run. をご覧ください。

フルカラーemojiのサポート

Microsoft Edgeでは、絵文字 (emoji)を使用しているWebサイトにフルカラーの新しくなった絵文字が既定で表示されるようになりました。

この絵文字は、Windows 10のソフトウェアキーボードなどからも入力することができます。

これら絵文字は、一般的なSNSなどでは画像で変換されて、スマートフォンなどからでもきちんと見ることができます。

API のサポート

Windows 10 Creators UpdateでEdgeがサポートしたAPIは、細かくはさまざまなものがありますが、ざっくりとは以下のとおりです。

• Ambient Light Sensor API
• Async Functions
• Brotli Compressed Data Format
• Content Security Policy Level 2
• CSS outline-offset
• Destructuring (ES6)
• H.264/AVC for RTC
• Intersection Observer
• Modules (ES6)
• Payment Request API
• RegExp Built-ins (ES6)
• SIMD
• VP8 for RTC
• WebRTC – WebRTC v1.0 API
• WebVR

これらのいくつかについては、Microsoft Edge Dev Blogに記事が投稿されているので、私が抄訳したものと合わせて紹介させていただきます。

• Microsoft EdgeでのWebRTC 1.0および相互運用可能なリアルタイム通信の紹介
• Content Security Policy Level 2 サポートの概要
• よりシンプルなWebの決済方法 : Payment Request API の紹介
• CSS Custom Properties in Microsoft Edge

Progressive Web Apps 対応は?

Progressive Web Appsへの対応は、多くの開発者が気になるところでしょう。Microsoft Edge DevelopmentのPlatform Statusで確認すると、Progressive Web Appsを構成する所要機能のいくつかのステータスが IN DEVELOPMENT (開発中)のままになっています。

しかし、これらの機能は、試験的にWindows 10 Creators UpdateのEdgeに搭載されており、検証に使用することができます。

これらの機能を試すには、アドレスバーにabout:flagsと入力して [開発者向け設定画面]を表示し、以下の該当する機能のチェックボックスにチェックをつけ、Edgeを再起動します。

拡張について

Windows 10 Creators Updateにより、Edge拡張はネイティブメッセージングを使用して、ユニバーサルWindowsプラットフォーム（UWP）アプリケーションと通信することができるようになりました。Edge拡張はChromeやFirefoxの拡張と同じネイティブメッセージングAPIを使用します。 ただし、Edgeのネイティブメッセージングホストは、Universal Windows Platformを使用して実装する必要があります。

この機能を使用すると、Webアプリケーションでは実現できないプラットフォーム固有やハードウェアリソースを利用したソリューションをUWPアプリと連携して実現することができます。

詳しくは以下のドキュメントをご参照ください。

• Native messaging in Microsoft Edge

管理者向け機能

Microsoft EdgeにはWindowsドメイン環境下で管理者が設定を一括管理するためのグループポリシーが用意されています。

Windows 10 Creators Updateにより、Microsoft Edgeには、10個の新しいグループポリシーが追加されました。

具体的には以下のものになります。

その他、Microsoft Edgeに指定可能な既存のグループポリシー設定については、以下のドキュメントをご参照くださいませ。

• Microsoft Edgeで利用可能なポリシー

その他

Windows 10 Creators Updateについての細かな機能追加や修正、変更については、Microsoft Edge DevelopmentのChangelogで確認することができますので、Edgeの変化についてより詳しく知りたい方はぜひアクセスしてみてください。

• Microsoft Edge build 15063 changelog

また、Windows マシンをお持ちでない方は、ぜひ無償の検証用仮想マシンやリモート環境をお試しください。

2017年1月は新年早々いろいろ動きがありました。Firefox 51とChrome 56のリリース、Safari 10.1発表、Windows 10 Creator’s UpdateのEdge、WebKitにWebRTCとCredential Management API、Facebookとブラウザベンダー協力の話など、注目ニュースが満載です！

Firefox 51リリース

1月24日に、Firefox 51がリリースされました。

• Firefox Gets Better Video Gaming and Warns of Non-Secure Websites | The Mozilla Blog
• Firefox 51.0 リリースノート

WebGL 2のサポートや、非HTTPSなページ上のパスワードフォーム入力についてのUI改善が目玉ですが、すでに知っているところだと思うので、地味なところをとりあげます。

• Firefox 51 for developers – Mozilla | MDN

::placeholder 疑似要素と :placeholder-shown 擬似クラスが実装されました。input 要素やtextarea 要素の placeholder 属性で指定するプレースホルダ周りのスタイルを調整するためのものです。前者はプレースホルダのテキストを、後者はプレースホルダが表示されているときの要素（input など）を表します。

SVGでは、xlink 接頭辞なしの href 属性がサポートされました。これまでSVG内で外部リソースを読み込んだりSVG内の要素を参照する際は、XLinkを使っていました。SVGがXMLのフォーマットというところに由来するのですが、名前空間の扱いの難やHTMLとの親和性などをふまえ、SVG 2.0で名前空間なしの属性が導入されました。

この名前空間なしの href 属性ですが、Internet ExplorerがSVGを初実装したIE9から使えます。SVGを実装するにあたって、検討段階だったSVG 2.0で取り入れたい機能の先行実装をさせたという話を以前SVG WGの人に聞いたことがあります。

SVGまわりでは、tabindex 属性や data- 属性に対応しました。使えなかったのに驚く方もいるかもしれませんが、これらはHTMLのグローバル属性だったので、SVGの要素では使えず、dataset プロパティなどのアクセサリーもなかったのでした。これらもSVG 2.0で導入されたものです。

Chrome 56リリース

1月25日に、Chrome 56がリリースされました。

• New In Chrome 56  |  Web  |  Google Developers

パフォーマンスの観点から、タッチイベントハンドラの passive オプションがデフォルトで true になりました。Android版Chromeでは多くの場合、スクロールがスムーズになるとのことです。

CSSでは、position: sticky が復活しました。むかーしむかし実装されていたのですが、パフォーマンスの観点から削除されていたのでした。scroll イベントを監視しなくてもよくなるので、パフォーマンス向上が期待できる機能です。

Web PaymentsのPayment Request APIに追加された　canMakePayment()　メソッドがサポートされました。このメソッド、昨年AppleがWebでのApple Payを発表した祭、Web Paymentsにないものとして上げていたメソッドのひとつです。Web PaymentsのアクティビティにもAppleが関わり、APIの差異を埋めているようなので、今後に期待ですね。

他にも、border-image-repeat: spaceがサポートされています。これでようやく実装がそろった感じですね。

Safari 10.1発表

macOS Sierra 10.12.4のベータ版が開発者向けに公開され、Safariが10.1にアップデートすることがわかりました。昨年春にリリースされたSafari 9.1のように、WebKitがアップグレードされ、新しい機能が導入されます。

• Safari 10.1

APIの目玉はCustom Elementsでしょうか。Safari 10でもShadow DOMがサポートされたので、Web Componentsがまたさらに進みます。
ほかにも、Fetch APIやIndexed DB API　2.0, Gamepad APIがサポートされます。Gamepad APIはすこし意外ですね…ブラウザでゲームパッドを使うようなゲームを提供する顧客がいるのでしょうか？

JavaScriptでは、ES2017仕様のAsync Functionsや SharedArrayBuffer に対応します。

HTMLでは、HTML 5のフォームバリデーション機能がついに実装されました。これまでもDOM上では検証していたのですが、invalidな際にフォームの送信をブロックするという挙動を実装していなかったのでした。

• HTML Interactive Form Validation | WebKit

CSSではGrid Layoutが有効になります。リリース時期を春とすると、FirefoxやChromeと同時期になります。いっきに使いどころが増えそうです。

Windows 10 Creator’s UpdateのEdge

Microsoftのブログが活発に更新され、Windows 10 Creator’s Updateで提供される各種機能の紹介がされています。先月から引き続きいくつか取り上げます。

• Microsoft Edge helps you organize your web – Windows Experience BlogWindows Experience Blog

このエントリでは、タブのサムネイルや一時退避といったブラウザのUIの機能（Operaみたいですね）や、EPUB、Payment Requset APIのサポートなど、EdgeHTML 15で目玉になる機能をまとめています。

• Introducing WebRTC 1.0 and interoperable real-time communications in Microsoft Edge – Microsoft Edge Dev Blog

WebRTC 1.0は互換性のため実装を始めたもので、あくまでORTCを推奨していくという立場のようです。コーデックもVP8をサポートしましたが、ソフトウェアでコードのため電力消費やCPUの使用はH.264よりも高いとのこと。

他にも、Content Security Policy Level 2のサポート、フルカラー絵文字のサポートもあるようです。

WebKitにWebRTCとCredential Management API

Safari 10.1もうれしいですが、次期メジャーバージョンでも嬉しい機能が入りそうです。

ひとつは、WebRTCです。1月19日に、Appleのエンジニアによって、WebKitにWebRTCのライブラリがチェックインされました。

• Changeset 210942 – WebKit — Source/ThirdParty/libwebrtc: [WebRTC] Upload libwebrtc code base ​

WebRTCについては、getUserMedia() の実装が進んでいましたが、通信周りのAPIは特に進んでいませんでした。EdgeもEdgeHTMLでWebRTC (1.0)を実装しますが、ようやくといったところでしょうか。

コミットログを読むと、Chromeのソースコードをインポートして利用しており、Chromeとの互換性がなかなか期待できそうです。

もうひとつは、Credential Management APIです。1月24日に、AppleのエンジニアがWebKitにCredential Management APIを実装予定という旨のメールをメーリングリストに投稿しています。

• [webkit-dev] Implement Credential Management Level 1

Credential Management APIはパスワードやソーシャルログインなど、ユーザーの認証情報を抽象化して扱うAPIで、ログイン周りの煩雑さを解消できます。現在はChromeでのみ使えますが、Safariでも使えるようになるとモバイルでのログイン周りがとても便利になりそうです。

次期iPhoneで顔認証が導入されるといった噂を目にしていまし、信憑性が高まった気もします。

Facebookとブラウザベンダーの協力

Facebookの開発者ブログに、ブラウザベンダーと協力してFacebookへのリクエストを省力化したという話が掲載されています。あわせて、Chrome、Mozillaの開発者ブログでも紹介されています。

• This browser tweak saved 60% of requests to Facebook | Engineering Blog | Facebook Code
• Chromium Blog: Reload, reloaded: faster and leaner page reloads
• Using Immutable Caching To Speed Up The Web ★ Mozilla Hacks – the Web developer blog

Facebookは各種アセットを、ハッシュ付きURL＋長大なキャッシュ有効時間というキャッシュ戦略で運用しています。キャッシュの有効時間が長ければ、ブラウザは再読込の際に同じリソースをダウンロードする確率が低くなるので、ネットワークにやさしいです。

しかし、これまでのHTTPキャッシュでは、ダウンロードは防げても、リクエスト自体は起こってしまっていました。パフォーマンスの観点からもうれしくありません。Facebookが自身のアクセスを解析したところ、全体の60％がそういったリクエストだったそうです。更に調べると、他のブラウザが13％〜22％だったのに対し、Chromeだけは63％ととても高い数値を示していたとのこと。

これを解消しようとFacebookのエンジニアがChromeチームに働きかけ、挙動を変更。結果63％だったものが24％まで減少したとのこと。

Firefoxでは、Chromeと同様の挙動変更を行わない代わりに、Cache-Control: immutable という新しいヘッダの値を実装しました。このヘッダについては、Jxckさんが自身のブログにまとめているのでそちらをご覧ください。

• Cache-Control の Immutable 拡張によるリロード時のキャッシュ最適化 | blog.jxck.io

月に一度、前の月にリリースされたブラウザに導入された機能を取り上げるこのシリーズも、先ほど振り返ったところ一年ちょっと続いていたのに気づきました。
2017年も地味に更新していこうと思います。よろしくお願いいたします。

Chrome 55リリース

12月1日に、Chrome 55がリリースされました。新機能は、ベータ版が出た際に公開されたエントリにまとめられています。

• Google Developers Japan: Chrome 55 ベータ版: 入力ハンドリングの改善と async / await 関数

ECMAScript 2017に導入されるAsync Functionsがサポートされました。導入された async, await というキーワードを使うと、Promiseが関わる非同期処理を同期処理に近いかたちで記述できます。

• Async functions – making promises friendly  |  Web  |  Google Developers

他のブラウザでもすでに開発版で実装されており、それぞれの開発者向けバージョンでテストできます。Promiseを多用するService Worker内のコードなどは、トランスパイラなしでも利用できますね。

Pointer Eventsも実装されました。Pointer EventsはMicrosoftがW3Cに提出し標準化された、タッチやマウス、ペンなどの入力方式を「ポインタ」としてまとめ扱うイベントです。タッチ＋マウスなアプリを作る際に、別々のイベントモデル用のコードを書く手間が省けるのが利点です。

• Pointing the Way Forward  |  Web  |  Google Developers

ほか、addEventListener() のオプションに once が加わりました。先月のFirefox 50リリースでも取り上げたもので、一度だけ呼び出されるイベントリスナを設定できます。

Windows 10 Creators UpdateのEdge

ことし2017年リリースのWindows 10 Creators Updateでは、Edgeももちろん更新予定です。あたらしくEdgeHTMLに搭載される機能が、Edgeのブログで少しずつ紹介されてきました。

• Microsoft Edgeでの Brotli 圧縮の導入 | Microsoft Edge Japan
• よりシンプルな Web の決済方法 : Payment Request API の紹介 | Microsoft Edge Japan

BrotliはWOFF 2.0で使われている圧縮アルゴリズムですが、HTTPでも利用できます。すでにFirefox, Chromeですでにサポートされていますが、ここにEdgeが加わります。

Payment Request APIは、Chrome 53から実装され始めたAPIで、決済情報入力の煩わしさを解消するAPIです。

• Payment Request API で簡単・高速な決済を実現する  |  Web  |  Google Developers

Chromeでは今のところAndroid版でしか有効になっていませんが、Edgeではモバイル・デスクトップ両方で有効になるようです。Firefoxも実装を表明しています。

ほか、EdgeHTML 15で導入されるかはわかりませんが、Platform Statusページで開発中・プレビュー版にある機能の一覧を見ると、Service Workerやその関連API、CSS Custom Properties (Variables)などが並んでいます。これらのアナウンスもあるとうれしいですね。

2017年はFlashの実行に許可が求められる

2017年は、多くのベンダーがFlashの自動実行をやめることを宣言しています。12月は、Chrome, EdgeでのFlashの扱いについて、現状や今後の計画が改めて発表されました。

• Google Developers Japan: HTML5 デフォルト化のリリース計画について
• Click-to-Runでの Flash のユーザーコントロールの拡張 | Microsoft Edge Japan

ChromeはChrome 56より、ページのFlashの実行には基本的に許可を求めるようになります。ただし、それまでアクセスしたページなど、関わり度合いの高いページについては、許可を求められる時期が遅れます。2017年10月からは、新規アクセスしたページのFlashコンテンツについては、許可を求められます。

Edgeについても、Creators Update以降は基本的に許可が必要になります。ただしChromeと似たようなかたちで、初期はFlashのリソース消費度合いを元に例外を設けるようです。あるていど後に、こちらも許可を求めるようになるそうです。

Firefoxも、2017年から許可を設けるとすでに発表しています。

• Firefox 内での Adobe Flash 使用量を削減します | Mozilla Japan ブログ

Safariについては、けっこう前のバージョンからFlash Playerが搭載されていません。なのでまずインストールが必要というところですでにある程度ブロックされていると思うのですが、Safari 10からはインストールされていたとしても実行にはユーザーの許可が必要になりました。

• Next Steps for Legacy Plug-ins | WebKit

Flashを使うコンテンツも少なくなってきましたが、デフォルトでブロックされるようになると、新規に作るサービスではさらに採用が減りそうですね。

2016年8月のブラウザ関連ニュースは、8月2日にリリースされたFirefox 48、8月31日にリリースされたChrome 53について紹介します。

Firefox 48リリース

8月2日に、Firefox 48がリリースされました。マルチプロセスが状況に応じて有効化されたり、Chrome拡張API互換のWebExtensionsが安定版となったりしました。

Web関連の新機能ですが、Web Animations APIのひとつ Element.animate() がサポートされました。

• Animating like you just don’t care with Element.animate

とても雑に紹介するならば、jQueryの animate() メソッドの標準版です。とはいってもCSSアニメーションとおなじバックエンドを使うため、基本的にjQueryのアニメーションよりもスムーズ・低負荷なものになるはずです。

CSSでは text-combine-upright: all がサポートされ、縦中横ができるようになりました。縦中横は日本語の縦書きで、短い桁の数値を一文字分に収めたりするのによく使われています。

通常は横に寝てしまう「28」を縦中横にしたので、ちょっと読みやすくなった

開発者ツールには、Firebug由来の機能が追加されました。ほかにも、CSSのルールを編集する際によく使われるプロパティ名が優先的にサジェストされるなど、細かなところの使い勝手が向上しています。

• Developer Edition 48 – Firebug features, editable storage, inspector improvements and more…

EdgeHTML 14リリース

8月3日にWindows 10 Anniversary Updateがリリースされ、Microsoft EdgeもEdgeHTML 14を搭載した新しいものにアップグレードされました。

• Introducing EdgeHTML 14 with the Windows 10 Anniversary Update

このAnniversary Updateで、Edge公開時点のロードマップで言及されていた拡張機能がついに導入されました。こちらもChrome拡張APIと互換となっています。これで拡張を作るモチベーションが多少上がりますね。

EdgeHTML 14で導入されたWeb関連機能は多岐にわたります。Web Notifications APIやWOFF 2.0などはすでに実装・利用されていますが、Fetch APIやES 2015, ES 2016など他のブラウザと同じ時期に実装しているものもあります。また、FIDO 2.0などはEdgeが先行しています。今後の動向も注目です。

Chrome 53リリース

8月31日に、Chrome 53がリリースされました。

52でのMac版に続き、Windows版でも見た目がすっきりしました。これについて、リデザインに関わったGoogleのSebastien Gabrielが、その経緯や技術的なところをMediumに投稿しています。

• Redesigning Chrome desktop

Material Designへの移行にあたり、SVGでおこしたデザインをコードに変換する方法に切り替えたことで、使っていた画像のアセットが大幅に減ったといった話などは面白いですね。

Web関連機能では、新しいShadow DOMのAPI、通称「Shadow DOM v1」が実装されました。

• Shadow DOM v1: self-contained web components

Shadow DOMはChrome 35から実装されていますが、これは「v0」と呼ばれる、Blinkのみでしか使えないものです。標準化が進むにつれ、APIに結構大きな変更が生まれたため、新しいAPIは「v1」として区別されています。v1 APIは他ベンダーの合意もとりつけ、Safari 10でも実装されます。

Android版では、Payment Request APIが有効になりました。

• Payment Request API で簡単・高速な決済を実現する
• Payment Request API integration guide

モバイルで決済をする際にとても煩わしいのが、決済フォームへのクレジットカード番号や住所の入力でしょう。Payment Request APIは、端末やブラウザに保存されている情報を利用し、それらをブラウザ側で用意されたUIで提供することで、決済周りの体験をスムーズにする目的で策定されているAPIです。

こちらもAndroid版ですが、muted 属性が指定された video 要素に限り、autoplay 属性や play() メソッドによる自動再生が可能になりました。

• Muted autoplay on mobile: say goodbye to hacks and animated GIFs!

これまではビデオの自動再生ができなかったため、アニメーションGIFやCanvasで擬似的に行うといったハックが使われていました。しかしアニメーションGIFには容量の増大や色数の制限、描画パフォーマンスなどに問題がありますし、CanvasもビデオファイルをJavaScriptでデコードするといった無茶をしており、うれしくありません。こうした本末転倒な状況を解消するため、無音状態に限り自動再生できるように要件が緩和されました。

同様の変更は、iOS 10のSafariでも行われます。

• New <video> Policies for iOS

多くのサイトが、負荷の高いアニメーションGIFからビデオに移行してくれればなあと強く思います。

6月7日にリリースされたFirefox 47や、WWDCで発表されたSafari 10、WindowsにおけるProgressive Web Apps対応など、6月も注目のブラウザニュースをお届けします。

Firefox 47リリース

6月7日にFirefox 47がリリースされました。

• Firefox 47 for developers

今回は開発者ツールを取り上げましょう。まずはResponsive Design ModeでUA文字列をカスタマイズできるようになりました。いまのところプリセットがないので面倒ではありますが、そこそこ便利です。

さて、これはいいなと思ったのが、コンソールの複数行入力です。以前からShift+Enterで可能でしたが、Shiftを押し忘れてしまって赤い SyntaxError を見るなんてひとは多かったのではないでしょうか。

Firefox 47の開発者ツールは入力中のコードの構文を解釈するようになり、{ など「開いている」状態でEnterを押すと自動的に複数行入力になります。foo(...) など「閉じている」場合はふつうに評価されます。

構文エラーを意図的に入力したい方には不便かもしれませんが、基本的にはとても便利です。
ちなみにSafariではたしかSafari 7くらいからできます。

ほか、Service Worker関連のデバッグに便利な機能が多数追加されています。

Safari 10発表

6月13日から17日までAppleのWWDCが開催され、MacのOSがOS XからmacOSになるなどいろんなことが発表されました。
SafariもSafari 10になることが発表されました。すでに実装される機能が公開されています。

• Safari 10.0

ES6のサポートはうれしいですね。Indexed DBやCSS Filtersの接頭辞削除など、互換性も向上しています。
フォント関連機能にも大きな進展があります。Font Loading APi、WOFF 2.0、unicode-range のサポートが追加されました。とくに日本語のWebフォントは容量が大きいので、これらの機能はうれしいですね。

• Improved Font Loading

このエントリでは、先日Webフォントの読み込み中の挙動が変更されたことも書いてあります。これまではWebフォントが読み込まれるまでテキストが表示される問題でしたが、今回の変更でFirefoxやChromeと同じく、Webフォントの読み込みに時間がかかる場合は3秒後にフォールバックのフォントで一旦表示するようになりました。Safari 10の紹介には書いてありませんが、この変更が取り込まれてることを祈りましょう。

Keynoteで発表されたApple Pay on the WebについてはSafariでのみしか利用できない、Web Paymentsワーキンググループで策定している標準APIではないといった批判の声もあります。これについてはAppleのEdward O’ConnorがWeb Paymentsワーキンググループに対して説明をしています。

• Apple Pay on the Web

マーチャントの検証機能や canMakePayments() といった標準にはないメソッドがApple Payにはあるそうです。AppleもWeb Paymentsワーキンググループに参加していますし、標準APIもよいものにしていってほしいですね。

また、Flashコンテンツについても、ユーザーのアクションなしには実行できないようになると発表されました。

• Next Steps for Legacy Plug-ins

MacにはFlash Playerがプリインストールされていないので、インストールしていない人もいるかと思います（Chrome内蔵のFlash Player経由で見るなどは大いにありそうですが）。他のブラウザーもFlashをなるべく実行しないように動いていますし、HTML5なコンテンツへの移行が急務になりそうですね。

EdgeとProgressive Web Apps

Microsoft EdgeチームのJacob Rossiが、MediumにWindowsにおけるWebアプリのこれまでと今後のProgressive Web Apps対応について投稿していました。

• The Progress of Web Apps — On the Edge — Medium

WindowsにおけるProgressive Web Apps対応は、ChromeやOperaのそれよりも、よりOSの機能との統合を考えているようです。具体的な例としてアプリケーションのリストへの追加や、アプリの設定やアンインストールといったものを紹介しています。また、WindowsストアやBingの検索結果への表示といった、アプリの発見についてもいろいろ考えている模様。PWAをふつうのアプリとして扱うよという強いメッセージを発しています。

この記事と時を同じくして、Push API, Web App Manifest, Cache APIの実装開始も発表されました。Windowsというデスクトップ環境が主流のプラットフォームでWebアプリをどう統合していくか、とても楽しみです。

Chrome 51リリース

5月25日にChrome 51がリリースされました。新しく追加されたAPIはGoogle Developers Japanブログで紹介されています。

• Chrome 51：Credential Management API と画面外レンダリングのオーバーヘッド削減
• ウェブのスクロール パフォーマンスを改善する新しい API のご紹介

Intersection Observerは、ある要素がブラウザの表示域にあるかどうかを検出するAPIです。scroll イベントでの監視や getBoundingClientRect() の呼び出しなど、パフォーマンスを低下させるものが改善できます。

• IntersectionObserver’s Coming into View

応用範囲としては、いわゆるパララックス系のもの、あとは遅延読み込み系のスクリプトでしょうか。後者については泉水さんが自身の画像を遅延読み込みするカスタム要素をIntersection Observerを使うように書き直しています。

• IntersectionObserverを使ってlazyload-imageを書き直した – 1000ch.net

Credential Management APIは、ブラウザのパスワードマネージャと連携し煩わしいログインまわりを改善するものです。

• Credential Management API を使ったサインインフローの効率化
• ブラウザのクレデンシャル管理と連携するCredential Managementを試す – あすのかぜ

最近のブラウザはパスワードマネージャがあるので多少便利になってはいますが、Facebook/Twitterでログインさせるものなどその恩恵を受けられないケースもあります。Credential Management APIはそういった認証情報をうまくまとめて扱えるようにするものです。

他に便利そうなものとして、NodeList インターフェースがiterableになり、querySelectorAll などの結果を forEach() や map() で直接扱えるようになりました。jQueryにまた一歩追いつきました。

DevToolsで試してみました。とはいえDevToolsでは $$() がArrayを返すようになっているので、コンソールからいろいろ扱うならそちらの方が便利かもしれません。

Edge 14の機能紹介

夏に提供されるWindows 10 Anniversary Updateで、安定版を提供予定のEdgeHTML 14。新たに追加される機能がMicrosoft Edge Dev Blogで紹介されています。

• Speed up page load with WOFF 2.0 fonts in Microsoft Edge
• Web Notifications in Microsoft Edge
• Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• Fetch (or the undeniable limitations of XHR)

注目はEdgeHTMLというよりChakraなのですが、ECMAScriptのモジュールでしょうか。ECMAScript 2015仕様のモジュールは構文のみが定義されており、読み込みまわりは実装に委ねられていました。このためどのブラウザでもまだフルに実装されていません。Edgeはエントリ公開時点で提供されたプレビュー版で、一部構文の読み込みを実装したようです。

ESモジュールは現時点では静的なので、パーズ時点でモジュールの場所や利用するメンバーが決定されます。これを利用しEdgeでは読み込みの最適化を行っているようです。

また、実装中のFetch APIを紹介するエントリでは、Service Workerの実装開始が発表されました。Push APIやService Worker版のNotifications APIも検討中らしいので、Windows 10でもより便利なWebアプリを利用できる日は近そうです。

WOFF 2.0も日本語フォントをはじめ、文字数の多いフォントを読み込むには嬉しい対応ですね。

2016年4月のブラウザニュースは、Edge Web Summit、Chrome 50リリース、Firefox 46リリース、WebKitの接頭辞ポリシー変更などについて紹介します。

Edge Web Summit開催

4月4日に、Edge Web Summitが開催されました。Microsoftは前々日にBuildカンファレンスを行っていましたが、Edgeはこちらに集中した印象です。

• Microsoft Edge Web Summit 2016 | Channel 9
• Edge Web Summit 2016 recordings are now available on Channel 9 | Microsoft Edge Dev Blog

新たに発表されたのは、レンダリングエンジンEdgeHTMLのイシュートラッカーです。

• EdgeHTML issue tracker
• Introducing the Microsoft Edge Platform Issue Tracker | Microsoft Edge Dev Blog

Internet Explorer時代にもMicrosoft Connectで公開フィードバックはできましたが、こちらはエンジンのEdgeHTMLに特化しており、開発者とのコミュニケーションを強く意識しているように感じられます。

他にも、Webで使われているCSSプロパティなどを集めたデータも公開されました。ChromeチームもChrome Platform Statusで公開していますが、それと同等のものですね。

• Global CSS Property Usage
• Introducing Global CSS Property Usage on Microsoft Edge Dev | Microsoft Edge Dev Blog

「使われている」の定義にもこだわっているようで、ただCSSファイルを解析しているわけではなく、WebページにアクセスしDOMとCSSOMを構築したうえで調べているとのこと。

現在バグのため padding 利用率が0％になっていますが （CSSの calc() 解釈まわりにバグがあるそう）、そのうち直るでしょう。

また、WebRTC関連のロードマップが更新されたことも発表されました。

• Roadmap update for Real Time Communications in Microsoft Edge | Microsoft Edge Dev Blog

これまでEdgeではORTCをサポートしていましたが、互換性への取り組みからWebRTC 1.0の一部も実装するようです。また、映像コーデックについてはH.264/AVCを実装中、さらに決定ではありませんがVP8も検討しているとのこと。

Chrome 50リリース

4月13日に、Chrome 50がリリースされました。ついに50なのですね。

• Google Chrome Blog: Chrome: 50 releases and counting!

新しい機能についてはBetaリリース時のポスト、およびDev Operaの記事が詳しいです。

• Google Developers Japan: Chrome 50 ベータ版: プッシュ通知の改良、宣言型プリロードなど
• Dev.Opera — What’s new in Chromium 50 and Opera 37

新しい機能として、HTMLの link 要素に preload というものが加わりました。使われるであろうリソースをその種類とともに指定することで、先読みを実施できます。

• Preload: What Is It Good For? – Smashing Magazine
• Prioritizing Your Resources with | Web Updates – Google Developers
• Preload を用いたリソースプリローディングの最適化 | blog.jxck.io

たとえばWebフォントのURLなどに使いやすそうです。外部CSSでWebフォントが定義されている場合、まずそのCSSファイルを取得し解釈したのち、Webフォントをリクエストするため、パフォーマンスの向上が見込めそうです。

他に目立つのは、Canvasの toBlob() メソッドと、 ImageBitmap インターフェースでしょうか。

• Canvas toBlob() support added in Chrome 50 | Web Updates – Google Developers
• Chrome Supports createImageBitmap() in Chrome 50 | Web Updates – Google Developers

toBlob() は toDataURL() の Blob 版です。一度文字列を経由せずに、バイナリデータを直接さわれるのが魅力でしょうか。

ImageBitmap は、Canvasで画像を扱いやすくするAPIです。これまでは効率的に画像のデコードなどを行えませんでしたが、createImageBitmap() を使えば非同期に画像を容易できます。drawImage() のように描画を必要としないのも魅力的です。Workerにも提供されるので、画像の処理を別スレッドにもっていくのも容易です。

すでに他のブラウザでも一部実装されており、toBlob() はFirefox 19とIE10から、ImageBitmap はFirefox 42でサポートされています。

新しい機能が追加される一方で、削除・廃止予定の発表もあります。Chrome 50では、非HTTPS環境でGeolocation APIが利用不可に、同じく非HTTPS環境でAppCacheが廃止予定となりました。

• Geolocation API removed from unsecured origins in Chrome 50
• API Deprecations and Removals in Chrome 50

位置情報の取得をGeolocation APIのみに頼っているサイトはHTTPSへの移行が強く推奨されていますが、Google Maps Geolocation APIなど別のサービスも紹介されています。

機能の削除や廃止については、blink-devメーリングリストで都度アナウンスされるほか、Chrome Platform Statusで「deprecated」「removed」と検索すると、すでに変更されたものも含め一覧を見られます。

また、廃止予定の機能を仕様している場合はコンソールにその旨が出ますので、たまにはちゃんと読みましょう。

Firefox 46リリース

4月26日にFirefox 46がリリースされました。

ES2015 に導入された RegExp の u フラグがサポートされました。絵文字や「𠮷」といったBMP外の文字はES5時代のJavaScriptでは扱いづらかったのでうれしいですね。

これに伴い、input 要素の pattern 属性の解釈を u フラグと同等にする変更がHTML仕様に入り、そちらもあわせて実装されました。たしかにフォームのバリデーションは u フラグつきの方がやさしそうですね。

はてなの開発者向けブログでも取り上げられています。わかりやすいです。

• HTMLのpattern属性とJavaScript正規表現のunicodeオプション – Hatena Developer Blog

また、JavaScriptでのUnicodeの扱いはOperaのMathias Bynesの記事によくまとまっています。彼の講演も面白いですよ。

• JavaScript has a Unicode problem · Mathias Bynens

CSSでは、圏点を表示させる text-emphasis プロパティ群がサポートされました。小説などでは見る強調表現ですが、Webでも太字以外の強調が今後増えてくるのでしょうか。

他には、過去に紹介した -webkit- 接頭辞のプロパティサポートが有効になりました。日本のモバイル向けページなど、-webkit- 接頭辞に強く依存してるページの表示が向上すると思われます。

WebKitが接頭辞のポリシーを変更し、他エンジンに追従

4月26日に、WebKitがベンダー接頭辞に関するポリシーを変更すると発表しました。試験的な機能にベンダー接頭辞をつけることはせず、他エンジンのようにランタイムフラグを設けて試すようになります。

• Updating Our Prefixing Policy | WebKit
• Feature Policy | WebKit

最近はツールの助けもあり、手で -webkit- などを書くことは少なくなっていると思いますが、すでに公開されたページではWebKitの接頭辞に依存したコードが残っていたりします。これをうけEdgeやFirefoxは互換性確保のためいくつかの機能をサポートしています。

接頭辞の廃止については、WebKitもしていきたいとのことですが、機能によりそうです。廃止が現実的でない機能については、Compat Standardでの定義など標準化によるサポートも必要でしょうか。

2016年3月のブラウザニュースは、Chrome 49の新機能、Firefox 45とinnerText、WebAssembly実装のプレビュー、Edgeの拡張機能、Safari 9.1リリースなどについて紹介します。

Chrome 49でCSS Variablesサポート

3月2日に、Chrome 49がリリースされました。新機能はベータ版がリリースされた際にまとめられています。また、同じエンジンを搭載するOpera 36のリリース記事でも紹介されています。

• Google Developers Japan: Chrome 49 ベータ版: CSS Custom Properties、Background Sync、ES2015 の新機能など
• Dev.Opera — What’s new in Chromium 49 and Opera 36

注目はCSS Custom Properties（通称Variables）でしょうか。プリプロセッサやポストプロセッサが持つ変数とちがい、ちゃんと継承されるというのが特徴です。これを利用し、Jake Archibaldが、display の値をカスタムプロパティで定義し、外部CSSが読み込まれた際に block に書きかえさせ段階的にCSSを読み込ませるというアイデアを披露しています。

• Control CSS loading with custom properties – JakeArchibald.com

V8も更新され、ES2015のdestructuringとdefault parametersが使えるようになりました。また、Promiseのrejectionを検知する unhandledrejection イベントおよび rejectionhandled イベントもサポートされました。

Firefox 45と innerText

3月8日に、Firefox 45がリリースされました。

• Firefox 45.0 リリースノート

ES 2015のClass構文が有効にされています。うれしいですね。

他には、他ブラウザとの互換性のため innerText プロパティがサポートされました。要素内の「レンダリングされたテキスト」を取得するプロパティです。

この「レンダリング」というのが曲者です。要素内の文字列を取得するには textContent プロパティがありますが、こちらは「DOM要素内のテキスト」なので display: none などが指定された要素内のテキストももちろん返ります。いっぽう、 innerText はレンダリング結果を考慮するため display: none な要素内のテキストは結果に入りません。

innerText はブラウザ拡張などで外部サイトをいじったりするときには便利だったりしますが、レイアウトを行うためパフォーマンスに影響があります。単純に要素のテキストを取得したい場合は textContent を使いましょう。

WebAssembly実装のプレビュー

3月15日に、Mozilla、Google、Microsoftが、WebAssemblyの実験的なサポート状況について公開しました。WebAssemblyの試験実装は昨年から進められていますが、3ブラウザで相互運用可能な状態になったとのことです。

• WebAssembly が 1 つのマイルストーンを達成しました： 複数ブラウザによる実験的なサポートがはじまりました | Mozilla Japan ブログ
• Google Developers Japan: V8 で WebAssembly を試験運用開始
• Previewing WebAssembly experiments in Microsoft Edge | Microsoft Edge Dev Blog

FirefoxとChromeについては、NightlyやCanaryでフラグを有効にすると試せます。

WebAssemblyについては、中心人物のひとり、MozillaのLuke Wagner氏へのインタビューが面白いです（インタビューの場に混ぜていただきました）。インタビューが行われたMozillaのView Source Conferenceでのセッション資料も参考になります。

• ハイパフォーマンスなWebを実現するasm.js／WebAssemblyとは――Mozillaのルーク・ワグナー氏に聞く：CodeZine（コードジン）
• WebAssembly

また、先日ポッドキャストでのインタビューも行われています。こちらもあわせてどうぞ。

• TechCast #94 – Luke Wagner on WebAssembly

Edgeの拡張がプレビュー版に

Microsoft Edgeの拡張機能が、ついにプレビュー版に入りました。

• Microsoft Edge extensions now available to preview | Microsoft Edge Dev Blog

拡張は正式リリース時にはWindows Storeから追加できるようになるそうです。

拡張の構造はChrome拡張互換のAPIですが、現時点では本家やMozillaのWebExtensionsと少し違い、chrome オブジェクトが browser オブジェクトに変わっているそうです。ちょっと面倒ですね。

• Micorosoft Edge(プレビュー)の拡張を作ってみる – ぷろじぇくと、みすじら。
• Micorosoft Edge(プレビュー)の拡張について調べる、デバッグする方法 – ぷろじぇくと、みすじら。

サポート予定のAPIはロードマップが公開されています。Firefox, Edge, Chromium系で（だいたい）同じコードで拡張が動くようになるのでやる気がでますね。

Safari 9.1リリース、さらにTechnology Preview登場

3月21日に、OS X 10.11.4とiOS 9.3がアップデートされ、Safari 9.1がリリースとなりました。WebKitのブログで新しい機能が紹介されています。

• New Web Features in Safari

新しい機能は内部的に利用されてもいるようで、追加されたCSS Custom Propertiesを使い、Web Inspectorのコードをシンプルにした話もエントリとして公開されています。

• CSS Variables in WebKit

さらに、3月30日、Safari Technology Previewという開発者向けのビルドが公開されました。

• Introducing Safari Technology Preview

Safari Technology Previewはリリース版のSafariよりも新しいWebKitを搭載したビルドで、2週間にいちど更新されます。最初のビルドではES2015のArrow Functionsやイテレータ、Web標準ではShadow DOM (v1)などが使えるようになっています。

なお、レンダリングエンジンのWebKitはこれまでもナイトリービルドを提供していましたが、Safari Technology Previewは独立したUIを持ち、App Storeから更新されるといった違いがあります。

現段階でiOS版のプレビューは提供されていませんが、多くの人がそれを望んでるだろうとは認識しているとのこと。こちらのほうが出ると嬉しいので、要望をあげましょう。