ブラウザ – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 Windows Creators Update,Firefox 53,Chrome 58リリース──2017年4月のブラウザ関連ニュース /myakura/23905/ Thu, 29 Jun 2017 00:30:07 +0000 /?p=23905 連載： WEB標準化動向 (23)

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も更新されました。

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

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

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

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

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のリリースサイクルが変更されました。

これまでの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がリリースされました。

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

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

スクリーンショット：FirefoxのCompact Lightテーマ

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

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

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さんのブログエントリで、導入の経緯も含め簡単に紹介されています。

その他

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

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

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

Chrome 58リリース

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

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

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

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

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

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

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

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

]]> ブラウザ戦争は終わった！Webの最先端と未来を、ブラウザエバンジェリストたちが語る /shumpei-shiraishi/23666/ Tue, 06 Jun 2017 01:00:55 +0000 /?p=23666 連載： de:code 2017 特集 (3)

本記事は、2017/5/23, 24に開催された「de:code 2017」の1セッション、「War is over : ブラウザエバンジェリスト達とWebの未来を語ろう」を聴講したレポートです。

GoogleやMozillaのエバンジェリストたちがマイクロソフトのセッションで仲良くお話、って光景を見るだけでも楽しいセッションでした😊

左からMozilla Japan 技術戦略マネージャ 浅井智也氏、Google デベロッパーアドボケート 北村英志氏、日本マイクロソフト デベロッパーエヴァンジェリズム統括本部 物江修氏

左からMozilla Japan 技術戦略マネージャ 浅井智也氏、Google デベロッパーアドボケート 北村英志氏、日本マイクロソフト デベロッパーエヴァンジェリズム統括本部 物江修氏

Web Payments, WebVR, Web Assembly, Progressive Web Appsについてエバンジェリストたちが語る

Web Payments, WebVR, Web Assembly, Progressive Web Appsについてエバンジェリストたちが語る

Web Payments

物江 まず、Web Paymentsについてお聞かせ願いたいのですが、こちら北村さんご説明をお願いできますか？

北村 まず前提として、インターネットを利用する際に私たちがクレジットカードを利用するようになってから、それなりに時間が経過しましたね。そして現在転換期が訪れているといっていいのではないかと思います。これまでのように、フォームにクレジットカードの情報を生で入れて送信するというので、本当にいいのだろうか。

そうした問題を解決すべく提案されているのが、Payment Request APIです。他のサードパーティ製アプリに遷移して戻ってくるなどのUIを通じて、決済に必要な情報を、スムーズにユーザーに対して問い合わせることができます。

（筆者注: Payment Request APIの日本語による解説記事） （筆者注: よりシンプルな Web の決済方法 : Payment Request API の紹介）

Google デベロッパーアドボケート 北村英志氏

Google デベロッパーアドボケート 北村英志氏

物江 なるほど。このPayment Request APIですが、Edgeではバージョン15からサポートしていまして、Creators Updateを適用したWindows 10上ではすでに利用可能です。Firefoxでのサポートは行われる予定があるんでしょうか？

浅井 はい、時期はまだ言えないのですが、サポートするのは確定しています。

北村 Chromeは現在Android版のみ対応していて、デスクトップ版は開発中です。

物江 あと、iOS版のChromeについても教えていただけますか？

北村 iOS版Chromeは、iOSのWebViewを使っていて、iOSのWebViewはPayment Request APIに対応していません。なので、そのままだとiOS ChromeではPayment Request APIは使えないのですが、実はこれを無理やり使えるようにしてしまおうという計画がありまして。

どう実現するかというと、ChromeからWebViewに対して機能を注入してしまうんですね。WebViewで通常使えないJavaScript APIを使えるようにしてしまう。Cordovaとかでは以前から普通に行われていたことです。

これまではiOSのWebViewに対してJavaScriptをインジェクトして、新しいAPIを使えるようにするということはしてきませんでした。なので、iOS版のChromeにとっては大きな方針転換でもあります。

物江 このように、各種のプラットフォームでサポートがすでに始まっていますので、今年中か、もしくは来年の初めくらいには、一般的に使えるAPIになってそうですね。

浅井 個人的には、（Mozillaの前身である）Netscapeが切り開いた商用インターネットの世界が、ようやくここまで来たか…と感慨深いものがあります。

WebVR

物江 では次はWebVRについてお聞きしていきましょう。WebVRについては、先日のCreators Updateから、1.1のAPIをサポートしはじめました。また、Babylon.jsやA-Frameといったライブラリを使うと、WebVRを簡単に扱うことができると。

浅井さん、A-Frameについて教えていただけますか？

浅井 A-Frameは、Web上で簡単にVRを扱えるようにすることを目指すライブラリです。例えば、HTMLタグを一つぽんと置くだけで360度画像を表示できるようにするとか。

Unityだとアセットストアがあって、アセットを購入したりすることができるのですが、それと同じようなエコシステムがコミュニティ主導で進められているのも特徴です。非常に簡単に3Dコンテンツを作れて、売り買いしながら作っていけるエコシステムができていくだろうと期待しています。

Mozilla Japan技術戦略マネージャ 浅井智也氏

Mozilla Japan技術戦略マネージャ 浅井智也氏

物江 コンテンツで思い出したんですが、意外とWeb上で3Dを扱うような仕事ってまだ少ないらしいんですよね。WebGLがモダンブラウザ全部でサポートされるようになってから結構経つのに、WebGLってどこかゲーム用途のイメージも強いみたいで。

