Chrome 94 の新機能

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

  • <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 で WebGPU で最新の GPU 機能にアクセスするという優れた記事を公開しています。この記事では、CPU と GPU で実行される行列乗算のパフォーマンスを比較しています。ヒントです。GPU が勝利します。

PWA サミット

PWA Summit が 10 月 6 ~ 7 日に開催されます。これは、誰もがプログレッシブ ウェブアプリで成功できるようにすることを目的とした無料のオンライン カンファレンスです。PWA サミットは、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 の新機能についてお知らせします。