このページは Cloud Translation API によって翻訳されました。

Chrome 94 の新機能

Pete LePage

必知事項は次のとおりです。

<canvas> 要素のデフォルトの色空間は、仕様で SRGB として正式に定義されるようになりました。これは、Display P3 に変更できます。
WebCodecs は、組み込みのオーディオコーデックや動画コーデックにアクセスするための低レベルの新しい方法で、ストリーミングゲームや動画エディタなどに重要です。
WebGPU がオリジントライアルを開始します。
PWA Summit が 10 月 6 ～ 7 日に開催されます。
他にもたくさんあります。

自宅で撮影を担当している Pete LePage です。Chrome 94 のデベロッパー向け新機能を紹介します。

`canvas` 要素のデフォルトの色空間

画面上の色をどのようにレンダリングするかは、一部のユーザーにとって重要です。写真家や印刷用イラストレーターなどの場合、画面上の色は印刷される色と一致している必要があります。Chrome 94 以降では、sRGB を使用して <canvas> 要素を完全にカラー管理できます。以前の sRGB は規則として定義されていましたが、仕様では明示的に定義されていませんでした。

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

さらに重要な点は、<canvas> レンダリングコンテキストの 2d オブジェクト、または ImageData オブジェクト（P3 色空間を含む）を作成するときに、使用する色空間を指定できるようになったことです。

WebCodecs

ページに動画を配置するのは簡単ですただし、もう少し複雑な作業が必要で、動画ストリームのコンポーネントとやり取りする場合は、難しく、通常は Web Assembly を使用して独自のコーデックを用意する必要があります。

ただし、独自のコーデックを配布するということは、ブラウザにすでに記述されているコードを記述することになり、ハードウェアアクセラレーションを利用することはできません。Web Codecs API を使用すると、ブラウザにすでにあるメディアコンポーネントとコーデックを使用できるようになります。

個人的には、動画をウェブ用にエンコードしたり、GIF を動画ファイルに変換したりするための適切なコマンドラインスイッチを覚えるのに苦労してきました。WebCodecs から利用できる API を使用して、ファイルを読み取り、ウェブに必要な正しいファイルをエクスポートするウェブアプリをすばやく構築できました。

Canvas または ImageBitmap からネットワークまたはストレージへのパス — `Canvas` または `ImageBitmap` からネットワークまたはストレージへのパス

メディアコンテンツの処理方法を完全に制御する必要があるウェブアプリ（動画エディタ、ビデオ会議、ストリーミングアプリなど）。メディアコントロールに組み込まれているブラウザにアクセスできるため、非常に便利です。

有用なものを 30 秒で表示するのは難しいため、web.dev にアクセスして WebCodecs を使用した動画処理をご覧ください。豊富なコードと便利なデモが紹介されています。

WebGPU

WebGPU は、最新のグラフィック機能、特に Direct3D 12、Metal、Vulkan を公開する新しい API です。WebGL に似ていますが、WebGL では GPU のより高度な機能にアクセスできるほか、GPU での一般的な計算の実行もサポートされます。

Chrome 94 でオリジントライアルが開始され、現在は Safari と Firefox の両方で実装が進められています。

WebGPU のコンピューティングシェーダー機能を使用して荒波をシミュレートする Babylon.js のデモ。

François は、web.dev で WebGPU を使用して最新の GPU 機能にアクセスするという優れた記事で詳細を説明し、CPU と GPU で実行される行列乗算のパフォーマンスを比較しています。ヒントです。GPU が優先します。

PWA サミット

PWA Summit が 10 月 6 ～ 7 日に開催されます。誰もがプログレッシブウェブアプリで成功を収められるように支援することに焦点を当てた、無料のオンラインカンファレンスです。PWA Summit は、PWA テクノロジーの開発に関与している、Google、Intel、Microsoft、Samsung の関係者が一堂に会して開催します。

魅力的な講演やコンテンツが満載です。詳細と登録については、PWASummit.org をご覧ください。ご参加をお待ちしております。

など多数

他にもたくさんあります。

優先順位の高い scheduler.postTask() メソッドを使用すると、タスクのスケジュールを設定し、優先順位を動的に変更したり、まとめてキャンセルしたりできます。

スクロールバーが表示されたときに再レイアウトに苦戦したことがある方には、scrollbar-gutter プロパティが役立ちます。スクロールバーのガターの表示を制御できるため、コンテンツの展開に伴うレイアウトの変更を防ぐことができます。

サードパーティコンテキストでの WebSQL の使用は非推奨になりました。Chrome 97 以降で削除される予定です。Web SQL データベース標準は 2010 年 11 月に廃止されましたこれは Firefox では実装されておらず、2019 年に Safari でサポートが終了しました。使用量が十分に少なくなると非推奨になり、Chrome から削除されます。まだ WebSQL を使用している場合は、今から WebSQL からの移行計画を開始することをおすすめします。

また、仮想キーボード API を使用すると、仮想画面キーボードを表示する方法とタイミングをより細かく制御できます。これにより、キーボードの表示と非表示が切り替わったときのスクロール動作や、レイアウトの変更を明示的に制御できます。