ただWebGLって、本来ゲーム以外の用途もたくさんあるはずなんです。例えばGrimoire.jsっていうライブラリがあるんですが、これは様々な3Dコンテンツを、簡単にWeb上で扱えるようにすることを目的としていて、こういう動きが盛り上がると、WebGLってもっと活用されるんじゃないかと思う。

浅井 その点VRは、コンテンツを中心とした盛り上がりも活発で、結構未来があるんじゃないかな、と思いますね。

物江 ちなみに、VRではなくてMR (Mixed Reality) でいうとHoloJSっていうのもあって、HoloLens用のアプリを作ることもできます…すごく大変なんですけどね(笑)。

ところでChromeも、WebVRには対応済みですよね。何か最近の動きとかを教えていただけますか？

北村 そうですねー、Daydream上でChromeを立ち上げることができるようにする、というのは聞きましたね（筆者注: VR/AR空間内でChromeを立ち上げられるように、ということだと思われる。参考: Chrome is coming to augmented reality and Google Daydream (TechCrunch)）。

WebAssembly

物江 では次は、WebAssemblyのお話を聞かせてください。やはりここは、（WebAssemblyの元になったasm.jsの開発元である） Mozillaの浅井さんにお聞きしようかと。

浅井 はい、WebAssemblyの元になったのはasm.jsという技術です。 もともと、JavaScriptは動的な言語なので、パフォーマンスの向上にも限界がある。そこで、JavaScriptのサブセットとしてasm.jsが提案されたんです。 変数の型が厳密に定義されており、さらに実行に先立ってコンパイルが可能なので、相当に速かった。

WebAssemblyは、さらにそれをコンパイル済みのバイナリとして配布できるようにする技術です。そのバイナリフォーマットに関する仕様がWebAssemblyです。実行速度は相当なもので、現在でもC言語の速度まであと20%というところまで迫っています。

物江 FirefoxやChromeではすでに対応済みなんですよね。Edgeでも、フラグをONにすると使えるようになります。 個人的にはJavaScriptを置き換えるようなものではなく、高機能な計算が必要なところに使うものだと思っていますが、合ってますか？

浅井 はい、そうだと思います。WebAssemblyに出力するのも、基本的にはC/C++やRust言語で書かれたものになりますし。

物江 ちなみに、WebAssemblyへのコンパイルって具体的にはどうやるんですか？

浅井 EmscriptenとBinaryenというツールを組み合わせて、C/C++のコードをWebAssemblyに変換する…というのが一般的ですね。基本的には、LLVMの中間言語が出力できれば、そこからEmscriptenを使ってasm.jsに変換でき、更にBinaryenでWebAssembly化できます。

（筆者注: https://github.com/kripken/emscripten/wiki/WebAssembly も参考のこと）

Progressive Web Apps

物江 昨今のWebの重要キーワード、Progressive Web Appsですが、これは北村さん説明をお願いできますか？

北村 はい。その前に、Progressive Web Appsって、ご存じの方どれくらいいます？…思ったより浸透してないですね。まだまだだな。

Progressive Web Appsっていうのは、一言で言うとモバイルウェブの新しい形です。

  • Webサイトがホーム画面から起動できる
  • プッシュ通知
  • オフラインで動く

北村 百聞は一見にしかずで、twitter.comをAndroid 版 Chromeで開いてみるというのが一番わかりやすいと思います。 これはTwitter Liteと呼ばれていて、動作も素早いし、モバイルアプリと使い勝手はほとんど変わりません。

浅井 PWAは、アプリに比べてデータ通信量も抑えめになるそうです。例えばTwitter Liteではアプリに比べて70%データが削減できるとか。なので、ブラジル、インド、インドネシアといった、ネットワークインフラの整っていない新興国では、アプリよりもユーザのコンバージョン率が高く、採用も広まっているようです。

物江 Firefoxでの、PWA対応はいかがでしょう？

浅井 現在でもホーム画面へのインストールなど基本機能は対応していますし、今後フルスクリーン起動なども順次実装を進めていくそうです

物江 モバイルといえばネイティブアプリ、という印象はいまだに根強いですが、モバイルサイトも同時に構築できてしまうので、環境が整って利点が正しく理解されさえすれば、一気に広まりそうですよね。PWA対応していないブラウザでアクセスしたとしても、通常のWebアプリとして使えますし。

ちなみにEdgeでは、今年の夏頃から開発者向けのビルドでPWAを試せるようになります。年末ぐらいまでには、メジャーブラウザでは全体的にPWAが使えるようになりそうですね。

北村 ちなみにマイクロソフトさんの検索エンジンのBingが、PWAを見つけたらWindows Storeに並べてしまうようになるというのを最近知って、すごい荒業だけどこれは面白いなと思いました。

PWAって捉えどころがないふわっとした用語ではありますが、実際には個々の技術それぞれにもすごく価値があります。オフラインやプッシュ通知がWebアプリで行えるというのは、Ajax以来の技術的な革命じゃないかと思いますね。

Web Components

物江 そろそろお時間も迫ってまいりましたので、最後のトピックです。 Web Componentsについて語りたいのですが、北村さん、Web Componentsのご説明をお願いできますか？

北村 Web Componentsっていうのは、一言で言うと、自分でHTMLタグを作れるという技術です。そして、自作したタグ（コンポーネント）を配布できる。

