Chrome 79 ベータ版: ウェブにバーチャル リアリティがやってくる
2019年11月29日金曜日
この記事は Chromium Blog の記事 "Chrome 79 Beta: Virtual Reality Comes to the Web" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能の詳細については、リンクまたは ChromeStatus.com の一覧でご確認ください。2019 年 10 月 31 日の時点で Chrome 79 はベータ版です。
今回のリリースは、拡張現実や各種ツールなどのサポート、さらには現実世界での没入型体験の理解を広げるなど、今後の没入型機能の土台となります。没入型機能は、多くの体験を拡張できます。 たとえば、ゲーム、家の購入、購入前に自宅で製品を確認するなどがあげられます。バーチャル リアリティと新しい API を使ってみたい方は、ウェブにバーチャル リアリティがやってくるをお読みください。
これがないと、デベロッパーは多くの場合、実際のマーカーを隠し、コンテンツ プロパティで
Reviewed by Eiji Kitamura - Developer Relations Team
特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能の詳細については、リンクまたは ChromeStatus.com の一覧でご確認ください。2019 年 10 月 31 日の時点で Chrome 79 はベータ版です。
ウェブにバーチャル リアリティがやってくる
Chrome に WebXR Device API が搭載されます。デベロッパーは、スマートフォンとヘッドマウント ディスプレイを使った没入型体験を作成できるようになります。Firefox Reality、Oculus Browser、Edge、Magic Leap の Helio ブラウザなどの他のブラウザも、まもなくこの仕様をサポートする予定です。今回のリリースは、拡張現実や各種ツールなどのサポート、さらには現実世界での没入型体験の理解を広げるなど、今後の没入型機能の土台となります。没入型機能は、多くの体験を拡張できます。 たとえば、ゲーム、家の購入、購入前に自宅で製品を確認するなどがあげられます。バーチャル リアリティと新しい API を使ってみたい方は、ウェブにバーチャル リアリティがやってくるをお読みください。
オリジン トライアル
このバージョンの Chrome には、以下のオリジン トライアルが導入されています。オリジン トライアルとして新機能を試せるようにすることで、ウェブ標準コミュニティにユーザビリティ、実用性、有効性についてのフィードバックを提供することができます。以下の項目を含め、現在 Chrome でサポートされているオリジン トライアルに登録するには、オリジン トライアル ダッシュボードをご覧ください。オリジン トライアル自体の詳細については、ウェブ デベロッパーのためのオリジン トライアル ガイドをご覧ください。rendersubtree 属性のサポート
すべての HTML 要素に、表示用に DOM 要素をロックする rendersubtree 属性が追加されます。rendersubtree を"invisible"
に設定すると、その要素の内容に対する描画やヒットテストが行われなくなり、レンダリングが最適化されます。rendersubtree で "activatable"
トークンを使うと、ブラウザは非表示属性を削除し、内容をレンダリングして表示します。Promise ベースの Wake Lock API
Wake Lock API のアップデートが追加され、Promise といくつかの種類のウェイクロックが導入されます。Wake Lock API を使うと、標準的で安全な方法により、画面や CPU サイクルの省電力モードといったいくつかの端末機能を停止できます。このアップデートは、古い API のいくつかの欠点に対処します。古い API は、画面のウェイクロックに制限があり、一部のセキュリティやプライバシーの問題に対処できていませんでした。今回のリリースに追加されたその他の機能
Android のインストール済み PWA のアダプティブ アイコン表示
Android Oreo で導入されたアダプティブ アイコンは、ホーム画面やランチャーのすべてのアイコンに同じ形状を強制します。Android O 以前のアイコンはどんな形状にすることもできたので、アイコンに背景はありませんでした。たとえば、GMail は四角形、Play は三角形だったため、これらのアイコンは白い円の中に配置されました。アダプティブ アイコン表示では、Android が自動的に不規則な形状のアイコンをマスクし、サイズを調整します。すべてのフォーカス可能な HTML/SVG 要素がオートフォーカスをサポート
すべてのフォーカス可能な HTML または SVG 要素にautofocus
属性が追加されます。autofocus
はこれまでも一部の HTML 要素でサポートされていましたが、フォーカスを受け取れるにもかかわらず autofocus
属性がサポートされていない要素もありました。この機能により、不一致が解消されます。HTML 属性の width または height からイメージと動画のアスペクト比を計算
イメージのアスペクト比が計算され、読み込み前の CSS によるイメージのサイズ指定に利用できるようになります。これにより、イメージ読み込み時の不要な再レイアウトを避けることができます。font-optical-sizing
font-optical-sizing
プロパティは、フォントサイズを自動的に opsz(光学的サイズをサポートする可変フォントの光学的サイズ軸)に設定します。これにより、指定されたフォントサイズで最適に動作するグリフの形状が選択されるようになるため、フォントサイズに応じてスタイル設定が改善され、フォントが読みやすくなります。たとえば、ヘッダーのサイズのフォントの方が、本文のサイズの同じフォントよりもグリフのコントラストが高くなることがあります。list-style-type: <文字列>
スタイルシートのリストスタイル マーカーで任意の文字を使えるようになります。たとえば、"-"、"+"、"★"、"▸" などです。CSS Level 2 以降、list-style-type
は disc
や decimal
などのリストアイテム マーカーの外見を定義するキーワードをサポートしています。これがないと、デベロッパーは多くの場合、実際のマーカーを隠し、コンテンツ プロパティで
::before
疑似要素を使って任意のマーカーを挿入せざるを得ません。残念ながら、list-style-position
は疑似マーカーをうまく配置できません。より明示的なエラーで Worklet.addModule() を拒否
Worklet.addModule()
が失敗したとき、Promise はこれまでよりも明示的なエラー オブジェクトを使って拒否するようになります。Worklet.addModule()
は、ネットワーク エラーや構文エラーなどのさまざまな理由で失敗する可能性があります。この変更が行われる前、Worklet.addModule()
は実際の原因とは関係なく AbortError
で拒否されていました。そのため、デベロッパーがワークレットをデバッグするのは困難でした。この変更後、Worklet.addModule()
は SyntaxError
などの明確なエラーで拒否するようになります。Worker 自身の Service Worker オブジェクトの取得
Service Worker は、Service Worker スクリプトでself.serviceWorker
を使って自身の ServiceWorker オブジェクトを取得し、self.serviceWorker.state
を使って現在の状況を取得できるようになります。以前は、Service Worker のインスタンスが現在のライフサイクルの状態を取得する方法はありませんでした。これにより、グローバル変数を使って現在のライフサイクルの状態をトラッキングするというハックを使う必要はなくなります。この方法はエラーが起こりやすいうえ、待機時間を正常に取得できません。フェッチの際にドキュメント間を移動する script 要素の評価の停止
フェッチの際に<script>
要素がドキュメント間を移動する場合、Chrome はスクリプトを評価しなくなり、error
イベントや load
イベントも発行しなくなります。script 要素がドキュメント間を移動できる点は変わりませんが、そのような要素は実行されません。これは、ドキュメント間を移動する <script>
要素の悪用によって発生する潜在的なセキュリティ バグを防ぎます。サポートの終了と機能の削除
このバージョンの Chrome では、以下のサポートの終了および機能の削除が行われます。現在サポートが終了している機能および以前に削除された機能のリストは、ChromeStatus.com をご覧ください。任意の要素の -webkit-appearance キーワード
-webkit-appearance キーワードは、特定のタイプの要素でのみ動作するように変更されます。キーワードがサポート対象外の要素に適用された場合、要素はデフォルトの外見になります。Reviewed by Eiji Kitamura - Developer Relations Team