Chrome – 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でサポートされています。

]]> 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 をかけたときの見た目の改善などが行われています。

]]> 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に興味があったというのが、うれしいニュースでしょうか。

]]> Webの最先端では何が起こっているか、今Googleが取り組んでいることは？──Google I/O 2016セッションレポート【後編】 /ryoyakawai/19461/ Wed, 15 Jun 2016 00:00:15 +0000 /?p=19461 Google I/O 2016のセッション「What’s new for the web?」についてのレポート後編です。（前編はこちら） 前編では、既に導入済みの機能、API、またこれから導入される機能が怒涛のごとく紹介してきました。後編では、Web Platformをより先に進めるためにGoogleが取り組んでいること、そしてWeb BluetoothやPhysical Webについて解説していきます。

Google loves the web

ChromeチームWeb Platformをより先に進めるために、ここ1～2年取り組んでいるアプローチの紹介です。

GoogleLovetheWeb

まず、前提としてGoogleはWebが大好きです。Googleの同僚は皆、Webが大好きです。そしてChrome Teamには「Webをより先に進める」という重要なMissonがあります。ここで私がWebと言っているのはChrome Webということではなく、全てのWebのことを指していて、それら全てのWebが素晴らしくなってほしいと思っています。

よって、Interoperability（相互運用性）を保ちモダンブラウザの全てにShipされるまでが我々の使命です。なぜならInteroperabilityが保たれずShipしてしまったら、誰でも・いつでも・どこでも利用できるというWebの最も大きく重要な利点の1つが失われてしまうからです。Vender Prefixを廃止したのもそういった理由です。

Chromeにおいては、Web Platformをより先に進めるために4つのアプローチをを持ち取り組んでいます。