Web Componentsは、最近だとSafariに搭載されたのが大きいですね。iOSを含め、割とどこでも使えるメジャーな技術になりました。

あともう一つ、AMP (Accellalated Mobile Pages）も実はWeb Componentsを使っています。AMPに対応しているサイトは、現時点でもかなりの数に上りますので、実際にはWeb Componentsはすごい勢いで広まっていると言っていいんじゃないかと思います。

物江 Polymerというライブラリもあるそうですが、それとWeb Componentsの関係はどのようなものでしょうか？

日本マイクロソフト株式会社 デベロッパーエヴァンジェリズム統括本部 物江修氏

日本マイクロソフト株式会社 デベロッパーエヴァンジェリズム統括本部 物江修氏

北村 Web Componentsっていうのは、W3Cで標準化が進められている技術なんです。具体的には4つの技術から構成されています。

Custom Elementは、先程申し上げたように独自のタグを作ることのできる技術です。

Shadow DOMは、DOMのカプセル化を行えるようにする技術。

Template Elementっていうのは、「テンプレートである」という意味合い以外持たないHTML要素です。

HTML Importというのは、JSやCSSのように、HTMLもインポート可能にするという技術です。

一方でPolymerというのは、Web Componentsの上に構築されたライブラリです。

Web Components標準はそれほど高いレベルのAPIを提供しません。なので、実際にコンポーネントを作ろうとすると、実装の重複が多くなります。その重複を排除して、最小限のコードでコンポーネントを作れるようにするのがPolymerです。

物江 ちなみにEdgeは、Web Componentsについては長いこと意識しているようですが、まだ詳細は未定です。Polymerを使うと、現在のEdgeでもWeb Componentsが動作したりするんでしょうか？

北村 はい、PolymerはPolyfill（対応していないブラウザ上でAPIのエミュレーションを行うライブラリ）も含んでいますので、動作しますね。実は、現在のYouTubeサイトはWeb ComponentsベースのHTMLに全て書き換えられているんです。コードを見てみると面白いと思いますよ。

あと、Polymerはライブラリだけじゃなくてコンポーネントも提供しているんです。 http://webcomponents.org/ を見てみると、すでにいろんなコンポーネントが利用できるのを確認できると思います。

まとめ

物江 では、このディスカッションの締めくくりとして、Webの今後について一言ずついただけますでしょうか？

浅井 はい、モバイル時代は長らくネイティブアプリが中心でしたが、ここに来てWebの力が盛り返してきているのを感じています。ネイティブアプリと遜色ない機能を提供できるだけではなく、ユーザーにリーチするのも、アプリストアよりもWebのほうがハードルが低い。リンクを送るだけでプロモーションできますしね。そういう点で、PWAには期待しています。

北村 PWAについては、ぼくも同じく期待しています。とりあえずTwitter Liteを触ってみてほしいですね。

あとWebの今後という点で思いついたのですが、企業の枠組みを超えた合意形成の方法としては、Webはかなり進んでいるんじゃないかと思います。ディスカッションの場作りとか、標準化を行う上で蓄積されたノウハウはかなり貴重で、他の場面や業界にも活かされていくんじゃないかな…と考えています。

物江 ではそろそろお時間ですので、本セッションを終わりとしたいと思います。みなさま、本日は大変興味深いお話を、どうもありがとうございました。

]]> Firefox, Chrome, SafariがCSS Gridに一斉対応ほか──2017年2月と3月のブラウザ関連ニュース /myakura/22818/ Thu, 13 Apr 2017 04:00:44 +0000 /?p=22818 連載： WEB標準化動向 (22)

2月はブラウザのリリースがなかったのですが、3月にはFirefox 52, Chrome 57, Safari 10.1がリリースされました。いくつかのブラウザに共通して大きな機能追加があったので、まずはそこから紹介します。個々のリリースについては、そのあとで取り上げます。

Firefox, Chrome, SafariがCSS Gridに一斉対応

CSS Grid LayoutがFirefox 52, Chrome 57, Safari 10.1で有効になりました。長らく試験的な実装状態が続いていたのですが、タイミングをはかったかのように一斉に使えるようになりました。

CSS Grid Layoutは、かなり強力なレイアウト用の仕様です。 ちょうど、HTML5 Experts.jpのトップページがCSS Gridの説明に都合良さそうなので、ちょっと書きながら紹介しようと思います。

スクリーンショット：HTML5 Experts.jpのトップページ

HTML5 Experts.jpのトップはグリッドレイアウトを意識した見た目になっている

HTML5 Experts.jpのトップページは、ロゴやサイドバーなどのブロックが、15pxの間隔をおいて配置されています。
ちょっと線を引いてみましょう。

スクリーンショット：HTML5 Experts.jpのトップページにグリッドの線をひいた

グリッドのガイド線を引いた。線で区切られた領域に各パーツが収まっているのがよくわかる

CSS Gridも同様に、配置する基準となる線を定義し、その線と線で区切られた領域に、コンテンツを配置します。Photoshopでガイドをひいて、その中で矩形選択をするようなかんじでしょうか。

現在のトップページをCSS Gridで書くと、このようなかんじになります。

