Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Chrome 137 ベータ版

Rachel Andrew

公開日: 2025 年 5 月 1 日

特に記載がない限り、以下の変更は、Android、ChromeOS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネルリリースに適用されます。ここに記載されている機能の詳細については、提供されているリンクまたは ChromeStatus.com のリストをご覧ください。2025 年 4 月 30 日の時点で、Chrome 130 はベータ版です。最新版は、パソコンの場合は Google.com、Android の場合は Google Play ストアからダウンロードできます。

CSS と UI

今回のリリースでは、7 つの新しい CSS 機能と UI 機能が追加されました。

`if()` 関数

CSS の if() 関数を使用すると、条件値を簡潔に表現できます。セミコロンで区切られた条件と値のペアを連続して受け取ります。この関数は、各条件を順番に評価し、最初に true になった条件に関連付けられた値を返します。どの条件も true にならない場合、この関数は空のトークンストリームを返します。これにより、複雑な条件ロジックをシンプルかつ簡潔に表現できます。例:

div {
      color: var(--color);
      background-color: if(style(--color: white): black; else: white);
  }
  .dark {
      --color: black;
  }
  .light {
      --color: white;
  }

<div class="dark">dark</div>
<div class="light">light</div>

`reading-flow` プロパティと `reading-order` プロパティ

reading-flow CSS プロパティは、フレキシブルレイアウト、グリッドレイアウト、ブロックレイアウトの要素が、ユーザー補助ツールに公開される順序と、タブキーボードフォーカスナビゲーションを使用してフォーカスされる順序を制御します。次のいずれかのキーワード値を取ります。

normal
flex-visual
flex-flow
grid-rows
grid-columns
grid-order
source-order

reading-order CSS プロパティを使用すると、読み取りフローコンテナ内の順序を手動でオーバーライドできます。デフォルト値は 0 の整数です。

詳しくは、CSS の reading-flow を使用して論理的な順次フォーカスナビゲーションを行うをご覧ください。また、読み取りフローの例もお試しください。

`offset-path: shape()`

shape() 関数はすでに clip-path でサポートされており、レスポンシブなクリッピングが可能です。offset-path でも有効にすることで、同じ種類のシェイプをそのプロパティに使用できるという小さなギャップを解消できます。

`SVGSVGElement` で transform 属性をサポート

この機能により、transform 属性を使用して、スケーリング、回転、移動、傾斜などの変換プロパティを <svg> ルート要素に直接適用できます。この機能強化により、SVG 座標系全体またはそのコンテンツ全体を操作できるため、動的でレスポンシブなインタラクティブなベクターグラフィックをより柔軟に作成できます。この属性をサポートすることで、追加のラッパー要素や複雑な CSS 回避策を必要とせずに SVG 要素を変換できるため、スケーラブルでアニメーション化されたウェブグラフィックの構築プロセスを効率化できます。

`<use>` でフラグメントを省略して外部ドキュメントのルート要素を参照できるようにする

この機能では、参照要件を緩和することで、SVG の <use> 要素を効率化しています。現在、SVG ドキュメント内のフラグメントを明示的に参照する必要があります。フラグメント ID が指定されていない場合、<use> はターゲットを解決できず、レンダリングも参照も行われません。

この機能を使用すると、フラグメントを省略するか、外部 SVG ファイル名を指定するだけで、ルート要素が自動的に参照されるため、ルートに ID を割り当てるためだけに参照ドキュメントを変更する必要がなくなります。この機能強化により、手動編集プロセスが簡素化され、効率が向上します。

`accent-color` プロパティのシステムアクセントカラーを Windows と ChromeOS に拡張

これにより、フォーム要素にオペレーティングシステムのアクセントカラーを使用できます。accent-color CSS プロパティを使用すると、チェックボックス、ラジオボタン、プログレスバーなどのフォーム要素が、ユーザーのオペレーティングシステムで定義されたアクセントカラーを自動的に採用するようにできます。この機能は 2021 年から macOS でサポートされていましたが、Windows と ChromeOS でもサポートされるようになりました。

`view-transition-name: match-element`

view-transition プロパティの match-element 値は、要素の ID に基づいて一意の ID を生成し、この要素に対して同じ ID を維持します。これは、要素が移動していて、ビューの切り替えでアニメーション化したいシングルページアプリの場合に使用されます。

ウェブ API

「支払い」の WebAuthn 認証情報の作成時にスローされるエラータイプを調整

