特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能の詳細については、リンクまたは ChromeStatus.com ã®ä¸€è¦§ã§ã”確認ください。2022 å¹´ 6 月 23 日の時点で Chrome 104 はベータ版です。PC 向けの最新版は Google.com ã§、Android では Google Play ストアでダウンロードできます。

リージョン キャプチャ

PC 版の Chrome で、セルフキャプチャした動画トラックをトリミングできるようになります。ウェブアプリでは、getDisplayMedia() ã‚’使ってタブを動画でキャプチャすることができます。ウェブアプリでリージョン キャプチャを使うと、トラックをトリミングしてコンテンツの一部を削除できます。通常、この機能は、リモートに共有する前に利用します。

たとえば、ビデオ会議が組み込まれた生産性向上ウェブアプリがあるとします。ウェブアプリのビデオ会議で画面の一部（下の図の赤線部分）をトリミングすることで、映像がループする現象を回避できます。詳細については、リージョン キャプチャでタブ共有を改善するをご覧ください。

リージョン キャプチャ ウィンドウ: 青い部分がブロードキャストされるコンテンツ、赤い部分がトリミングされるコンテンツ。


メディアクエリ レベル 4 構文と評価

メディアクエリを使うとレスポンシブ デザインを実現できます。また、ビューポートの最小サイズや最大サイズを確認できるレンジ機能は、メディアクエリを使っているサイトの約 80% ã§åˆ©ç”¨ã•ã‚Œã¦ã„ます。

メディアクエリ レベル 4 仕様には、このレンジ クエリの新構文が含まれており、通常の算術比較演算子を使って範囲を記述できるようになっています。また、論理演算子 or ãŠã‚ˆã³ not、ネスト、"unknown" の評価機能もサポートされます。たとえば、これまでのメディアクエリは次のように記述されていました。

@media (min-width: 400px) { … }

これを、次のように記述できるようになります。

@media (width >= 400px) { … }

詳細については、Chrome 104 のレンジ メディアクエリの新構文をご覧ください。

オリジン トライアル

このバージョンの Chromium では、以下のオリジン トライアルがサポートされます。オリジン トライアルとして新機能を試して、ユーザビリティ、実用性、有効性についてのフィードバックをウェブ標準コミュニティに提供することができます。以下の項目を含め、現在 Chromium でサポートされているオリジン トライアルに登録するには、Chrome オリジン トライアル ダッシュボードをご覧ください。Chrome のオリジン トライアルの詳細については、ウェブ デベロッパーのためのオリジン トライアル ガイドをご覧ください。Microsoft Edge は、Chrome とは別に独自のオリジン トライアルを行っています。詳細については、Microsoft Edge オリジン トライアル デベロッパー コンソールをご覧ください。

新しいオリジン トライアル

focusgroup

focusgroup CSS プロパティを使うと、キーボードの矢印キーを使ってフォーカス可能な要素間でフォーカスを移動する操作を改善できます。ブラウザにこの機能を追加することで、整合性、ユーザー補助、相互運用性に欠けるカスタム ソリューションを使うことなく、フォーカス操作を制御できるようになります。Microsoft Edge のオリジン トライアルにはこちらから登録できます。このトライアルは、107 まで行われる予定です。

クレジット カード保存のオプトアウト

Secure Payment Confirmation において、今後の購入を簡単にするためにクレジット カードのデータを保存する機能をオプトアウトできるようになります。この新機能を使うには、PaymentRequest() ã‚³ãƒ³ã‚¹ãƒˆãƒ©ã‚¯ã‚¿ã®æœ€åˆã®ãƒ‘ラメータとして渡す methodData.data ã§、showOptOut ã‚’ true ã«è¨­å®šã—ます。次に例を示します。

const methodata = [{ 
  …
  data: {
    …
    showOptOut: true
    …
  }
}];
const request = new PaymentRequest(methodData, details);

実際の例は、デモでご覧いただけます。このオリジン トライアルにはこちらから登録できます。このトライアルは、Chrome 106 まで行われる予定です。

Shared Element Transition