body {
  display: grid;

  /* 縦線をひく */
  grid-template-columns: 1fr 290px 430px 290px 1fr;

  /* 横線をひく */
  grid-template-rows: 210px 60px 1fr /* 以降は割愛 */;

  /* 隙間を定義すると、隙間分の線を引かなくてよいので楽 */
  grid-gap: 15px;
}

#logo {
  /* 横の配置、2番目の線（1番目の線は左端）から3番目の線まで */
  grid-column: 2 / 3;

  /* 縦の配置、1番目の線（上端）から2番目の線まで */
  grid-row: 1 / 2;
}
...

枠だけですが、以下にコードを置いてみました。

CSS Gridは機能が強力なぶん、構文も複雑です。先程書いたのは一例で、ほかにも線に名前をつけたり、アスキーアートのような構文でグリッドのセルを定義できたりします。

ドキュメンテーションやチュートリアルのサイトもすでにあるので、それを参考にしてみましょう。

このうち、Grid Gardenは、CSS Gridの構文の一部をゲームで学べるサイトです。入門にちょうどよいかと思います。

また、Firefoxの開発者ツールには、CSS Gridインスペクタが搭載されました。グリッドの線や隙間を視覚的に確認できてとても便利です。

CSS Gridを使う場合、コンポーネントの見た目とレイアウトを、コード上ではっきり分離しないと扱いづらくなるので、マークアップやCSS設計にもいろいろ影響を与えるだろうと感じています。気が向いたら、取り上げるかもしれません。

Firefox, ChromeではWebAssemblyも有効に

こちらはFirefoxとChromeのみですが、WebAssemblyが有効になりました。

WebAssemblyについては、清水さんの連載を読んでいただくことにして、説明は割愛します。

Mozilla Hacksでも2月にWebAssemblyの特集が組まれています。JITコンパイラやアセンブリの話から始まるなど、読み物としても面白いものになっています。

この特集の他にも、asm.jsと比較しWebAssemblyが速い理由や、WebAssembly Explorerというツールの紹介もされています。

MDNにもWebAssemblyのドキュメントがまとめられており、日本語訳も有志によって進められているようです。

Firefox 52

3月7日に、Firefox 52がリリースされました。Captive portal（Wi-Fiサービスのログインページ）の検出が追加されたり、HTTPなページでパスワードを扱っている場合警告が出たり、Flash以外のNPAPIプラグイン（AcrobatやSilverlight、Javaなど）が無効にされたりと、セキュリティ周りの機能強化が目立ちます。

とはいえ、フロントエンド周りの機能強化も、先述したCSS GridとWebAssemblyサポートに加えて、以下のようなものがあります。

space-evenly

Flexboxのjustify-contentでspace-evenlyという新しい値がサポートされました。

space-aroundとなにが違うかというと、space-aroundでは連続したアイテム間では空白が左右のそれの倍になってしまうのですが、space-evenlyでは「even（均等）」と名のつく通り、空白の大きさが等しくなります。仕様書の画像がわかりやすいです。

justify-contentプロパティなどに指定する各種値のレンダリングの違いを比較した画像

space-evenlyのほうがspace-aroundよりも使われそう

CSS Color Level 4のrgb()とhsl()

CSS Color Level 4のrgb(), hsl()関数表記が実装されました。「もとからあったじゃないか」と思う方しかいないと思いますが、CSSお得意の構文変更です。

これまでのrgb()やhsl()は、それぞれの色の値をカンマで指定していました。

それが空白区切りになりました。

color: rgb(128 90 0);

また、整数値しか取れなかったのが小数も受け入れるようになりました。hsl()については、これまで数値でしか指定できなかった色相を、角度（degなど）を使って指定可能になりました。

color: rgb(111.4 128 0.0);
color: hsl(120deg 100% 30%);

そして、これまで別の関数表記だったrgba(), hsla()の機能を統合し、rgb(), hsl()からアルファを指定できるようになりました。アルファはスラッシュで区切り指定します。また、これまでは数値のみの指定でしたが、パーセンテージでも指定可能となりました。

color: rgb(128 90 0 / 50%);

構文が変わったと書きましたが、互換性という名目で古い構文も引き続き定義されるので、移行しなければならないというわけではありません。

ES2016, ES2017のサポート

JavaScriptでは、ES2016やES2017の以下の機能が実装されました。

  • Exponentiation operator（**）
  • Destructuring rest parameters
  • Async Functions（async/await）
  • Trailing commas in functions

ES2016以降の実装について、ここ数リリースでのまとめも公開されています。

現在はまだ提案であるAsync Iteratorなどの実装も進められているようです。楽しみですね。

新しいResponsive Design Modeになった開発者ツール

開発者ツールでは、Responsive Design Modeが強化され、モバイル環境のエミュレーションがより細かく行えるようになりました。

UIが変わったほか、回線環境のスロットリングと、デバイスピクセル比のカスタマイズ、デバイスのプリセットなどが追加されました。回線のスロットリングができるようになったので、回線速度のレンダリングへの影響を検証しやすくなりました。

スクリーンショット：Firefox 52の開発者ツールで登場した新しいResponsive Design Mode

Nexus 5をエミュレートすると、画面サイズやデバイスピクセル比はもちろん、UA文字列も切り替わる

ほか、Responsive Design Modeではありませんが、アニメーションパネルではイージングの視覚化も行われるようになりました。

同等の機能はChrome DevToolsにもだいぶ前からあるのですが、Escを押して現れるドロワーを開き、そこからAnimationタブを開くなど、機能への動線がよくなかったりします。

