「Google Chrome 104」安定版リリース、画面共有を便利にするRegion Capture機能を実装

ウェブブラウザ「Google Chrome」の最新安定版であるバージョン104.0.5112.81(Windows版、macOS版/Linux版は104.0.5112.79)がリリースされました。ウェブ画面共有をトリミングするRegion Capture機能が実装され、Media Queries Level 4への対応が行われています。またShared Element Transitions機能がオリジントライアル開始となっています。

New in Chrome 104: Region Capture, Media Queries, Shared Element Transitions, and more! - YouTube


◆Region Capture機能
Region Capture機能を使用することにより、タブ画面から必要な部分だけをトリミングしてキャプチャーし、リモートに共有する必要のない部分を削除することができます。

例として、以下の図のような「ビデオ会議を内蔵したウェブアプリ」をビデオ会議で画面共有するケースを考えてみます。

この場合、赤の点線枠で囲まれたビデオ会議のパーツは画面共有する必要がなく、また画面共有の状況によっては共有画面の内部に共有画面が映り込むことで合わせ鏡のような現象が発生することもあり得ます。このような場合にRegion Capture機能を利用することで、青の点線枠で囲まれた「共有すべき情報」のみを切り出して共有することができます。この例は少々極端ですが、ブラウザのタブ全体を画面共有すると余計な情報まで共有しかねない状況はいろいろと考えられるため、こういった機能が提供されたことで画面共有の利便性が大きく向上したといえます。

◆「Media Queries Level 4」対応
メディアクエリーは、レスポンシブを前提とする現代のウェブデザインにとって不可欠なデザイン手法です。Media Queries Level 4仕様ではメディア特性クエリーの指定方法に不等号やBoolean値を使用できるようになり、より理解しやすくなっています。

New syntax for range media queries in Chrome 104 - Chrome Developers
https://developer.chrome.com/blog/media-query-range-syntax/

例えば、最小ビューポート幅を指定する場合、従来のクエリーはこんな感じでした。

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

これをMedia Queries Level 4の構文を用いて記述するとこうなります。

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

また、最大ビューポート幅の、従来の記述は以下。

@media (max-width: 600px) {
  // Styles for viewports with a width of 600px or less.
}

これも同様に、このように記述できます。

@media (width <= 600px) {
  // Styles for viewports with a width of 600px or less.
}

両者の違いがより明確になるのは、これらの幅指定を複合化させた場合です。従来は以下のように記述していました。

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

これがMedia Queries Level 4の構文だとこうなり、非常にスッキリと理解しやすく記述できます。

@media (400px <= width <= 600px) {
  // Styles for viewports between 400px and 600px.
}

また、従来の記述ではこのような複雑な記述が必要であったものも……

@media (min-width: 20em), not all and (min-height: 40em) {
  @media not all and (pointer: none) {
    // Styles for complex condition.
  }
}

Boolean値の概念を適用することでこのように簡潔に記述できます。ここではpointerがnoneである状態を0(=false)、noneでない状態を非0(=true)とし、「(pointer)」と記述するだけでpointerがtrue(つまりnoneでない状態)だと解釈させているのが肝となっています。

@media ((width >= 20em) or (height < 40em)) and (pointer) {
  // Styles for complex condition.
}

◆Shared Element Transitions
Shared Element Transitions機能がオリジントライアル開始となります。ネイティブアプリが多様なビュー間をスムーズに遷移しやすいのに比べ、ウェブアプリでは相対的に画面遷移のハードルが高く、状況によっては遷移の間に一瞬空白を表示するようなこともありがちです。Shared Element Transitionsはウェブアプリに対してスムーズな画面遷移を提供するための仕組みです。

単一ページで構成されたウェブアプリでどのように画面遷移を行うかを、以下のサンプルコードで簡単に示します。

まずはページコンテキストを取得し、Shared Element Transitionsがサポートされているかを確認します。サポートされていない場合は通常通りページの更新を行ないますが、サポートされている場合はtransitionオブジェクトを生成し、start()メソッドを通じて画面遷移を開始させます。このAPIは引数で渡された関数により、DOMの変更が完了したタイミングを知ることが出来ます。Shared Element Transitionsは内部的にCSSアニメーションを使用しており、画面遷移の形式としてフェードイン・スライドインといった様々な効果を使用できます。


◆その他のアップデート
・U2FセキュリティキーAPIの削除
・iframeがファイルシステムに対してナビゲートしようとするのをブロックするよう変更
・CookieのExpires/Max-Age属性について、上限を400日までとする(従来はほぼ無制限)
・CSSプロパティにobject-view-boxを追加し、img要素などのトリミング手順を簡素化する手段を提供
・Fullscreen Capability Delegation機能：requestFullscreen()を呼び出す権限を別のウィンドウに委譲する
・マルチスクリーン・ウィンドウ配置機能とフルスクリーン・コンパニオン・ウィンドウの提供
・Web Bluetooth APIをアクセス許可ポリシーの制御下に置く
・Androidでの「レガシー」なクライアントヒントセット('dpr'、'width'、'viewport-width'および'device-memory')のデフォルト許可リストを修正
・複数のリソースを一括して効率的にロードする「Webバンドル」の提供
・クリップされる前に要素のコンテンツがどこまでペイントできるかを指定するプロパティ「overflow-clip-margin」の追加
・OSクリップボードを介してウェブアプリとネイティブアプリとの間でサニタイズされていない非正規データをやり取りする仕組みの提供
・WebGLのcanvasにおける色管理の強化

また、「Google Chrome 104」には27件のセキュリティバグフィックスが含まれています。

なお、次期安定版の「Google Chrome 105」は現地時間の2022年8月30日にリリース予定です。