Chrome 67 ベータ版: WebXR オリジン トライアル、汎用センサーなど

この記事は Chromium Blog の記事 "Chrome 67 Beta: WebXR Origin Trial, Generic Sensors" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版に適用されます。Chrome 67 の完全な機能リストについては、ChromeStatus.comを参照してください。

汎用センサー

センサーのデータは、多くのネイティブ アプリケーションで使われ、臨場感のあるゲーム、フィットネス トラッキング、拡張現実や仮想現実などを実現しています。Generic Sensor APIを使うと、センサーのデータをウェブ アプリケーションでも利用できるようになります。この API は、基本となる Sensor インターフェースと、それを利用する一連の具象センサークラスで構成されています。以下に、センサーの仕様へのリンクと使用例を示します。

加速度計: 端末の動きを検知することで、3D 動画内を動き回る。

ジャイロスコープ: 端末の傾きや姿勢を検知する迷路盤。

オリエンテーション センサー: いわゆる フュージョン センサーと呼ばれるもので、2 つ以上のセンサーから読み取った値を組み合わせる。この場合、加速度計とジャイロスコープを組み合わせる。ジャイロスコープのみで実装した迷路は、位置マーカーを 2 次元で動かすことしかできないかもしれない。一方、オリエンテーション センサーで実装した迷路では、ユーザーが物理的に端末を回転させることで角を曲がるようにすることができる。

モーション センサー: 加速度計、ジャイロスコープに加えて磁力計も利用するフュージョン センサー。もっともわかりやすいユースケースは、仮想コンパス。

加速度計の値は、x、y、z 座標における端末の移動速度を表します。

Intel が、ダウンロード可能なサンプルコードを付属したセンサー API のデモサイトを公開しています。オリジン トライアルの開始時に公開された記事も更新されています。

WebXR Device API オリジン トライアル

WebXR Device API を使うと、モバイル端末や PC で仮想現実や拡張現実アプリを作成できます。これにより、AR 対応のモバイル端末、Google Daydream View や Samsung Gear VR などのモバイルベースの VR ヘッドセット、Oculus Rift、HTC Vive、Windows Mixed Reality Headset などの PC をホストとするヘッドセットで、同じ体験を提供できるようになります。

新しい API は、オリジン トライアルとして利用できます（説明、申し込みフォーム）。サンプルやドキュメントは、Immersive Web Community Group GitHub レポジトリにあります。WebVR 1.1 対応ブラウザ、非対応ブラウザ、およびモバイル端末の「Magic Window」をサポートする polyfill もあります。

仮想現実で動画を視聴

この API で実現できる仮想現実や拡張現実には、ゲームのほか、以下のような「ロングテール」アプリがあります。

• 臨場感のある 360° 動画
• 臨場感のある環境に表示される従来型の 2D（または 3D）動画
• データ視覚化
• ホーム ショッピング
• アート

注:バージョン 62 以降の Chrome で利用できる WebVR オリジン トライアルに参加している方は、既存のトークンを WebXR オリジン トライアルで使うことはできません。WebVR オリジン トライアル（古いもの）は、2018 年 7 月 24 日に終了します。

今回のリリースに追加されたその他の機能

SVG

SVG2 の <foreignObject>は、スタッキング コンテキストである必要があります。<foreignObject>をスタッキング コンテキストにすることで、デベロッパーは <foreignObject>の下に確実に HTML コンテンツを配置できるようになります。

DOM

DOM 仕様が更新され、DOMTokenList.replace()は置換が発生したかどうかを示す boolean を返すようになりました。置換の有無によって異なる処理を実行するコードでは、contains()を使った余分な条件が不要になるため便利です。Chrome はこの仕様に従うようになります。

HTML > CustomElement

ネイティブの組み込み要素の意味を継承したカスタム要素を作成できるようになります。これにより、ユーザー補助機能、セマンティクス、JavaScript のメソッドやプロパティなどの組み込み機能を再実装する手間が省けます。

入力

5 つ以上のボタンがあるマウスの、戻るおよび進むボタンのマウスイベント（mousedown、auxclick、mouseup）をウェブページで処理できるようになります。これにより、マウスの戻るおよび進むボタンをオーバーライドしたいゲームなどのアプリケーションで、これらの動作を阻止できるようになります。

Windows では、多くのヨーロッパ言語のレイアウトなどで、右側の Alt キーが AltGraph（ISO-Level-3-Shift）として動作します。これは、表示可能な文字の種類を増やすためです。このキーは、内部的に Ctrl+Alt 修飾子を生成します。Chrome はこのキーが押された場合のフラグとして、Control、Alt、AltGraph のすべてを報告します。他のプラットフォームとの間でこれらの修飾子の整合性をとるため、今回の変更で Windows の Chrome は AltGraph と Ctrl+Alt を区別するようになります。