Chrome 57

Chrome 57がリリースされました。

フロントエンド周りの機能強化は、先述したCSS GridとWebAssemblyサポート以外に以下のようなものがあります。

text-decorationのサブプロパティが実装

CSS Text Level 3のtext-decorationプロパティが実装され、下線の色やスタイルを変更可能になりました。

これまではborderを使ってなんとかするハックだったので、これはうれしいですね。

/* リンクの下線を青色の点線にする */
:any-link {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: slateblue;
}
/* text-decorationがショートハンドになったため、以下のようにも書ける */
:any-link {
  text-decoration: underline dotted slateblue;
}

Firefoxがだいぶ前から（接頭辞つきですが）サポートしており、続いて何年か前にSafariが、そして今回ようやくChromeでもサポートされました。

日本語では特に影響がありませんが、text-decoration-skipプロパティも一部が実装されました。text-decoration-skip: inkと指定すると、ディセンダなどのある文字（gやjなど）に下線が重なるのを防げます。

text-decoration-skip: inkの例。「HTML5 Experts.jp」という文字の「p」と「j」のディセンダを避けて下線が引かれている

フォントサイズが大きいととくにうれしい

caret-colorプロパティ

CSS UIで定義されているcaret-colorプロパティがサポートされました。キャレットの色を変更できます。

input {
  caret-color: orange;
}

ファンシーな機能ではありますが、入力欄の色が薄い色になったときにコントラスト比が保てないという問題への対応でもあります。

スクリーンショット：caret-colorにorangeを指定したinput要素

細くて見えないかも。なおキャレットの太さなどを指定するプロパティはありません

V8 5.7ではpadStart/padEndが実装、高速化も

Chromeのバージョンにあわせ、V8も5.7になりました。

新機能については、文字列の詰めを行うpadStart()とpadEnd()の導入が主でしょうか。

以前、padStart()と同様のことをするleft-padというモジュールが消えてnpmが大混乱になったので、Nodeで使えると依存を減らせて嬉しいかもしれません。

padStart(), padEnd()は、Firefox 48, Safari 10で実装済みで、EdgeでもCreators UpdateのEdge（EdgeHTML 15）でサポートされます。

他に取り上げられているのは、パフォーマンスの向上です。 正規表現周りのパフォーマンス向上については、独立したエントリが1月に公開されています。

また、V8チームはここ数バージョンほどES2015の実行速度改善に取り組んでおり、そのエントリも公開されています。

V8 5.7時点でES5と比べた実行速度差は、平均で1.86倍、中央値で1.3倍にまで減少したとのことです。

まだ差があるため「やっぱりBabelか…」という話になるかもしれません。

が、コンパイル後のES5のコードの容量が増大すれば、JavaScriptのパースなどにコストがかかり、Webアプリの最初のレンダリングまでの時間に影響します。コードの容量と実行速度、どちらも与える影響を鑑みた上で選択できるといいですね。

Safari 10.1リリース

macOS 10.12.4とiOS 10.3がリリースされ、Safari 10.1もリリースとなりました。Safari 10.1で新しく入った機能が、AppleのドキュメンテーションやWebKitのブログで紹介されています。

いくつか紹介します。

Custom Elements v1

Safari 10のShadow DOM v1サポートに引き続き、Custom Elements v1もサポートされました。

HTMLのForm Validation

ついにHTMLのForm ValidationがSafariでもフルサポートされました。

HTML5からtype=emailといった新しいinputの型や、required属性、pattern属性など、フォームの入力内容を調査する属性が導入されました。

検証項目に違反する入力内容があると、フォーム送信前にブロックされるという仕様なのですが、Safariは長らく対応していませんでした。DOMから入力内容がvalidかをチェックはできるのですが、UI上のサポートがなかったのがうれしくありません。

Safari 10.1では、他のブラウザと並んでフォーム送信時のチェック（ブロック）を行うようになったほか、好きなタイミングでフォームの検証状態を通知できるreportValidity()メソッドも一緒にサポートしました。こちらはBlinkのみで長らくサポートされていたもので、最近になりFirefoxもサポートしたものです。

広色域の色指定

新しいデバイスにはDisplay P3という色域の広いディスプレイを導入しているAppleですが、その恩恵をWebコンテンツでも受けられるべく、sRGBを基準としているCSSの色域を拡張する提案を行い、その一部を実装しました。

実装されたのは、color()関数とメディアクエリのcolor-gamut媒体特性です。

color()は、RGB各色の度合いを色域を含め指定できる新しい関数です。

color(display-p3 0 1.0 0)

このように指定すると、P3ディスプレイでの緑100%となり、sRGBでは表現できない、より濃い緑を発色できます。

]]> Firefox 51・Chrome 56リリース、Safari 10.1発表、Windows 10 Creator’s UpdateのEdge、WebKitほか──2017年1月のブラウザ関連ニュース /myakura/22272/ Tue, 07 Feb 2017 03:04:00 +0000 /?p=22272 連載： WEB標準化動向 (21)

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がリリースされました。

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

::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がリリースされました。

パフォーマンスの観点から、タッチイベントハンドラの 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がアップグレードされ、新しい機能が導入されます。

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な際にフォームの送信をブロックするという挙動を実装していなかったのでした。

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

