「Google Chrome 104」安定版リリース、画面共有を便利にするリージョンキャプチャ機能を実装 – GIGAZINE



ウェブブラウザ「Google Chrome」の最新安定版、バージョン104.0.5112.81(Windows版、macOS版/Linux版104.0.5112.79)をリリースしました。 Web 画面共有をトリミングし、レベル 4 のメディア クエリをサポートするリージョン キャプチャ機能が実装されました. さらに、共有トランジション機能はオリジン テストを開始しました.

Chrome 104 の新機能: リージョン キャプチャ、メディア クエリ、遷移の共有など。 – ユーチューブ

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

例として、下の図に示すように、「ビデオ会議が統合された Web アプリケーション」の画面共有のケースを考えてみましょう。


この場合、赤い点線枠で囲まれたテレビ会議の画面共有部分は共有する必要がなく、画面共有の状況によっては、共有画面が共有画面内にミラーリングされる場合があります。鏡のような現象起こることもあります。 そんな時にリージョンキャプチャ機能を使えば、青い点線枠で囲まれた「共有情報」だけを切り取って共有することができます。 この例は少し極端ですが、ブラウザーのタブ全体の画面を共有すると、不要な情報が共有される可能性がある状況が多くあります。

◆「レベル4メディアクエリ」に対応
メディア相談歯、センシティブを前提とした現代のWebデザインに欠かせないデザイン手法です。レベル 4 メディアの問い合わせこの仕様では、メディア特徴クエリを指定する方法で不等式とブール値を使用できるようになり、理解しやすくなりました。


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.
}

これはメディア クエリ レベル 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.
  }
}

ブール値の概念を適用すると、これを簡潔に書くことができます。 ここで、ポインタが無の状態が0(=偽)であり、無の状態が0でない(=真)である。

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

◆共通要素遷移
共有要素遷移機能原産地証明始まります。 ネイティブアプリは様々なビューをシームレスに切り替えやすいのに対し、Webアプリは比較的画面遷移のハードルが高く、状況によっては遷移の合間に一瞬空白が表示されてしまう傾向があります。 Shared Element Transitions は、Web アプリケーションの画面遷移をスムーズにするためのメカニズムです。

次のサンプル コードは、1 つのページで構成される Web アプリケーションで画面遷移を実行する方法を示しています。


まず、ページ コンテキストを取得し、共有要素の遷移がサポートされているかどうかを確認します。 非対応の場合は通常通りページが更新されますが、対応の場合はトランジションオブジェクトが生成され、start()メソッドで画面遷移が開始されます。 この API は、引数として渡された関数がいつ DOM の変更を完了するかを知ることができます。 共有要素の遷移は内部ですCSS アニメーション画面遷移の一形態として、フェードインやスライドなど様々な効果が利用できます。

◆その他のアップデート
U2Fセキュリティ キー API を削除する
iframe がファイル システムに移動するのをブロックするように変更されました
・Cookie Expiration/Max Age属性の上限を400日に設定(以前はほぼ無制限)
・CSSプロパティにobject-view-boxを追加し、img要素などのクリッピング手順を簡略化する手段を提供。
・全画面権限委譲機能:requestFullscreen()の呼び出し権限を別ウィンドウに委譲する
・マルチスクリーンウィンドウレイアウト機能とフルスクリーンアドオンウィンドウの提供
Bluetooth ウェブ API許可ポリシー制御の対象
Android の「レガシー」クライアント ヒント セット (「dpr」、「width」、「viewport-width」、および「device-memory」) の既定の許可リストを修正しました。
・複数のリソースを一度に効率的にロードする「Webpack」の提供
クリップされる前に要素のコンテンツをどこまでペイントできるかを指定する「overflow-clip-margin」プロパティを追加しました。
・OSのクリップボードを介してWebアプリとネイティブアプリ間でサニタイズされていない非正規データを交換する仕組みの提供
WebGLキャンバスでのカラー管理の改善

また、「Google Chrome 104」では27 件のセキュリティ バグ修正含まれています。

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

この記事のタイトルと URL をコピーします。

Leave a Reply

Your email address will not be published.