payment 認証情報の WebAuthn 認証情報作成時にスローされるエラータイプを修正します。過去の仕様が一致していなかったため、ユーザーのアクティベーションなしでクロスオリジン iframe に payment 認証情報を作成すると、支払い以外の認証情報でスローされる NotAllowedError ではなく、SecurityError がスローされていました。これは互換性を破る変更です。以前にスローされたエラーのタイプを検出するコード（e instanceof SecurityError など）は影響を受けます。認証情報の作成中に発生するエラーを一般的に処理するコード（catch (e) など）は、引き続き正しく機能します。

Blob URL のパーティショニング: 取得/ナビゲーション

ストレージパーティションの延長として、ストレージキー（トップレベルサイト、フレームオリジン、has-cross-site-ancestor ブール値）による Blob URL アクセスのパーティショニングを実装します。ただし、フレームオリジンのみでパーティショニングされるトップレベルナビゲーションを除きます。

この変更は、PartitionedBlobURLUsage ポリシーを設定することで一時的に元に戻すことができます。他のストレージパーティション関連のエンタープライズポリシーが非推奨になったときに、このポリシーも非推奨となります。

応答しないウェブページからのクラッシュレポートの呼び出しスタック

この機能は、JavaScript コードが無限ループや非常に長い計算を実行しているためにウェブページが応答しなくなったときに、JavaScript のコールスタックをキャプチャします。これにより、デベロッパーは応答しなくなる原因を特定し、より簡単に修正できます。理由が応答しない場合、JavaScript のコールスタックはクラッシュレポート API に含まれます。

Canvas の浮動小数点カラータイプ

浮動小数点ピクセル形式（8 ビット固定小数点ではなく）を CanvasRenderingContext2D、 OffscreenCanvasRenderingContext2D、ImageData で使用できるようになりました。これは、高精度アプリケーション（医療用可視化など）、ハイダイナミックレンジコンテンツ、線形作業用カラースペースに必要です。

信頼できない平文 HTTP の事前レンダリングを禁止

現在、事前レンダリングは HTTP と HTTPS で許可されていますが、プリフェッチは HTTPS でのみ機能します。プリフェッチと一貫性を持たせるため、事前レンダリングを制限します。

Document-Isolation-Policy

Document-Isolation-Policy を使用すると、ドキュメントは COOP や COEP をデプロイすることなく、ページの crossOriginIsolation ステータスに関係なく、自身に対して crossOriginIsolation を有効にできます。このポリシーはプロセス分離によってサポートされています。また、ドキュメントの非 CORS クロスオリジンサブリソースは、認証情報なしで読み込まれるか、CORP ヘッダーが必要になります。

詳しくは、ドキュメント分離ポリシー: 強力なウェブ機能を簡単に有効にするをご覧ください。

Web Cryptography の Ed25519

この機能により、Web Cryptography API で Curve25519 アルゴリズム（署名アルゴリズム Ed25519）がサポートされるようになりました。

IP アドレスのロギングとレポート

Chrome Enterprise では、ローカル IP アドレスとリモート IP アドレスを収集して報告し、それらをセキュリティ調査ログ（SIT）に送信することで、セキュリティモニタリングとインシデント対応の機能を強化しています。また、オプションで、管理者が Chrome Enterprise レポートコネクタを使用して、1P および 3P SIEM プロバイダに IP アドレスを送信できるようになります。Chrome Enterprise Core をご利用のお客様にお使いいただけます。

JavaScript Promise Integration

JavaScript Promise Integration（JSPI）は、 WebAssembly アプリケーションを JavaScript Promise と統合できる API です。これにより、WebAssembly プログラムが Promise のジェネレータとして機能し、WebAssembly プログラムが Promise を持つ API とやり取りできるようになります。特に、アプリケーションが JSPI を使用して Promise を持つ（JavaScript）API を呼び出すと、WebAssembly コードは一時停止します。WebAssembly プログラムが最終的に完了すると、WebAssembly プログラムの元の呼び出し元に Promise が提供されます。

Language Detector API

Language Detector API は、指定された文字列の言語を識別する JavaScript API です。この API は、言語検出タスクを実行するように調整された基盤となるモデルによってサポートされています。

文字列を指定すると、Language Detector API は、検出された言語の順序付きリストと、各結果の信頼度スコアを返します。

必要に応じて、デベロッパーは Language Detector インスタンスを作成するときに、想定される入力言語のリストを渡して、特定の言語で検出を行うユースケースを最適化できます。