Windows 10 Creator’s UpdateのEdge

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

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

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のライブラリがチェックインされました。

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

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

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

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

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

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

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

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

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

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

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

]]> Chrome 55リリース、Windows 10 Creators Updateほか──2016年12月のブラウザ関連ニュース /myakura/21934/ Tue, 10 Jan 2017 02:08:35 +0000 /?p=21934 連載： WEB標準化動向 (20)

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

Chrome 55リリース

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

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

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

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

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

Windows 10 Creators UpdateのEdge

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

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

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

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

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

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

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

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

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

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

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

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

]]> Chrome Dev Summit開催、Firefox 50リリースの最新情報を解説──2016年11月のブラウザ関連ニュース /myakura/21730/ Wed, 28 Dec 2016 00:32:53 +0000 /?p=21730 連載： WEB標準化動向 (19)

2016年11月のブラウザ関連ニュースは、サンフランシスコで開催されたChrome Dev Summitと11月15日にリリースされたFirefox 50についてお届けします。

Chrome Dev Summit開催

11月はChromeのリリースがありませんでしたが、サンフランシスコにてChrome Dev Summitが開催されました。

名前にChromeと冠していますが、トピックはProgressive Web Appsです。Progressive Web Appsが認識され広がりつつある今年は、LyftやCNETのPWA開発の裏側といったケーススタディや、フレームワークを使った際にどうパフォーマンスを見たり改善したりするかといった実践的な話が多かったです。

ビデオも30分くらいのセッションがほとんど多いので、さくさくと観られます。

Firefox 50リリース

11月15日に、Firefox 50がリリースされました。

Firefoxもついに50になりました。

訪問済・未訪問を問わないリンクにマッチする :any-link 擬似クラスがサポートされました。a と何が違うのか疑問に思う方がいるかもしれませんが、:link, :visited, :any-link は area や link といった要素型にもマッチしますし、href 属性の有無もふまえます。ちゃんと「リンクされているか」を見るってことですね。

DOMでは、NodeList インターフェースがiterableになり、querySelectorAll() の結果に直接 forEach() などをくっつけられるようになりました。他のブラウザもChrome 51、Safari 10も対応済みですし、だんだんと使える環境が広がっていますね。

最近のDOM仕様では、addEventListener() の第三引数に AddEventListenerOptions というディクショナリを取れるようになっているのですが、そのうちの一つ once がサポートされました。jQueryの one() のように、一度だけ呼び出されるイベントリスナを設定できます。

セキュリティ関連では、X-Content-Type-Options: nosniff がサポートされました。ブラウザはサーバから来る Content-Type ヘッダを見てコンテンツの種類を判断しますが、状況や特定のファイルによってはコンテンツの中身を少し見てからその種類を推定したりします。これを「Content sniffing」や「MIME sniffing」といいます。
便利なときもあるのでしょうが、セキュリティ上の懸念があるため、それを無効にするための手立てとして X-Content-Type-Options: nosniff というヘッダがIE8に導入され、Opera, Chromeも追従し、最終的にFetch 仕様に取り込まれました。

このほか、border-image-repeat: space や、Chromeが独自に実装していたFileSystem APIの一部のサポート、dotted もしくは dashed を設定したボックスに border-radius をかけたときの見た目の改善などが行われています。

]]> WebAssembly、CPU Throttling、Custom Elementsの最新情報を解説──2016年10月のブラウザ関連ニュース /myakura/21567/ Fri, 04 Nov 2016 00:00:17 +0000 /?p=21567 連載： WEB標準化動向 (18)

2016年10月のブラウザ関連ニュースは、10月12日にリリースされたChrome 54の追加機能からCustom Elements v1、DevToolsのCPU Throttling、WebAssemblyについて紹介します。

Chrome 54リリース

10月12日に、Chrome 54がリリースされました。追加された機能のまとめは、ベータ版時点で公開されたポストが詳しいです。

以下、気になったものを取り上げます。

Custom Elements v1

54で実装された大きな機能としては、Custom Elements v1でしょう。Shadow DOM v1のときと同じように、Custom Elements仕様もベンダー間の合意をとりつけ前進した新しい仕様を「v1」と呼んでいます。現在Safariも実装を進めており、近くリリースされる新しいTechnology Previewで有効になるはずです。

Custom Elements v1での大きな変更点は、ES 2015のクラス構文を使いカスタム要素を定義するようになったことです。たとえば、hx-element というカスタム要素を定義する際には以下のようなコードで要素のコンストラクタを定義し、そのコンストラクタをもとに hx-element という要素名に登録します。

// カスタム要素のコンストラクタ
class HXElementCtor extends HTMLElement {
  // 要素が作成された段階に実行されるコールバック
  constructor () {
    super()
    // ...
  }
  // 要素がドキュメントに突っ込まれたとき
  connectedCallback () {
    // ...
  }
  // ...
}
// hx-element という名前でカスタム要素を登録
window.customElements.define('hx-element', HXElementCtor)

カスタム要素のコンストラクタには、「要素が作成された」「要素がドキュメントに追加された」「属性が変更された」などの状態に応じてコードを実行するためのライフサイクルコールバックと呼ばれる関数を記述します。くわしくはチュートリアルがWeb Fundamentalsで公開されているので、そちらをどうぞ。

DevToolsのCPU Throttling

DevToolsでは、CPU Throttlingがサポートされました。CPUの速度を制限し、スマートフォンなどのパワフルでない環境での処理を模した状態でタイムラインを取得できます。

