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

Chrome 54リリース

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

• Google Developers Japan: Chrome 54 ベータ版：Custom Elements V1、BroadcastChannel、メディア プラットフォームの強化

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

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で公開されているので、そちらをどうぞ。

• Custom Elements v1: Reusable Web Components

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 Browser Preview ★ Mozilla Hacks – the Web developer blog
• V8 JavaScript Engine: WebAssembly Browser Preview
• A peek into the WebAssembly Browser Preview | Microsoft Edge Dev Blog

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

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

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

本日は、WebRTC Conference 2016に来ております。 WebRTCの「今」をお伝えするレポートを、HTML5 Experts.jp編集部一同よりお送りいたします。

まずは基調講演より。「Status Update on WebRTC from Google」と題した、GoogleプロダクトマネージャーWebRTC ニコラス・ブルーム氏によるセッションです。

▲GoogleプロダクトマネージャーWebRTC ニコラス・ブルーム氏

ブルーム氏のセッションは非常に専門性が高く、情報量も凄まじかったため、ここではポイントを絞って簡潔にお伝えいたします。 セッションのスライドは以下のURLからからご覧いただけます（Google Slides）。

WebRTC Status Update

WebRTCのエンドポイントは30億台！

まずセッションは、WebRTCの5年間についてのサマリーから始まりました。 WebRTCは、5年前にGoogleが実装をオープンソース化したところから始まったもの。 Facebook MessengerやGoogle Hangoutsなどの著名なアプリに利用されているだけでなく、WebRTCのエンドポイントとして動作する端末の台数は30億台（PC/ブラウザが13億台、モバイル／スマートフォンが13億台、タブレットが3〜4億台）にも及ぶとのこと。 対応サービスも月に平均26個というペースで増え続けているそうで、WebRTCの勢いはもはや本物と言って良いでしょう。

動画や音声の対応を改善

VP9

VP8/VP9とは、Googleがオープンソースで開発を進めている動画コーデックです。VP9は、画質の劣化をほとんど伴うことなくデータ量を30%削減できるとのこと。 VP9は、Chromeでは既に利用可能で、WebRTCの参照実装的なサービスAppRTCではデフォルトで有効化されています。

VP9のデモ。赤い線の右がVP9、左がVP8。画質の劣化は感じられない

H.264のサポート

いよいよ、Google ChromeがWebRTC上でのH.264コーデックをサポートします。 最初のリリースではソフトウェアによるコーデックのみ（エンコードはOpenH264, デコードはlibffmpeg）で、Google Chrome 50からフラグ付きで利用できるようになります。

Opus 1.1.2のサポート

完全フリーで高品質な音声コーデックであるOpusは最新バージョンである1.1.2になり、プラットフォームやアーキテクチャに非依存の最適化が行われました。 様々なシチュエーションで、エンコード効率を10%、デコード効率を15〜17%改善します。

様々な新機能のサポート

Google Chromeにおいて、魅力的な新機能が数多く追加される予定です。

• 音声の出力デバイスを選べる新しいJavaScript API（HTMLMediaElement.setSinkId()）
• デバイスの一覧を取得するためのAPIがアップデート（MediaDevices.enumerateDevices()）。システムで利用可能なカメラ、マイク、スピーカーの一覧を得ることが出来る
• PromiseベースのAPIがRTCPeerConnectionに追加
• 録画！ WebRTCを通じて受信したメディアデータをローカルに保存し、再生できるようになります。

WebRTCの録画がサポートされた

• スクリーン共有機能の改善。現在は画面全体、もしくはブラウザウィンドウ全体のスクリーン共有に限定されていますが、今後、タブの中のコンテンツだけを共有できるようになります。ブックマークや通知は表示されません。Google Chrome 50からフラグ付きで利用できるようになります。
• スクリーン共有時のオーディオサポート。Google Chrome 50からフラグ付きで利用できるようになります。
• canvas要素、video要素との統合。canvasで加工した動画をWebRTCで送信…といったことも可能になるので、エンターテインメント用途などにも活躍しそうです。

WebRTC仕様のアップデート

仕様としてのWebRTCは、1.0を2016年の第一四半期に勧告候補（Candidate Recommendation）とすることを目指しています。WebRTC 1.0では、ORTC（Object Real-time Communication: マイクロソフトが開発した、WebRTCよりもローレベルなコントロールを可能にするAPI群）のアイデアを多く取り入れ、より直接的な制御を可能にするオブジェクト指向のAPIが提供されます。WebRTC 1.0は、Chromeに2016年中に実装される予定です。

駆け足＆ざっくりの紹介でしたが、いかがでしたでしょうか？ WebRTCがものすごい勢いで進化していることが、少しでも文章を通じてお伝えできれば幸いです。