Shared Element Transition を使うと、シングルページ アプリケーション（SPA）で洗練された画面遷移を作成できます。見栄えのよい画面遷移を最小限の開発作業で作成でき、デフォルトのアニメーション プロパティを使うことも、独自の遷移効果をカスタマイズして希望どおりの画面遷移を実現することもできます。画面遷移は CSS プロパティを使って宣言的に設定します。詳細については、Shared Element Transition ã‚’ご覧ください。オリジン トライアルへの登録は、ダッシュボードから行うことができます。

完了したオリジン トライアル

Chrome で以前にオリジン トライアルが行われていた以下の機能は、現在デフォルトで有効化されています。

推測ルール

推測ルールは、ウェブ コンテンツで特定の URL のプリフェッチまたはプリレンダリングを許可する仕組みを提供します。次に例を示します。

<script type="speculationrules">
  {
    "prefetch": [
      {"source": "list", "urls": ["/weather/kitchener", "/weather/seattle", "/weather/tokyo"]}
    ]
  }
</script>

ウェブバンドルによるサブリソースの読み込み

ウェブバンドルによるサブリソースの読み込みは、多数のリソースを効率的に読み込む方法です。この機能を使うには、特定のリソースが特定の URL でウェブバンドルから提供されることをウェブページで宣言します。次に例を示します。

<script type="webbundle">
{
   "source": "https://example.com/dir/subresources.wbn",
   "resources": ["https://example.com/dir/a.js", "https://example.com/dir/b.js", "https://example.com/dir/c.png"]
}
</script>

ウェブバンドルの詳しい作成方法については、ウェブバンドルを使ってみるをご覧ください。ウェブバンドルによるサブリソースの読み込みの詳細については、ウェブバンドルによるサブリソースの読み込みのオリジン トライアルをご覧ください。

インストールした PC ウェブアプリ向けのウィンドウ コントロール オーバーレイ

PC でウェブアプリのクライアント領域を拡張し、タイトルバー領域を含むウィンドウ全体を覆うことができるようになりました。その場合、ウィンドウ コントロール ボタン（閉じる、最大化 / 復元、最小化）はクライアント領域の上に重なって表示されます。ウェブアプリのデベロッパーは、ウィンドウ コントロール オーバーレイを除くウィンドウ全体の描画と入力ハンドリングをする必要があります。この機能を使うと、デベロッパーはインストールされた PC ウェブアプリをプラットフォームのアプリのように見せることができます。

今回のリリースに追加されたその他の機能

Cookie の Expires / Max-Age 属性の上限

明示的に Expires / Max-Age 属性を指定して Cookie を設定する場合、400 日を超える日付は設定できなくなります。これまでは制限がなかったので、有効期限が数千年の Cookie も可能でした。これは、仕様の変更に従ったものです。

400 日は、13 か月に近いきりのいい数であることから選ばれました。これだけの期間があれば、ほぼ 1 年に 1 度しかアクセスしないサイト（健康保険の給付金を選ぶサイトなど）も問題なく動作します。

CSS object-view-box

object-view-box ãƒ—ロパティを使うと、イメージの一部を指定して、置換対象となる要素のコンテンツ ボックスに描画できます。これにより、CSS シャドウのような適切な ink-overflow å‹•ä½œã‚’維持しながら、カスタムのグローやシャドウを適用したイメージを作成できるようになります。詳細については、CSS object-view-box プロパティの紹介をご覧ください。

全画面表示機能の委譲

全画面表示機能の委譲をすると、ある Window から別の信頼する Window に requestFullscreen() ã‚’呼び出す機能を移管することができます。これは、送信元の Window がユーザーによって一時的にアクティブ化され、それが解除された後に行われます。この機能は、Chrome 100 に含まれる汎用委譲メカニズムに基づいています。

マルチスクリーン ウィンドウ配置 : 全画面表示コンパニオン ウィンドウ

全画面表示コンパニオン ウィンドウを使うと、ユーザーが 1 度アクティブ化するだけで、全画面表示コンテンツとポップアップ ウィンドウを別の画面に配置できます。デモが公開されており、ソースコードは GitHub にあります。

Web Bluetooth API のパーミッション ポリシー

Web Bluetooth をパーミッション ポリシーで制御できるようになります。トークンの名前は "bluetooth" ã§、デフォルトの許可リストは 'self' ã§ã™。