HTML5 Experts.jpのトップページで、タイムラインを録って比較してみました。

CPU Throttlingなしのオーバービュー

通常状態では、レイアウト関連処理（紫色）が3回、JavaScript関連処理（黄色）が3回、描画関連処理が1回、チャートの上端に達しています。この状態でもCPUをけっこう専有しているようです。

“5x slowdown”を指定し制限し読み込んだもの

CPU Throttolingで5分の1に制限したものではまず、ページ読み込みに倍近くの時間がかかっています。また、レイアウト関連処理やJavaScriptの処理時間が大幅に伸びており、別れていた山がくっついてしまっています。

と、このような感じでCPUの性能がレンダリングに及ぼす影響を確かめられます。気をつけないといけないのが、“2x slowdown”といったように使っているコンピューターのCPUをもとにした制限になってることです。ですので特定のプロセッサをエミュレートできるわけではありません。Network Throttlingよりも「あくまで目安」度合いが高そうです。

WebAssemblyがさらに進捗、ブラウザプレビュー段階に

10月31日に、WebAssemblyがブラウザプレビュー段階に入ったと、Mozilla, Google, Microsoftが発表しました。

WebAssemblyは3月に各ブラウザで試験実装が入ったのですが、今回はWebAssemblyのバイナリフォーマットがリリース候補段階になったこと、それにSpiderMonkeyとV8のナイトリービルド、Chakraの開発版が互換性のある形で対応した旨が発表されました。バイナリフォーマットがほぼ固まったため、このブラウザプレビュー段階では幅広いフィードバックを集めたいとのことです。

今後のWebAssemblyですが、公開されているロードマップによると、解決に時間のかかる問題が見つからなければ2017年第1四半期にはバイナリフォーマットの初期バージョンが策定完了するとのこと。そしてその時点で、ブラウザの実装をデフォルトで有効にするようです。Firefoxは52での有効化を試みているそうです。

なお、発表には加わっていないものの、WebKitでもJavaScriptCoreに実装中です。主要なエンジンすべてで実装されるので、ゲームや計算コストの大きなアプリケーションをWebに持ち込むのがさらに容易になりそうですね。

]]> details要素がサポート追加となったFirefox 49リリース、Safari 10リリースやベンチマークのMotionMarkなど──2016年9月のブラウザ関連ニュース /myakura/21141/ Thu, 13 Oct 2016 23:58:18 +0000 /?p=21141 連載： WEB標準化動向 (17)

2016年9月のブラウザ関連ニュースは、details要素がサポート追加となったFirefox 49や、Safari 10リリースとベンチマークのMotionMarkなどについて紹介します。

Firefox 49リリース

9月20日に、Firefox 49がリリースされました。

今回はいつも以上にいろいろ追加されてる気がします。

HTML関連では、<details> 要素がサポートされました。トグルで表示・非表示を切り替えるウィジェットをJavaScriptなしに導入できます。

これ関連で面白いなと思ったのが、HTML5 <details> in GitHub です。参考情報としてエラーログなどを張りつける際にログを <details> で囲むことで、ページが長くなるのを防ぎます。

Qiitaでも対応したとのことなので、コード一式をとりあえず書いておくとかそんなときに使えそうですね。

DOMまわりでは、before(), after(), replaceWith(), append(), prepend() メソッドがサポートされました。jQueryで見たことがあるメソッド名が多いですが、それらとほぼ同様で、要素の追加・置き換えを行います。なお要素を削除する remove() については、Firefox 23からサポートされています。

CSSでは、Level 4の機能がいくつかサポートされました。

#rrggbbaa 式の色表記がサポートされました。こちらは先日Blinkでも有効にされかけたのですが、WebViewの誤った実装との互換性をとるため無効にされてしまいました。

background-clip: text がサポートされました。背景画像でテキストをくり抜く表現が実現できます。もともとWebKitの独自拡張でしたが、広く使われてしまったこともあり、Backgrounds & BordersモジュールLevel 4で定義されました。

background-position-x/-yもサポートされました。background-position は水平方向・垂直方向の位置両方を指定しなければいけませんが、これらを使うと個別の方向ごとに位置を指定できます。もともと古いIEやWebKitでサポートされていたもので、こちらもBackgrounds & BordersモジュールLevel 4で定義されました。

背景画像系ではほかにも、Level 3の background-repeat　の round と spaceがサポートされました。他のブラウザでは結構前からサポートされていたので、追いついたかたちです。

-webkit- サポートも追加

もともと独自拡張だった機能のサポートがこのバージョンで行われたのには理由があります。Firefox 49では、-webkit- 接頭辞つきのCSSプロパティやAPIの一部をエイリアスとしてサポートしたからです。これによって、主にモバイル向けWebサイト・アプリの互換性が向上します。

-webkit- の部分的サポートは突然始まったことではなく、日本や中国などの特定サイトに限定し行われていました。それが方針転換し、すべてのサイトに適用されるようになりました。

標準化された機能と接頭辞つき実装には、標準化の過程でプロパティ名や値の取り扱いなどに違いが生まれます。こうした違いをどう埋めるかを明文化すべく、Compatibility Standardという仕様も作られています。ただ、すべての接頭辞つき機能がここで記されるわけではなく、webkitMatchesSelector() などは標準仕様に取り込まれるかたちで定義されています。

Safari 10リリースとベンチマークのMotionMark