デベロッパーにとっては、キーボード イベントの修飾子ハンドリングにおけるエッジケースがなくなります。アプリで keydown/keypress/keyup を処理してショートカットを実装する場合、一部（主にヨーロッパ）のキーボード レイアウトに対応するための回避策が不要になります。たとえば、アプリで（GMail のように）Ctrl+# をショートカットとして使用する場合、以前は Ctrl と AltGraph の両方をチェックする必要がありました。そうしないと、フランスのユーザーはこのショートカットを使用できませんでした。
この変更は、Windows にのみ適用されます。

JavaScript

JavaScript に、任意の精度の整数をサポートする数値プリミティブが導入されました。これまで、JavaScript の数値は倍精度浮動小数点数として表現されており、精度に制限がありました。数値リテラルに BigInt()関数や 'n'接尾語を付けることにより、安全な整数の制限値を超えた場合でも、大きな整数を安全に格納および演算できるようになります。

レイアウト

フォーマット コンテキストは、配置される際に float と厳密に同じ動作をするようになります。つまり、位置決めのために float の shape-outsideプロパティを参照することはなくなり、マージン ボックスに従って位置が決まります。この新しい動作は、こちらの例で flexクラスの高さを変えることによって確認できます。これは、新しいフォーマット コンテキストのサイズや位置にも影響します。

ローダ

クライアント ヒントは、オリジンが HTTP リクエスト ヘッダーを通して端末固有のプリファレンスを受け取れるようにするものです。Accept-CH-Lifetimeは、指定された期間、オリジンがオプトインしたポリシーを永続化できるようにするクライアント ヒントを追加します。これにより、ナビゲーション リクエストの際にオリジンがクライアント ヒントを受信できるようになります。また、この機能によって、最初のページが読み込まれる際にページのすべてのサブリソース用のヒントが提供されます。

ネットワーク > Streams API

Streams API の一部である TransformStream を使用すると、データ ストリームを作成、構成、消費できます。また、ストリーム形式のデータを変換できます。通常は、ReadableStreamと WritableStreamを結ぶパイプとして使われます。次の例では、ストリームから受信するレスポンス本文のテキストを TransformStream を使ってデコードしています。

function textDecodeTransform() {
 const decoder = new TextDecoder();
  return new TransformStream({
   transform(chunk, controller) {
     controller.enqueue(decoder.decode(chunk, { stream: true }));
   }
 });
}

fetch(url).then(response => {
 // response.body is a stream of Uint8Array chunks.
 // But if we want chunks of text:
 const stream = response.body.pipeThrough(textDecodeTransform());
 // …
});

Shadow DOM

<slot>要素を フラット レイアウト ツリーに含められるようになります。UA スタイルは、display: contentsです。この変更が行われる前は、<slot>要素に CSS セレクタを適用しても何も起きませんでした。この問題が修正されるのに加え、セレクタが <slot>要素に適用されると、子要素にスタイルが継承されるようになります。

サポートの終了と相互運用性の改善

Chrome では、他のブラウザとの相互運用性を高めるために、機能のサポート終了、削除、変更を行う場合があります。このバージョンの Chrome では、以下の変更が行われています。

HTTP ベースの Public Key Pinning のサポート終了

HTTP ベースの Public Key Pinning（HPKP）は、ウェブサイトの証明書チェーンに存在する 1 つまたは複数の公開鍵と関連付けた HTTP ヘッダーを送信できるようにすることが目的でした。これはほとんど採用されておらず、また証明書の不正発行に対するセキュリティを提供する機能であるにもかかわらず、サービス拒否や悪意のある関連付けが行われるリスクを生み出しています。

ウェブ デベロッパーは、証明書の不正発行に対する防衛策として、Expect-CTヘッダーとその報告機能を使う必要があります。Expect-CTは、エラーから復旧させる際のサイト運用者の柔軟性が高い点や、多くの CA で組み込みサポートが提供されている点で、HPKP よりも安全です。

HPKP は、Chrome 69 で削除される予定です。

安全でないコンテキストでの AppCache のサポート終了

HTTPS での AppCache が非推奨になります。AppCache は、オフラインでも常にオリジンにアクセスできるようにする強力な機能です。安全でないコンテキストで AppCache を利用できると、クロスサイト スクリプティング攻撃につながる攻撃ベクトルができることになります。
この機能の削除は、Chrome 69 で行われる予定です。

レイアウト

今回のリリースでは、いくつかの Webkit 接頭辞が付いた CSS プロパティが削除されます。

-webkit-box-flex-group: 安定版の UseCounter によると、このプロパティはごくわずかしか使用されていません。

-webkit-line-clamp の % 値: この数値のユースケースを解決する標準的なソリューションを見つけ出すことには関心が寄せられていますが、% ベースの値への需要はありません。

-webkit-box-lines: このプロパティは、完全に実装されることはありませんでした。元々、「垂直」/「水平」の -webkit-boxに複数の行/列を持たせるためのものでした。


Reviewed by Eiji Kitamura - Developer Relations Team