Chromeチームが取り組んできたこと

  • 複数のチャネルを持つ（Stable, Dev, Canary、Beta）
  • 実験的な機能にはExperimental flagを設けONにしないと動かなくしている(chrome://flags のことでWeb Bluetoothもこの1つ)
  • Original Trials：実装したAPIをそのままExperimental flagとして提供してしまうと、いつの間にかデファクトになってしまう可能性があります。APIの仕様・実装を吟味してからShipすることがよりよいWebを作るのには必要不可欠です。よって、Feedbackをすることに同意したDeveloperのみ利用を可能にすることで、利用するユーザー数を絞り、さらに期間を区切ることでデファクトすることを防ぎ、実験のIterationのスピードを上げることを目的としています。さらに多くのDeveloperが使い始めた場合は自動的に利用を停止する機能も入っています。
  • Incubation of substantial new feature(wicg.io)：Web Incubator Community GroupをW3Cでにて行っています。標準化のProposalの議論をライトウェイトに行うグループです。チャーター（W3Cで議論を進める場合には必ず作成します）を作ったりすることに全ての時間は費やさないものの、正しく管理されるし、Contributionも受け付けることが可能です。もし新しい機能を提案したい場合は是非このグループに提案してください。

wicg

しかし、機能を追加するだけではWeb Platformを健康に保つことはできません。よって、機能の削除も行います。削除の理由には、他のAPIとの入替えや、実験的に作ったが上手くいかなかった、というものがあったりします。3つ前までで削除された機能のリストがこちら(goo.gl/5gq1Im)です。今後、requestAutoCompleteだったり、HTML5 App Cacheのような影響の大きな機能も削除しようとしています。まだ使われている機能、APIをいきなり削除しないというようなポリシーもありますので安心してください。

これまでの成功の紹介

それでは、ここ数年での成功を紹介します。私がここに立っている、ということは何のことだか分かる方も多いかも知れませんが、そうですWeb MIDIです。

MIDIは知ってる方もそうでない方もいると思います。仕様ができてから30年以上にもなる楽器のキーボード、シンセサイザー等、電子楽器同士、またはコンピュータとを接続する標準化されたプロトコルです。数年前Web Audioで遊んでいたときに「これを楽器のキーボードから操作したい」と思い立ったW3Cにて標準化を始め、Chromeでは去年Shipされました。

ChromeでのShip以降、多くの楽器メーカがユーザー体験を提供するプラットフォームとしてWebを使い始めました。Yamahaはrefaceという新しいシンセサイザーのラインナップに対してSoundmondoという音色のエディタ、ライブラリアンを提供するWeb MIDIを使ったサービスを展開しています。NovationのCircuit Groove BoxはWebに接続して新しいサンプルをダウンロードします。これらの作業においてソフトウェアを新たにインストール必要はないのです。

そして、間違いなくスゴイことはフランスのEDMアーティストであるMadeonがWeb Audioで作られたRemixBoardをWebサイトで公開したことです。ファンに向けられて作られたサイトで、彼のアルバムの中の音をRemixして遊ぶことができるのです。もちろんMIDIデバイスも接続してプレイすることができるようになっているのです。
（デモ（パフォーマンス？）が始まります。実際の動画を御覧ください）

chris_madeon
何が起きたかはここまたは画像をクリックして動画を御覧ください！

デモアプリのURLはこちらwww.madeon.fr/adventuremachineです。

「これスゴイでしょ？！」と言いたいのですが、本質はそこではなくて「ハードウェアがブラウザにアクセスできる」ということが大きな可能性を生んだ、ということを伝えたいのです。ちょうど加速度センサから素晴らしいユーザー体験（UX）が生まれ、モバイル・デバイスが大きな可能性を持ったのと同じようにです。他にも接続できることで大きな可能性が生まれるデバイスはたくさんあると思います。我々は、そこにある可能性を積極的に解き放っていきたいと考えています。

（ここでChris氏からFrançois氏に交代）

これから何が起こるのか

Web Bluetooth

Bluetoothの名称の由来の説明から始まります。（詳しくはWikipediaのBluetooth 「名称の由来」をどうぞ） bluetooth

Bluetoothはいろいろなバージョンで20年成長してきた技術で、最新はBluetooth Low Energy（BLE）が導入されたVersion 4でリリースされてから6年経過しています。Wi-Fi、Ethernetのスピードは継続的に上がっていますが、Bluetoothはちょっと様子が違っています。

blespeed

なぜなら、今まで接続されていなかった多くのデバイスに搭載できるようにバッテリの消費量を最小限にできるようにデザインされているからです。例えば小型のデバイスが使うバッテリは、通常CR2032です。（2032の20は直径、32は厚さを表すそうです！）なので、転送速度はとっても遅いのです。ですが、BLEはそもそも転送速度が遅くても大丈夫なデバイスをターゲットにしているので問題はありません。

それでは、デモをしてみます。デモはPlaybulb Candleという電球のOn/Off、色をBluetooth通信にて変更できるデバイスをWebアプリから操作します。（映像には全体が映っていませんでしたが、会場ではこんな感じでデモが行われていました）

playbulbcandle

Bluetooth SIG(Bluetoothの規格の策定、技術利用に対する認証を行う団体)は、これから先2年で96%の電話、タブレットにBLEが搭載されると予想している。そこからも、いろいろな場所でBLEが存在するであろうことがお分かりになると思います。

Web BluetoothのAPIを説明する前に、一度BLEの動作を復習してみます。Bletoothには、以下の2つの機能があります。

  • Central：近隣のデバイスを探索する（電話、ラップトップPCの等）
  • Peripheral：周囲に向けて継続的に自らの情報を格納したアドバタイジング・パケットをBroadcastする。（心拍センサ、ビーコン、冷蔵庫等）

PeripheralがCentralに接続（ペアリング）されると、Peripheralはアドバタイジング・パケットのBroadcastを停止し、CentralがPeriferalで動作するGATTサーバと通信を開始する。通信に関しては、デフォルトで用意されているバッテリ、心拍のようなサービスも存在していますが、もちろん独自にサービスを作ることも可能になっています。それぞれのサービスにはそれぞれのCharastristicに属性を持っていて、読込み（バッテリーレベルの取得等）、書込み（設定の変更等）、また更新時に通知（心拍数のリアルタイム監視）してもらうことも可能です。Web Bluetooth APIを使って書いたサンプルを説明していきます。

値の読込み

bluetooth_getValue

コードはラップトップがCentral、何かしらのデバイスがPeripheralとなっていることを想定しています。まず、Centralのラップトップがnavigator.bluetooth.requestDevice(option)をCallして近隣のデバイスを探索します。optionにデバイスが山ほど列挙されないためにどの種類でフィルタするかを記述します。コードではバッテリのサービスは標準化されているので「batttery_service」と文字列で指定していますが、アドバタイジングパケットにはカスタマイズした値も書込むことが可能です。

navigator.bluetooth.requestDevice(option)をCallすることで探索が開始され、それと同時にアドレスバーの直下に該当するデバイスを列挙するポップアップが出てきます。ユーザがリストからデバイスを選択すると、JavaScript側ではそのデバイスのデバイス名、利用可能なサービスが格納されているオブジェクトにアクセスが可能になります。

ここでセキュリティに関する注意点。
navigator.bluetooth.requestDevice(option)はユーザのインタラクションにて初めて動作します。デモではボタンクリックで開始していました。Localhost以外のホストでWeb Bluetoothを使う場合は、HTTPSでコンテンツがServeされたことを要求している。

device.get.connect()をCallしてGATTサーバと接続をします。その後に、server.getPrimaryService(‘battery_service’)でバッテリサービスを取得、service.getCharacteristic(‘battery_level’)で読込みたいCharacteristicを指定して取得、最後にcharacteristic.getValue()をCallすることで、バッテリのレベルの読込み（取得）をすることができます。

値の書込み

bluetoothapi_lookslike

先ほどとは違い、心拍センサをPeripheralとしています。その他、ハイライトされた部分が違います。charctristic.writeValue()にUint8Arrayにて、1バイトを引数に渡すことで書込みを行っています。

更新の受取り

bluetooth_notify

この例でも、心拍センサをPeripheralとしています。この例でも、ハイライトされた部分が違います。characteristicにcharacteristicvaluechangedのイベント名でEventハンドラを設定し、beepという関数をCallbackとして指定しています。characteristic.startNotifications()で、更新の受け取りを開始します。これで、更新がある度にbeepが実行されます。

続いて、心拍センサを動作させるデモです。私（François氏）は心拍センサをつけています。リアルタイムに値を受け取ることができますので、ちょっと見てみましょう。通常私の心拍数は60-80ですが、今はどうでしょう？

francis_heartrate

（普段の倍近くの心拍数が表示されChris氏も会場も爆笑）
次に実際にリアルタイムに心拍数を受け取っていることを証明するために腕立て伏せをしてみます。（前編の最後に掲載さいた画像はここでの1シーンです）
（が、ペアリングが切断されたのか動作せず……そして、今度はChris氏も会場も大爆笑！失敗するということは、デモがリアルタイムに行われている証拠です！）

私以外にも、Web Bluetoothで遊んでいる同僚たちもいます。

bletoy00
Web Bluetoothでラジコンカーをコントロール

bletoy01
Web Bluetoothでプリンタをコントロール

bletoy02
Web BluetoothでBB-8をコントロール

bletoy03
Web BluetoothでLEDをコントロール

Screen Shot 2016-06-05 at 1.20.56 AM
Web Bluetoothで空飛ぶ猫をコントロール

Bluetoothのパケット通信の中身を見るときはAndroidを使うのが最も簡単な方法です。AndroidのDeveloper Optionにある「Bluetooth HCI snoop log」を有効にしてください。（詳しくはこの辺りを参照してみてください）

support_browser

現在Web BluetoothをサポートしているブラウザはOperaとChromeOS、マシュマロ上で動作しているChrome for Android、Chrome for LinuxでChromeでは chrome://flags/#enable-web-bluetooth （アドレスバーにコピー＆ペーストしてください）を有効にすることで利用することが可能です。Mac、WindowsのChromeへは現在実装中です。

開発の助けになるであろう以下の2つを紹介します。

WebアプリからでもNativeアプリと同じように、Bluetoothでデバイスを操作できるようになりました。また、Webアプリですので、URLをシェアすることで、誰でもスグにアプリを利用できるようになります。当たり前のことかもしれませんが、これがWeb Platformの大きな強みです。

Physical Webとの連携

URLを載せたBluetoothのパケットをビーコンからブロードキャストするPhysical Webですが、これがもしBluetoothのアプリからブロードキャストできたらどうでしょう？

URLをPhysical Web経由で受け取り、そのURLにアクセスするとBluetoothデバイスをコントロールするアプリが表示され、Bluetoothデバイスとのペアリングが完了したら、その直後からBluetoothの利用が可能になりますよね。今までのアプリを検索してインストールする等の作業が一切必要がなくなり、通知エリア(Notification Area)に通知されたURLにアクセスするだけでペアリングも含め、Bluetoothデバイスを利用する準備が整うことになります。

今後、Web BluetoothはPhysical Webの機能を組み込み、前述の動作を一気通貫でJavaScriptで実装できるような機能を追加する予定です。

CodelabもControl a PLAYBULB candle with Web BluetoothとInteractive with Bluetooth devices on the web with Polymerもありますので、是非挑戦してみてください。

（再びChris氏）

Web USB

Web USBは現存する全てのUSBデバイスに接続しようと考えているわけではなくて、Firmwareへのアクセスを許可されているような新しい種類のデバイスに適用されます。

まとめ

ここではカバーしきれなかった、まだまだ多くの以下の様な機能が進行中です。

note_covered

さらに、まだデザインも始めていないPersistent Storageとか、Web Intents v2もあります。

そろそろ時間です。我々がWeb Platformの未来にワクワクしているのと同じくらいに、皆さんもワクワクしていることを期待しています。

developers.google.com/web/updates/ にさらなる情報がありますので、お時間がありましたらご覧ください。

（というところで、セッションは終了しました）

IMG_3489
セッション終了後の素敵な笑みを浮かべるChris氏とガッツポーズのFrançois氏

ありがとうございました＆お疲れ様でしたっ！！！

]]> Chrome 51リリース、EdgeHTML 14の機能紹介─2016年5月のブラウザ関連ニュース振り返り /myakura/19326/ Tue, 07 Jun 2016 00:00:48 +0000 /?p=19326 連載： WEB標準化動向 (13)

Chrome 51リリース

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

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

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

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

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

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

スクリーンショット：Chrome DevToolsのコンソールから querySelectorAll の結果に直接 forEach メソッドをつけ実行

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

Edge 14の機能紹介

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

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

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

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

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

]]> Edge Web Summit、Chrome 50、Firefox 46、WebKitなど─2016年4月のブラウザ関連ニュース振り返り /myakura/18864/ Tue, 10 May 2016 00:00:57 +0000 /?p=18864 連載： WEB標準化動向 (12)

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

Edge Web Summit開催

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

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

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

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

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

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

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

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

Chrome 50リリース

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

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

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

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

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

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のみに頼っているサイトは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 フラグつきの方がやさしそうですね。

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

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

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

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

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

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

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

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

]]>