overflow-clip-margin の visual-box

overflow-clip-margin ãƒ—ロパティは、要素のコンテンツがクリッピングされずに描画できる範囲を指定します。この機能により、visual-box å€¤ã‚’使って参照ボックスを設定できるようになります。この参照ボックスが、コンテンツをクリッピングするオーバーフロー クリップのエッジを定義します。

Async Clipboard API のウェブ カスタム フォーマット

ウェブ カスタム フォーマット機能により、標準化されたウェブ カスタム フォーマットを使って、サニタイズされていない任意のペイロードを読み書きできるようになります。また、一部の限定された OS 固有のフォーマットを読み書きすることもできます（以前のアプリをサポートするため）。

コンテンツがウェブからのものであることを示すため、ブラウザはクリップボードのフォーマットの名前を標準化された方法で難読化します。そのため、プラットフォームのアプリケーションは、サニタイズされていないコンテンツを受け入れるかどうかを選択できます。

オペレーティング システムのクリップボードを通してウェブとプラットフォーム アプリケーションの間でデータ ペイロードを交換したいウェブアプリ デベロッパーもいるかもしれません。Clipboard API ã¯、特によく使われる標準データタイプ（テキスト、イメージ、リッチテキスト）をすべてのプラットフォームでサポートしています。ただし、この API はロングテールな特殊フォーマットまでは対応していません。特に、現在のウェブ プラットフォームでは、カスタム フォーマット、TIFF（大型イメージ フォーマット）などの非ウェブ標準フォーマット、docx（ドキュメント フォーマット）などの独自フォーマットはサポートされません。

WebGL の描画キャンバス カラー マネジメント

仕様に従い、Chromium の WebGL 実装で以下の指定ができるようになります。

  • 描画バッファのカラースペース
  • コンテンツをテクスチャとしてインポートする際に変換するカラースペース

以前のバージョンの Chrome では、両方とも既定の sRGB となっていました。現在のバージョンより、"display-p3" も利用できるようになります。

サポートの終了と機能の削除

このバージョンの Chrome では、以下のサポートの終了と機能の削除が行われます。現在サポートが終了している機能と以前に削除された機能のリストは、ChromeStatus.com をご覧ください。

ファイルシステム URL にアクセスするサードパーティ コンテンツのブロック

iframe はファイルシステム URL に移動することができなくなります。トップフレームのファイルシステム URL への移動は、Chrome 68 で削除されています。

非標準クライアント ヒント モードの削除

4 つのクライアント ヒント（dpr、width、viewport-width、device-memory）にはデフォルトの許可リスト self ãŒã‚りますが、Android では仕様とは異なり、デフォルトの許可リスト * ãŒã‚るかのように動作します。この点が修正され、これらのヒントで明示的な委譲が必須となるため、Android でのプライバシーが改善されます。

U2F API（Cryptotoken）の削除

Chrome で以前にセキュリティ鍵を操作するために使われていた U2F API のサポートが終了します。U2F セキュリティ鍵自体は非推奨ではなく、今後も動作し続けます。

影響を受けるサイトは、Web Authentication API ã«ç§»è¡Œã™ã‚‹å¿…要があります。もともと U2F API で登録された認証情報は、ウェブ認証経由でチャレンジできます。U2F API でサポートされる USB セキュリティ鍵も、Web Authentication API のサポート対象です。

U2F は Chrome オリジナルのセキュリティ鍵 API で、フィッシングに強い 2 要素認証システムを構築するために、サイトから USB セキュリティ鍵に公開鍵認証情報を登録して、チャレンジできるようにします。U2F はオープンなウェブ標準になることはなく、Web Authentication API（Chrome 67 でリリース）に取り込まれました。Chrome は FIDO U2F JavaScript API を直接サポートすることはありませんでしたが、同等の機能を持つ chrome.runtime.sendMessage() ãƒ¡ã‚½ãƒƒãƒ‰ã‚’提供する Cryptotoken と呼ばれるコンポーネント拡張機能を公開しました。U2F と Cryptotoken は確実にメンテナンス モードに入っており、ここ 2 年間にわたって Web Authentication API への移行が推奨されています。

Reviewed by Eiji Kitamura - Developer Relations Team