`SVGMatrix`、`SVGRect`、`SVGPoint` の float 属性と引数を制限

SVGMatrix、SVGRect、SVGPoint に float 属性または引数を設定する場合、Infinity または Nan として設定できなくなりました。SVG 仕様で定義されているように、設定しようとすると JavaScript 例外がスローされます。

Selection API `getComposedRanges` と `direction`

この機能では、Selection API 用の 2 つの新しい API メソッドが提供されます。

Selection.direction は、選択の方向を "none"、"forward"、"backward" のいずれかで返します。
Selection.getComposedRanges() は、0 個または 1 個の「構成済み」StaticRange のリストを返します。

「構成済み」StaticRange は、通常の範囲ではできないシャドウ境界を越えることができます。

次に例を示します。

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

選択範囲が shadowRoots リストにないシャドウルート境界を越える場合、StaticRange のエンドポイントは、そのツリーの外側に「再スコープ」されます。これにより、不明なシャドウツリーが公開されないようにします。

ウェブアプリのスコープ拡張機能

ウェブアプリがスコープを他のオリジンに拡張できるようにする scope_extensions ウェブアプリマニフェストフィールドを追加します。

例:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

これにより、複数のサブドメインとトップレベルドメインを管理するサイトを単一のウェブアプリとして表示できます。

リストに登録されているオリジンは、.well-known/web-app-origin-association 構成ファイルを使用して、ウェブアプリとの関連付けを確認する必要があります。

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

WebAssembly ブランチヒント

特定のブランチ命令が特定のパスを取る可能性が高いことをエンジンに通知することで、コンパイルされた WebAssembly コードのパフォーマンスを向上させます。これにより、エンジンはコードレイアウト（命令キャッシュのヒット率の向上）とレジスタ割り当てをより適切に決定できます。

WebGPU: `externalTexture` バインディングの `GPUTextureView`

GPUBindGroup の作成時に、externalTexture バインディングに GPUTextureView を使用できるようになりました。

WebGPU: `copyBufferToBuffer` のオーバーロード

GPUCommandEncoder copyBufferToBuffer() メソッドに、オプションのオフセットパラメータとサイズパラメータを指定できる新しいオーバーロードを使用して、バッファ全体をコピーする簡単な方法が追加されました。

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

Chrome 137 では、次の新しいオリジントライアルに参加できます。

フルフレームレートレンダリングブロック属性

ブロック属性に新しいレンダリングブロックトークン full-frame-rate を追加します。レンダラが full-frame-rate トークンでブロックされると、レンダラは低いフレームレートで動作し、読み込み用に多くのリソースを確保します。

レンダリングされていない iframe でメディアの再生を一時停止する

"media-playback-while-not-rendered" 権限ポリシーを追加して、埋め込み元のウェブサイトが、レンダリングされていない埋め込み iframe（「display」プロパティが「none」に設定されている）のメディア再生を一時停止できるようにします。これにより、デベロッパーはより使いやすいエクスペリエンスを構築できるほか、ユーザーに表示されないコンテンツの再生をブラウザに処理させることでパフォーマンスを向上させることができます。

Rewriter API

Rewriter API は、デバイス上の AI 言語モデルを基盤として、リクエストされた方法で入力テキストを変換して言い換えます。デベロッパーは、この API を使用して、単語数の上限に収まるようにテキスト内の冗長性を削除したり、対象読者に合わせてメッセージを言い換えたり、有害な言語が使用されているメッセージをより建設的なものに言い換えたり、投稿や記事を言い換えてよりシンプルな単語やコンセプトを使用したりできます。

Writer API

Writer API は、デバイス上の AI 言語モデルを基盤として、ライティングタスクのプロンプトを指定して新しい素材を作成するために使用できます。デベロッパーは、この API を使用して、構造化データのテキストによる説明を生成したり、レビューや商品説明に基づいて商品に関する投稿を作成したり、賛否両論のリストを完全なビューに展開したりできます。

Chrome 137 ベータ版 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

CSS と UI

if() 関数

reading-flow プロパティと reading-order プロパティ

offset-path: shape()

SVGSVGElement で transform 属性をサポート

<use> でフラグメントを省略して外部ドキュメントのルート要素を参照できるようにする

accent-color プロパティのシステム アクセント カラーを Windows と ChromeOS に拡張

view-transition-name: match-element