9月13日のiOS 10と9月20日のmacOS 10.12 Sierraリリースにともない、Safari 10がリリースされました。Sierraだけでなく、El Capitanにも提供されています。

Safari 10の新機能については、過去の記事で取り上げているので、気になる方はそちらをご覧ください。

さて、9月21日に、WebKitからMotionMarkという、グラフィックス処理のパフォーマンスを計測するベンチマークが発表されました。

MotionMarkは、既存のグラフィクス関連ベンチマークが抱えていたいくつかの問題を解決するために用意したとのこと。計測対象がフレームレートではなく、フレームレートが閾値以下になったときのアニメーションの複雑さであることや、いろんなテストをいちシーンに詰め込まず、問題を切り分けやすくするといった工夫がされているようです。

Safari 10でMotionMarkを実行した結果。スコアは145.15（±5.12％）


この記事を書いているマシン（2011年のMacBook Air、11インチモデル）上のSafari 10で実行してみた

]]> Firefox 48の新機能、EdgeHTML 14を搭載したMicrosoft Edgeリリース──2016年8月のブラウザ関連ニュース /myakura/21074/ Fri, 23 Sep 2016 01:21:32 +0000 /?p=21074 連載： WEB標準化動向 (16)

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() がサポートされました。

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

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

スクリーンショット：「平成28年」という縦書き文字列中の「28」を縦中横にした例

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

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

EdgeHTML 14リリース

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

この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に投稿しています。

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

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

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

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

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

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

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

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

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

]]> Chrome 52新機能、最新macOS「Sierra」パブリックベータ公開─2016年7月のブラウザ関連ニュース /myakura/20202/ Mon, 15 Aug 2016 00:26:44 +0000 /?p=20202 連載： WEB標準化動向 (15)

2016年7月のブラウザ関連ニュースは、7月20日にリリースされたChrome 52、macOSの最新バージョン「Sierra」のパブリックベータ公開についてお伝えします！

Chrome 52リリース

7月20日にChrome 52がリリースされました。

Mac版は見た目がすっきりしました。

スクリーンショット：Chrome 51とChrome 52のウインドウを並べたもの

グラデーションや丸みがなくなりすっきりした。タブも少し大きくなった

新しい見た目は、モバイル版ChromeやChrome OSと同じものになっています。細かいところについては、GoogleでChromeのデザインをしているSebastien Gabrielが自身のサイトやMediumでまとめています。

新しい機能の紹介をしましょう。今回はパフォーマンス向上に貢献しそうなものが多く入っています。

Service Worker/Fetch API関連で、レスポンスを ReadableStream で作成し返せるようになりました。

うまく使えば段階的にコンテンツを表示できるので、体感速度が上がります。

CSSではCSS Containmentというものが実装されました。指定した要素について、レイアウトや描画のスコープを設けられる仕組みです。

基本的にレイアウトや描画はドキュメント全体がスコープになるため、一部のみ変更する際にはドキュメント全体が対象となる無駄な処理が走ります。それを抑制できるので、とくに複雑なページで使うと恩恵が大きいでしょう。

また、新機能ではありませんが、外部スタイルシートが起こすレンダリングの挙動が変更されました。

これまでは外部スタイルシートをパーザが発見した場合、それが読み込まれるまで描画をブロックしていたのですが、すでにパーザが処理したDOMの描画も止めていたため、段階的なレンダリングができませんでした。新しい挙動は外部スタイルシートが見つかった箇所以降のみレンダリングのブロックが発生します。段階的なレンダリングにやさしくなります。

この挙動とHTTP/2を組みあわせ、必要なときに必要なCSSを読みこむやり方が検討されています。

パフォーマンス計測のためのPerformance Observerも実装されました。Navigation Timingをはじめとした各種パフォーマンス情報をObserverで取得する新しいAPIです。ポーリングなどをしなくてもよくなりますし、必要なパフォーマンス情報を絞れるので、扱いやすくなるかと思います。

パフォーマンス関連以外の機能もちょこちょこあります。

  • Canvas APIに ctx.filter が追加され、フィルタを指定できるようになりました
  • CSS Color Module Level 4で定義されている #rrggbbaa 記法が使えるようになりました
    （8月25日追記：リリース直前に無効にされていました…）
  • V8も更新され、ES7のexponentiation operator（**）が実装されました

macOS Sierraパブリックベータ公開

OS Xから名前が変わったmacOSの最新バージョン、Sierraのパブリックベータが公開されました。

Safari 10が入っていますが、開発者向けのドキュメントで取り上げられていない機能も一部入っています。

ひとつはCSSアニメーションのの spring() です。「ばね」と名のつくように、ぼよんぼよんと動くアニメーションを簡単に使えるものです。Appleが内部で必要として試験的に実装されたもので、後にAppleより標準化も提案されています。

頑張れば既存の仕組みでも実現できるかもしれませんが、専用の関数が用意されているとだいぶ楽そうです。 また、タイミング関数を自作できる仕組みもほしいという話もコミュニティから出ています。

動きもコンポーネント的に定義できれば、ライブラリとしての提供もしやすそうです。

もうひとつは、初期のベータだけですが、WebPがOSレベルでサポートされていました。

しかし、後のベータでは削除され、ベータに含める意図がなかったことも明らかになっています。Appleが実装するまでWebPに興味があったというのが、うれしいニュースでしょうか。

]]>