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 に似ていますが、GPU の高度な機能にアクセスでき、GPU での一般的な計算の実行もサポートされています。

OS API と Direct3D 12、Metal、Vulkan 間の WebGPU 接続を示すアーキテクチャ図。
WebGPU アーキテクチャ図

Chrome 94 でオリジン トライアルが開始されます。Safari と Firefox の両方で現在、実装に取り組んでいます。

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

François が web.dev で公開している優れた記事「Access modern GPU features with WebGPU」では、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 では実装されず、Safari では 2019 年にサポートが終了しました。使用量が十分に少なくなった時点で、非推奨となり Chrome から削除されます。まだ WebSQL を使用している場合は、WebSQL からの移行を計画することをおすすめします。

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

関連情報

以下に、主なハイライトをいくつかご紹介します。Chrome 94 のその他の変更については、下記のリンクをご覧ください。

登録

最新情報を入手するには、Chrome Developers の YouTube チャンネルにチャンネル登録してください。新しい動画が公開されると、メール通知が届きます。

Pete LePage と申します。Chrome 95 がリリースされ次第、Chrome の新機能についてお知らせします。